Test for Landmark Region Accessibility Issues in React
Using our accessibility auditing toolkit we can find issues concerning landmark regions in our web application. The react-axe library will report findings in the JavaScript console of the browser. We could also run the axe browser extension to see the same results. The tota11y browser extension will annotate any landmark regions on the page and therefore if none are annotated it may indicate that they aren't any (NOTE: tota11y will only annotate landmark regions using aria roles and not those using HTML5 elements). Finally using the VoiceOver Rotor in Safari will show us whatever landmark regions have been defined in the Landmarks menu.
Instructor: [0:00] Here's a sample Web application I've got with some accessibility issues in it. I'm running ReactX, and so, we can see any of the findings being reported to the console here.
[0:10] We can see that we have a couple of findings concerning landmark regions. Our document does not have a mainland mark, and all page content must be contained by landmarks. For this page, there are no landmarks.
[0:26] If we run totally, we can also see that when we go to Annotate Landmarks, nothing is annotated. Again, we don't have any landmark regions and that's a problem.
[0:37] One of the impacts, for example, is that the router with VoiceOver is not going to list any of the landmark regions. Users that make use of the router are not going to be able to easily find the various sections of the page, and we can demonstrate this.
[0:52] Here's the router. If we go through each of the menus, we should see one for landmark regions. Here, there is no menu for landmark regions because we don't have any, so let's fix that.