Main Content

This tutorial demonstrates how to add ARIA landmarks to a Web page to aid in accessibility. ARIA landmarks are attributes you add to elements to create semantically defined sections of a page that allow users of assistive technologies to navigate the page more easily. You can define the following navigational landmarks.

When you add ARIA landmarks to a page, it is like building in a set of "skip to" links, like "skip to main content", "skip to search", etc. Screen reader users can use a single key to instantly jump to each of these sections and know what the section's function is. ARIA landmarks do not impact the display of your page in any way so they are an easy way to add additional accessibility into your existing site.

The role of "application" is not covered in this demonstration. This role is used when creating your own widgets or web applications that need to behave more like a desktop application than a traditional Web page.

This page is designed in XHTML 1.0 Transitional, but the additional markup would also apply to HTML 4.x. Also, additional issues must be considered when using ARIA landmarks in HTML 5. These issues will be covered in a different demonstration site at a later date.

Here are the notes and pertinent code changes for each section of this page for implementing ARIA landmarks. You can also view the source code to see these changes.

Banner (banner)

  1. The ARIA role "banner" is used to indicate mostly site-oriented content rather than page specific content. Read the ARIA specification for the "banner" role.
  2. Add the attribute role="banner" to the encompassing <div>.
  3. Add the attribute aria-labelledby="bannerHeading" to the encompassing <div> to explicitly say what the heading is for this section.

Site Navigation (navigation)

  1. The ARIA role "navigation" is used to indicate a collection of links to navigate the document or related documents. Read the ARIA specification for the "navigation" role.
  2. Add the attribute role="navigation" to the encompassing <div>.
  3. Add the attribute aria-label="Site Navigation" to add a descriptive label to this section.

Search This Site (search)

  1. The ARIA role "search" is used to define a region where search functionality is located. The role "search" is a specialized version of "form" so you do not need to label this section with the role of "form." Read the ARIA specification for the "search" role.
  2. Add the attribute role="search" to the encompassing <div>.
  3. Add the attribute aria-labelledby="searchLabel" to the encompassing <div> to explicitly say what the heading is for this section.
  4. In this situation, since the form has only one input element, an alternative implementation for indicating the heading is to set aria-labelledby="searchTermLabel" and not including the heading of "Search This Site" on the page at all.

Main Content (main)

  1. The ARIA role "main" is used to indicate the content that relates directly to the central topic of the document. Read the ARIA specification for the "main" role.
  2. Add the attribute role="main" to the encompassing <div>.
  3. Add the attribute aria-labelledby="mainContentLabel" to the encompassing <div> to explicitly say what the heading is for this section.
  4. You should use the role "main" only once per page.
  5. If you include the role="main" on an element in a page, you do not have to provide a "skip to main content" link, as assistive technologies will be able to easily jump to this portion of the page. For compatibility with older assistive technologies and for users who do not know how to utilize landmarks you should still provide a "skip to main content" link.

Subscribe to Our Newsletter (form)

  1. The ARIA role "form" is used to indicate a section that contains a form. Read the ARIA specification for the "form" role.
  2. Add the attribute role="form" to the encompassing <div>.
  3. Add the attribute aria-labelledby="newsletterLabel" to the encompassing <div> to explicitly say what the heading is for this section.
  4. Using the role="form" still requires you to use the <form> tag and accompanying <label> and <input> tags.

ARIA and Validation (complementary)

  1. The ARIA role "complementary" is used to indicate content that is complementary to the main content, yet has meaning when separated from the main content. Read the ARIA specification for the "complementary" role.
  2. Add the attribute role="complementary" to the encompassing <div>.
  3. Add the attribute aria-labelledby="validationLabel" to the encompassing <div> to explicitly say what the heading is for this section.

Footer (contentinfo)

  1. The ARIA role "contentinfo" indicates a region that contains information about the parent document. It often contains information like copyright and privacy statements. Read the ARIA specification about the "contentinfo" role.
  2. Add the attribute role="contentinfo" to the encompassing <div>.
  3. You should use the role "contentinfo" only once per page.
  4. It is permissible to not include an aria-labelledby attribute (for this role or for any other role) if there is no visual label for a region and you have used one of the standard ARIA roles to identify the role of the region.