The majority of this content and code were taken from the WebAim and WCAG 2.0 websites.
A screen reader will always try to read aloud any navigation it comes across, on every page load, no matter what. This can become annoying to those users. Providing a mechanism with which to quickly bypass it can greatly improve their experience. With as little as two keystrokes, they can jump right to the relevant content.
<a href="#maincontent">Skip to main content</a>
<p>This is the first paragraph</p>
WAI-ARIA (Accessible Rich Internet Applications or ARIA) is a W3C protocol for enhancing and supporting accessibility of scripted and dynamic content. ARIA enhances accessibility of interactive controls (such as tree menus, drag and drop, sliders, sort controls, etc.), provides content roles for identifying page structure (navigation, search, main content, etc.), areas that can be dynamically updated (called “live regions” in ARIA), better support for keyboard accessibility and interactivity, and much more.
Read more about ARIA.
WAI-ARIA provides the ability for developers to specify roles for document areas (and many other things). The available Document Landmark Roles are:
Site-orientated content, such as the name of the web site, title of the page, and/or the logo.
The area that contains the navigation links for the document or web site.
The main or central content of the document.
This section contains the search functionality for the site.
Stand-alone content that makes sense out of context from the rest of the document. Examples might be a blog posting, a comment on a blog, a forum post, etc. Specifically, a blog posting might be identified as an article and individual blog comments might also be marked up with a role of article within that blog posting.
Supporting content for the main content
Informational child content, such as footnotes, copyrights, links to privacy statement, links to preferences, and so on.
The tabindex attribute allows web developers to customize the tab/navigation order of web content. Most of the time, tabindex is not necessary. It should only be used in cases where the default tab order is not ideal and when the tab order cannot be changed by rearranging items in the content and/or by altering the style sheet to reflect the best visual arrangement.
The tabindex attribute is added to HTML elements, as in the example below:
<a href="http://webaim.org/" tabindex="1">WebAIM.org</a>
<form action="submit.htm" method="post">
<input type="text" id="name" tabindex="2">
<input type="submit" id="submitform" tabindex="3" value="Submit">
Some elements are only helpful for sighted users. If these elements are not hidden, often content is repeated like separate desktop and mobile navigation menus.
To hide elements with ARIA use the following attribute:
Read more about hiding elements.
Do not do this: Products
Always define the language at the top of the page (shown below):
And, in block quotes when the language changes(shown below):
Pages should be structured in a hierarchical manner, generally with one 1st degree headings (<h1>) being the most important (usually page titles or main content heading), then 2nd degree headings (<h2> - usually major section headings), down to 3rd degree headings (sub-sections of the <h2>), and so on. Technically, lower degree headings should be contained within headings of the next highest degree (i.e., one should not skip heading levels, such as from an <h2> to an <h4>, going down the document).
Previous post: UX Around the World in 300 Seconds
Next post: Accessibility Considerations