Instructor: 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.
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.
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: Landmarks menu.
Instructor: we still see all of the landmark regions we expect.
Instructor: We've still got our banner...
Instructor: our navigation.
Instructor: our main.
Voiceover: Content information.
Instructor: 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.
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.
Instead of having to scroll through all of these divs with roles, we've got elements that are very explanatory.