Using appropriate headings to identify the structure of a web page is essential for people who use assistive technologies, like screen readers; however, heading structure can become cumbersome when applied to complex pages with multiple regions, each with their own nested headings. ARIA landmarks help by adding additional markup to identify region level-structure, which allows headings to be reserved for providing structure within a region. Screen reader users can navigate by landmark, providing a way to jump from region to region.
Remember: ARIA landmarks add additional region-level markup. They do not replace headers!
ARIA landmarks are applied to html container elements (<div>, <nav>, etc.) by defining an additional attribute for the container. For example:
Most page content should be contained within an ARIA landmark role. There are eight roles:
The first five roles should be used on most websites.
contentinfo should be used when it seems useful to do so. The
application landmark role should only be used for custom ARIA widgets.
HTML 5 adds additional container types to enhance the semantic markup of a page; however, there is no even support for these additional elements across differing web browsers. Browsers that do not support HTML 5 will treat the additional containers as
<div> elements. Until uniform HTML 5 support, and in order to provide backward compatibility, ARIA landmarks should be used along with the new container tags. Below is a table with the five most commonly used ARIA landmarks and their HTML 5 equivalents.
|banner||none||Once per page on an appropriate <header> or <div>|
|navigation||<nav>||Label if more than one|
|main||none||Once per page on main content container|
|complementary||<aside>||May be appropriate to put on other containers|
|search||none||Attach to <form> used for site search|