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 role="application" >
Add the main role to an HTML element that contains the primary content of the docu-
ment, such as article s, div s, etc.:
<div role="main" >
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:
<article role="main" >
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
( ), 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 .
See Also
Summary of screen reader bugs with HTML5 elements combined with ARIA landmark
roles at and workarounds for
some assistive technology bugs at
-plus-aria-sanity-check/ .
Search WWH ::

Custom Search