Think of code hierarchy when structuring your content so that screen readers and keyboard-only users can access interactive elements in a logical and predictable order via tabbing. Create the tab flow hierarchy by using the source code to arrange the keyboard navigation. Begin with the header, followed by the main navigation, then page navigation (from left to right, top to bottom), and end with the footer. The objective is to give keyboard users an intentional experience that is comparable to the experience of mouse users.
Use native HTML elements as much as you can, and use them for their correct purpose. These elements have built-in accessibility benefits. They inform screen readers what they are and what they do, and standard interactive elements, such as a button, include keyboard functionality. Aside from making it accessible, this will also make it easier to develop and maintain, better on mobile, and good for search engine optimization.
<button>Play Video</button><header></header><main></main><nav></nav><footer></footer><aside></aside><section></section><article></article>
When adding content, consider cognitive disabilities, anyone whose native language isn’t the language your content is written in, and screen readers. When possible, avoid dashes, abbreviations, acronyms (at least the first time), and table layouts if a table is not needed. If abbreviating, use the native <abbr />
element with title attribute.
"9 to 5" "November" <abbr title="November">Nov</abbr>
Consider visually impaired people when labeling elements. Make sure there is textual context for screen readers.
<!-- Do this --><a>Read more about pricing</a>
<!-- Not this --><a>Click here</a>
Always specify table headers with <th />
elements, and make sure they stand out. Utilize scope
attribute if necessary to specify if they are headers for rows or columns. Utilize alternative text along with tables for visually impaired users. <caption />
is preferred, but <table />
summary works too.
<table summary="Names and Ages of My Coworkers"><caption>Names and Ages of My Coworkers</caption><thead><tr><th scope="col">Firstname</th><th scope="col">Lastname</th><th scope="col">Age</th></tr></thead><tbody><tr><td>Jane</td><td>Smith</td><td>22</td></tr><tr><td>Tom</td><td>West</td><td>47</td></tr></tbody></table>
It is important to take into account visually impaired users when including data visualizations. Consider accompanying visuals with a data table as another alternative for users who rely on screen readers. It is also important to take into account color choices for color-blind users.
Every image that is not decorative must include alt
text with a meaningful description of the image and a title
attribute. You can also utilize aria-labelledby
along with id
attributes instead of alt
text. If the image is decorative, use an empty alt
attribute; otherwise the screen reader will read the whole image url if the alt
is left out.
<!-- Example 1 -->A sleeping puppy" />
<!-- Example 2 -->;foo.onmouseover = someFunction();foo.onmouseout = anotherFunction();foo.onfocus = someFunction();foo.onblur = anotherFunction();