ARIA Landmark Roles were recently added to the Web Axe web site. It’s a great and easy way to add better accessibility to your site, start learning ARIA, and future-proof your site. And it only takes a few minutes, so why not add it into your site? (If you haven’t already!)
An ARIA landmark role is simple an attribute added to a (probably) already existing tag in your site. For example, to add a search role, simple add the attribute role="search" to the tag which contains the search content (the div, fieldset, etc).
Here are some basic landmark roles with links to the W3C definitions:
- banner – usually the main header of your site; the area with logo, slogan, etc.
- complementary – supporting section of page, separate from the main content, like a sidebar.
- contentinfo – area that contains information about the site such as copyright lines and links to privacy notices (i.e. page footer).
- main – the main content; area with central topic of the web page.
- navigation – a section for navigating the site.
- search – a section with a any type of search tool.
In the following example, four landmark roles are used to create a basic page structure.
[header content]
[main content]
[footer content]
Addendum
If more than one type of role is implemented, use the aria-labelledby attribute to give each a unique name. Here’s an example from this web page which has two navigation role attributes.
2 replies on “Adding ARIA Landmark Roles”
Good job Dennis.
One of my favourite roles is role=”application”. This instructs the AT to treat whole/part of the page as an application. Keyboard strokes, usually reserved for browsing, can then be used to enhance the application, e.g. allowing users to navigate a tree control using the Up and Down Arrow keys.
Thanks for the write-up.
Thanks for the reminder. I started using these a couple of years back when I found the YUI CSS Grid Builder.
Since I have been using other grids but forgot how useful this tool is for creating quick landmark based skeletons.
Keep pushing guys!