Define Landmark Regions of a web page using HTML5 sectioning elements
Landmark regions are used by screen readers to make it easier for users to navigate the content on the page by defining the structure of the page. Tools like the Rotor in VoiceOver rely on landmark regions to provide users with the ability to skip directly to the desired section of the page. We can do this either using HTML5 landmark elements or <div> elements with aria roles. In the past, the recommendation was to use both but now we should only use one or the other. We should prefer HTML5 to ARIA roles when possible.
The following are HTML5 elements for landmark regions:
- article
- aside
- header
- footer
- main
- nav
- section
References
- https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html
- https://www.a11ymatters.com/article/intro-html5-sectioning-elements/
- https://www.w3.org/TR/html-aria/#docconformance
Instructor: [00:00] In a previous lesson, we defined landmark regions using ARIA roles. Now we're going to go ahead and edit those landmark regions to instead use HTML5 sectioning elements. Here we are again in our React component that defines these landmark regions.
[00:16] Here we have a div with role of banner. That is equivalent to the HTML5 element header. Here we have div with role of navigation. That is equivalent to the HTML 5 element nav. Here we have a div with role of main, and that is equivalent to the main element. Finally, here is our div with role content info, and that is equivalent to footer element.
[00:51] Now that we've changed those, let's go ahead and double check and make sure that we are still passing all of our accessibility audits. React Apps is still not reporting any findings concerning landmark regions. If we check voiceover in Safari, and run the router...
Voiceover: [01:09] Landmarks menu.
Instructor: [01:10] we still see all of the landmark regions we expect.
Voiceover: [01:13] Diner.
Instructor: [01:14] We've still got our banner...
Voiceover: [01:15] Navigation.
Instructor: [01:16] our navigation.
Voiceover: [01:17] Main.
Instructor: [01:18] our main.
Voiceover: [01:18] Content information.
Instructor: [01:20] and content information. We should prefer HTML5 element over ARIA attributes when there is redundant functionality provided by each. That's because HTML5 provides much more semantic elements.
[01:36] If we look at a div comparing these two, with our ARIA roles here on the left and our HTML5 elements here on the right, you can see that the HTML5 elements just provide much more clean and easier to read code.
[01:50] Instead of having to scroll through all of these divs with roles, we've got elements that are very explanatory.