post

Footer About

Footer Contribute

Footer Get Involved

Footer Links

Mind the Product

Innovation

Sunday Rewind: Show your true innovative colours by Julia Shalet

Customer

How behavioral economics can improve product strategy

B2B product management

Artificial Intelligence (AI) & Machine Learning (ML)

Building Product Teams

Business Strategy

Data Driven Product Management

Digital Transformation

Diversity and Inclusion

Minimum Viable Product

OKRs

Prioritisation

Product Design

Product Research

Product Development Process

Product Ethics

Product Discovery

Product Leadership

Product Management Career

Product Strategy

Stakeholder Management

🌎 <a href="https://www.mindtheproduct.com/world-product-day/" style="color:#FFFFFF;text-decoration:underline;">Happy World Product Day!</a> Be sure to celebrate product, yourself, and your peers today! 🎉

Join us at #mtpcon London in 2025 – mark your calendars

Connecting fans to creators at Spotify (Dariusz Dziuk, Product Lead, Spotify)

Why teams often struggle with OKRs: A conversation with Jeff Gothelf

Deep dive: Crafting your product vision and mission

5 ways to invent and simplify as an AI/ML product manager

Imogen brings more than 10 years of experience in print and digital to her role as Director of Content Strategy for Mind the Product. The core of her experience comes from 10 years working as an editor for Bauer Consumer Media, a division of Europe’s largest privately-owned publishing group, and as Head of Content for Benivo, an award-winning startup.

Director of Content Strategy

Imogen Schels

<p>You will find a wide range of free, accessibility tools online. These include everything from colour contrast checkers and readability tools to open-source screen readers.</p>
<p>For example, you can make some quick checks using the <a href="https://wave.webaim.org/" target="_blank" rel="noopener noreferrer">WAVE web accessibility evaluation tool</a> (input a URL and the tool will immediately highlight errors) while the <a href="http://gunning-fog-index.com/index.html" target="_blank" rel="noopener noreferrer">Gunning Fog Index</a> can be used to check text readability. Simply paste a passage of text (one or more full paragraphs of around 100 words) into the window and click Calculate.</p>
<ul>
<li>Text intended for a wide audience generally needs an index of less than 12</li>
<li>Text for a near-universal understanding generally needs an index of less than 8</li>
</ul>
<p>Discover an extensive <a href="https://www.w3.org/WAI/ER/tools/" target="_blank" rel="noopener noreferrer">list of online evaluation tools</a> at W3C and, for a few tips and tricks for some basic checks, read on!</p>
<h2>Manual Checks</h2>
<p>There are some simple checks you can make yourself. Here we&#8217;ve provided instructions for three to get you started.</p>
<h3>Test Keyboard Navigation on Your SIte</h3>
<p>If you&#8217;ve not tried navigating through your site using only your keyboard, it&#8217;s time to give it a go. This simple exercise will quickly tell you how well your interface can be operated through a keyboard or keyboard alternative, as would be the experience of a user with limited or no vision or those with physical disabilities that might make mouse and or keyboard use difficult.</p>
<p><strong>Step 1:</strong> Load up your site, and press the “tab” key. What is highlighted first? This is where your keyboard users will begin to experience your site.</p>
<p><strong>Step 2:</strong> Continue pressing “tab” and see where your site takes the user. Does it make sense? Can you get to everything you should be able to interact with using just the tab key?</p>
<p><strong>Step 3:</strong> Start testing your main workflows.</p>
<p>To do this you can:</p>
<ul>
<li>Press “Enter” on a link or button &#8211; when you do, it should behave as though the user clicked it</li>
<li>Press “Enter” or “Space” &#8211; this should allow a user to access dropdown menus</li>
<li>Press the arrow keys &#8211; this should allow users to navigate through the options</li>
<li>Check you can start typing when you tab into a form field</li>
<li>Check you can exit a pop up or overlay without clicking outside the box</li>
</ul>
<p><a href="https://www.mindtheproduct.com/wp-content/uploads/2020/05/person-typing-1375261.jpg"><img loading="lazy" decoding="async" class="wp-image-19855 aligncenter" src="https://www.mindtheproduct.com/wp-content/uploads/2020/05/person-typing-1375261.jpg" alt="" width="843" height="524" /></a>Your main goal in testing with a keyboard is to see where you might get stuck in your app or site if you didn’t have a mouse. You can find extensive guidelines on keyboard operation on <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html">W3C</a>.</p>
<h3>Add/improve Image alt Text</h3>
<p>Every &lt;img&gt; on your site should have the alt= attribute. This enables assistive technology to read it in order to describe what the image is showing to visually impaired users.</p>
<p>Of course, alt text has more uses:</p>
<ul>
<li>It&#8217;s there to provide better context and description for SEO</li>
<li>It is displayed if an image fails to load</li>
</ul>
<p>However, it&#8217;s primary purpose is accessibility and implementing this is easy when you know the rules:</p>
<p><strong>Rule 1:</strong> All images should have <a href="https://www.w3.org/TR/WCAG20-TECHS/H37.html" target="_blank" rel="noopener noreferrer">clear and descriptive alt text</a> &#8211; the alt= attribute. This text should describe the information conveyed by the image, including numbers and words, not just the image itself.</p>
<p><strong>Rule 2:</strong> The use of alt= applies to all images but in different ways. For images containing information, and active images (those that perform functions such as a link or button), apply rule 1 above. If the image is purely decorative, use the alt= attribute, but keep it empty, e,g, alt=&#8221;&#8221;. This will tell screen readers to ignore the image.</p>
<h3>Check Your Headings</h3>
<p>Proper headings should always be used &#8211; avoid using text that&#8217;s styled or bold. Bigger fonts help to create hierarchy and can be easier to read while heading types are given tags (&lt;h1&gt; to &lt;h6&gt;) to define their meaning.</p>
<p>These important components, along with others on your site help to create your <a href="https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/the-accessibility-tree" target="_blank" rel="noopener noreferrer">accessibility tree.</a> And, when using screen readers and other assistive technology your users can navigate through your content using your headings to:</p>
<ul>
<li>View a list of all headings on the page</li>
<li>Read or jump by headings,</li>
<li>Navigate to the different levels of headings &#8211; &lt;h1&gt; to &lt;h2&gt; and so on and so forth</li>
</ul>
<p>To manually see if your headings (and components such as images) would be picked up correctly by assistive technologies try this quick check:</p>
<ol>
<li>Right-click on a page on your site</li>
<li>Click &#8216;Inspect&#8217;</li>
<li>Under &#8216;Elements&#8217; look for &#8216;Accessibility&#8217;</li>
<li>Click the &#8216;Accessibility&#8217; tab, somewhere on your page then right-click and select &#8216;Inspect&#8217;</li>
<li>Your accessibility tree will now load, showing you what is and isn&#8217;t being picked up &#8211; this is also a good way to sense check e.g. headings to ensure they make sense</li>
</ol>
<h3>Colour Contrast Checks</h3>
<p>Because the main colour contrast guidelines can be a little confusing, WebAim has done a good job of simplifying the <a href="https://webaim.org/articles/contrast/" target="_blank" rel="noopener noreferrer">WCAG 2 Contrast and Color Requirements</a> for web designers and content creators. These, and other free, online tools can be used to easily check colour contrast on your site.</p>
<p>Most contrast checkers ask you to supply the foreground and background</p>
<ul>
<li><a href="https://webaim.org/resources/contrastchecker/" target="_blank" rel="noopener noreferrer">WebAim&#8217;s Contrast Checker</a></li>
<li><a href="https://contrastchecker.com/" target="_blank" rel="noopener noreferrer">Contrastchecker.com</a></li>
</ul>
<p><a href="https://material.io/resources/color/#!/?view.left=1&amp;view.right=0&amp;primary.color=FAFAFA" target="_blank" rel="noopener noreferrer">Colour Tool from Material Design</a> If you have found a great tool, tips or resource that you&#8217;d like us to share with the Mind the Product community, let us know. Complete our Accessibility Idea Sharing Form.</p>
<div>
<p>&nbsp;</p>
</div>

core/freeform

Product Management Skills

How to keep your head about generative AI (when everyone is losing theirs) by Claire Woodcock

Useful Web Accessibility Checks and Tools

Imogen Schels

Read more

Comments