Accessibility - HTML5

HTML and CSS Reference

In-Depth Information

Add the application role to an HTML element that contains a web application instead

of normal web content. Ensure that the HTML element associated with this role

encompasses the entire web application. This role may instruct assistive technology to

enter a mode that is more appropriate for interacting with web application function-

ality. You may add the document role to the page after the application to indicate where

nonapplication web content resumes:

...

</div>

Add the main role to an HTML element that contains the primary content of the docu-

ment, such as article s, div s, etc.:

In the future, this solution might provide an alternative to “skip to main content” or

“skip navigation” links. In other words, this role may provide a way for assistive tech-

nology users to jump directly to the page's primary content and avoid going through

long lists of links and content that are repeated on every page in the site.

If an article is the central content on a page, add the main role to the article element:

Discussion

ARIA extends the accessibility of HTML. Assistive technologies can use ARIA landmark

roles to identify and navigate to sections of content. These roles help provide a more

reliable and consistent user experience.

While you are allowed to have more than one nav element per page, only main blocks

of navigational links should be enclosed in a nav element. The footer element is an

example of where links may exist that do not need a nav element—the footer element

alone may be sufficient. Of course, if you create a “fat footer” like that on the W3C site

( http://www.w3.org ), it would be appropriate to use the nav element in the footer.

For more information about “fat footer” design, see the UI Patterns

website at http://ui-patterns.com/patterns/FatFooter .