ARIA Landmarks* for Screen Readers

HTML WAI-ARIA roles help screen reader users.

*Landmark according to W3C means:

“A type of region on a page to which the user may want quick access. Content in such a region is different from that of other regions on the page and relevant to a specific user purpose, such as navigating, searching, perusing the primary content, etc.”

Man Accessing Computer Via Screen Reader

Demonstration of screen readers and screen magnifiers

The roles can help screen reader users more easily detect different aspects of the page. For example:

role="application" : When the user navigates an element assigned the role of application, assistive technologies should switch to an application browsing mode, and pass keyboard events through to the web application. Use this role with caution. You only need to use it when containing advanced widgets that emulate a real desktop application. ie. Hardly ever. Use on a <div>

role="banner": A region that contains the prime heading or internal title of a page. (there should be only one per page). Use on <header>

role="complementary":  A complementary section of the document that is still meaningful when separated from the main content. Use on <aside>

role="contentinfo" :  Metadata applying to the parent document. Footnotes and copyrights belong here. It is recommended to  add the role="contentinfo" to the main <footer>

role="form" : Form elements; often editable – which can be processed by a server. Use on <form>

role="main" : The main content of a document.  Within any document or application, there should be no more than one element with the main role. Use on <body>

role="navigation":  The page navigation: a collection of navigational elements for navigating the document or related documents. Use on <nav>

role="search" :  The search tool of a site. Recommended to use on <form> or <div>

 20Tiemann-closeup

See this article:

Using WAI-ARIA Landmarks – 2013

And more at:http://www.w3.org/TR/wai-aria/roles

Leave a Reply