There must only be one main landmark to navigate to the primary content of the page, even if the page contains iframes.

Rule Description

It is a best practice to ensure that there is only one main landmark to navigate to the primary content of the page, and that if the page contains iframes, each should either contain no landmarks, or just a single landmark.

The Algorithm, in Simple Terms

Ensures that all content on a page is contained within a landmark region

Why this is Important

Navigating a web page is far simpler for screen reader users if all of the content is split between a number of high level sections. Content outside of these sections is difficult to find and its purpose may be unclear.

HTML has historically lacked some key semantic markers, such as the ability to designate sections of the page as the header, navigation, main content, and footer. Using both HTML5 elements and ARIA landmarks in the same element is considered a best practice, but the future will probably favor HTML regions as browser support increases.

Compliance Data & Impact

User Impact: Moderate
Disabilities Affected:
  • Blindness
  • Deafblindness
  • Mobility/Dexterity
Severity: Moderate
Issue Type:
  • Deque Best Practice
WCAG Success Criteria:
  • Not applicable
Section 508 Guidelines:
  • Not applicable

How to Fix the Problem

Ensure there is a navigation point to the primary content of the page. If the page contains iframes, each iframe should contain either no main landmarks or just one.

Ensure all content is contained within a landmark region, designated with HTML5 landmark elements and/or ARIA landmark regions.

It is a best practice to use both HTML 5 and ARIA landmarks to ensure all content is contained within a navigational region. In HTML5, you should use elements like <header>, <nav>, <main>, and <footer>. Their ARIA counterparts are role=”banner”, role=”navigation”, role=”main”, and role=”contentinfo”, in that order. By using both HTML5 and ARIA markup, you make the webpage more robust and functional no matter what screen reader technology is used.

Once this markup is added, screen reader users will be able to navigate to a section based on its ARIA landmark or HTML element. This provides a simple replacement for a skip navigation link, though the replacement is only useful for users of screen readers. Sighted users or users of screen enlargers wouldn’t get much benefit from the addition, so it can’t replace skip navigation links altogether.

Example

A simplified web page, stripped down to just the bare landmark essentials, might look something like this:

<header role="banner">
   <p>Put company logo, etc. here.</p>
</header>
<nav role="navigation">
   <ul>
      <li>Put navigation here</li>
   </ul>
</nav>
<main role="main">
   <p>Put main content here.</p>
</main>
<footer role="contentinfo">
   <p>Put copyright, etc. here.</p>
</footer>

The markup for regions and roles is redundant, but this is a transition period, and the above markup is the most robust.

Related Deque University Course Pages

Related Deque Code Library Examples

Other Related Resources

Additional Information

Relevant Technologies:
  • HTML 4
  • HTML5
  • ARIA
Relevant Custom Widget Type(s):
  • Landmark Role (ARIA)
Test Reliability: Automated testing is possible, with high accuracy
Rule ID: landmark-one-main