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.
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.
Web Axe has been blogging and podcasting for over four years now! Since September 2005, Dennis Lembree has been contributing to the web accessibility community with blogs and podcasts about techniques, news, and events around development of accessible web sites. Dennis started Web Axe as a member of the Detroit Podcasters Network. Co-host Ross Johnson of 3.7 Designs joined the following year. Dennis and Ross are also the co-founders of Refresh Detroit. The site continues to grow in popularity, and the number of RSS subscribers has doubled over the last year. Thank you readers and listeners!
Coming soon, a great interview podcast!