ARIA-Landmark

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.

ARIA landmarks are actually ARIA roles. And can be used like: role=”banner”.

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.
  • The following screen shot shows the JAWS window used to list all of the landmarks found on a page:
    Screen Shot of the JAWS Landmark List Window.

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”>

Example 1:

Code


<div id="doc"">
  <div id="header" role="banner">
    Banner/Header Area
  </div>
  <div id="search" role="search">
    Search Area
  </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 id="footer" role="contentinfo">
    Content Info/Footer Area
  </div>
</div>

Works With

Using ARIA Landmarkd
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

Comments are closed.