ARIA landmark Roles
ARIA is a new W3C specification that stands for “Accessible Rich Internet Applications”. Its overall purpose is more fully described on the help page ARIA for Web Applications.
One of the easiest ARIA features to implement, and one that provides significant immediate benefits to screen reader users, is landmark roles. There are eight of these roles, each representing a block of content that occurs commonly on web pages. To use them, simply add a relevant role
attribute to an appropriate container within your HTML. Then, screen reader users can quickly jump to that section of the page. The eight ARIA landmark roles are:
- role=”banner”
- role=”navigation” (e.g., a menu)
- role=”main” (the main content of the page)
- role=”complementary” (e.g., a sidebar)
- role=”contentinfo” (meta data about the page, e.g., a copyright statement)
- role=”search”
- role=”form”
- role=”application” (a web application with its own keyboard interface)
If a role is used more than once on a page, the aria-label
attribute should also be used in order to distinguish between the two regions. For example, a web page might have the following two navigation regions:
- <div role=”navigation” aria-label=”Main menu”>
- <div role=”navigation” aria-label=”User menu”>