[A11Y]: Document SHOULD have one main landmark

[jenstrickland]

Severity: Moderate — Best practice

Feedback Framework

- MUST - must be addressed to be WCAG 2.0 AA compliant
! SHOULD - is an accessibility best practice
+ CONSIDER - things to think about to improve inclusive design and accessibility

Description

Ensure there is a navigation point to the primary content of the page. If the page contains iframe elements, 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 added, screen reader users can navigate to a section based on its ARIA landmark or HTML element. Landmarks provide 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.

Disabilities Affected

• Blind
• Deafblind
• Mobility

Potential fix

Anticipating that there will be text content beneath <img class="img-fluid rounded mb-4" src="https://voices-of-consent-static-images.s3.amazonaws.com/voc_logo.jpg" alt="">, consider putting a <main> element here to contain what would be the primary content of this page. On additional pages, I imagine this is where the primary focus of each page would be.

Why it matters

Navigating a web page is far simpler for screen reader users if all of the content splits between one or more 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 favor HTML regions as browser support increases.

WCAG Guidance

• Deque University - Page must have one main landmark