1. 10
    Test for Landmark Region Accessibility Issues in React
    1m 7s

Test for Landmark Region Accessibility Issues in React

Erin Doyle
InstructorErin Doyle
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

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.

egghead
egghead
~ 45 minutes ago

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

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

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!

Markdown supported.
Become a member to join the discussionEnroll Today