Using ARIA Landmarks

How are ARIA landmarks used to assist the screen reader user to better navigate a web page?

ARIA landmarks are a good substitute for skip links, and allow the user to skip not just over repetitive navigation but to move directly to the various parts of a web page. The typical screen reader user must start reading at the top left of a page and continue line by line until the bottom right is reached. By using this simple convention, you can provide easy access to the main pieces of your page. And the syntax is very simple to use. This is one easy thing you can do to increase accessibility for the screen reader user.

JAWS provides several keyboard shortcuts for using ARIA Landmarks:

• Move to Next Landmark - SEMICOLON.
• Move to Previous Landmark - SHIFT+SEMICOLON.
• Select a Landmark Item - INSERT+CTRL+SEMICOLON.
  

ARIA Landmarks available:

• application - A region declared as a web application, as opposed to a web document.
• banner - An area that contains things such as the logo or identity of the site sponsor, etc.
• complementary - A supporting section of the document, designed to be complementary to the main content. Example: Sports News and Business News on a typical news page.
• contentinfo - A region that contains information about the parent document. Example: copyrights and links to privacy statements.
• form - A region of the document that represents a collection of form elements.
• main - The main content of the document.
• navigation - A collection of navigational elements. Example: A left navigation area.
• search A region used to create a search widget.

ARIA Landmark Syntax: <div id="content" role="main">

---

Try the Example.

<div id="doc"">
  <div id="header" role="banner">
    Banner/Header Area
    <div id="search" role="search">
      Search Area
    </div>
  </div>

  <div id="nav" role="navigation">
    Navigation Area
  </div>
  
  <div id="main_content" role="main">
    Main Content Area
    <div id="second_content" role="complementary">
      Complementary Content Area
    </div>
  </div>
  
  <div id="footer" role="contentinfo">
    Content Info/Footer Area
  </div>
</div> 

---

• W3C Accessible Rich Internet Applications