Define Landmark Regions of a web page using ARIA roles
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.
The following are ARIA roles for landmark regions:
bannercomplementarycontentinfoformmainnavigationsearchapplication
References
- https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html
- https://www.w3.org/WAI/GL/wiki/Using_ARIA_landmarks_to_identify_regions_of_a_page
- https://www.w3.org/TR/html-aria/#docconformance
Instructor: [0:02] Here is a Web page with some accessibility issues concerning landmark regions. We can see them over here, being reported in the console by ReactX. We're missing one main landmark, and the page content is not currently contained within landmarks.
[0:18] If we look at the structure of this page, we can figure out which sections should be defined as which landmark regions. Looking here, this banner up here looks like it represents the header. This button right here, which navigates us back to the previous page, should probably have a role of navigation.
[0:38] The rest of this comprises our main section of the page. Then down here is our footer. Let's go ahead and define these landmark regions in our code. Here is my React component that contains all of the layout code making up this page.
[0:58] It's a functional component, so the JSX being returned here is what gets rendered into our page. Looking at our code, this div up here is containing that area that we decided was going to be our header.
[1:15] Let's add a role of banner. We had decided that this button should have a role of navigation, since it functionally navigates us back to the previous page. Let's wrap that in a div with role navigation. Now, let's add our div with role main, and make sure we wrap the rest of our page content with that div.
[1:57] Finally, down here is our footer. We just need to add a role. For the aria landmark role, a footer is represented by content info. Now, let's see what that looks like. The findings that we were previously seeing being reported by ReactX are no longer being reported.
[2:17] If we use Totally to annotate the landmark regions of the page, we should now see annotations, and there they are. We've got our banner, our navigation, our main, and down here, our content info. If we go back over to Safari, run Voice-over, and check the landmarks menu of the router...
Voice-over: [2:41] Voice-over landmarks menu.
Instructor: [2:43] Before we were not even seeing the landmark menu in the router. Now, it's showing, and we see all of the landmark regions we expect to. We've got our banner...
Voice-over: [2:52] Banner.
Instructor: [2:53] our navigation...
Voice-over: [2:54] Navigation.
Instructor: [2:55] our main...
Voice-over: [2:55] Main.
Instructor: [2:56] and content information.
Voice-over: [2:57] Content information. Voice-over off.