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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!