Useful links: media queries, landmark roles, structural elements and the tools to test them

With little effort, you've made great improvements for screen reader users, but there's one more thing you can do. The navigation is semantically still just a list of links and it's hard to tell that this specific list is the main navigation of your website. You can turn this ordinary list into a navigational list by wrapping the &LTul> in a &LTnav> element.Using the &LTnav> element has several advantages. Notably, a screen reader announces something like "navigation", when the user interacts with it, and it adds a landmark to the page. Landmarks are special regions on the page, like the &LTheader>, &LTfooter> or &LTmain>, to which a screen reader can jump. Having landmarks on a page can be useful, because it allows screen reader users to access important regions on the page directly without having to interact with the rest of the page. For example, you can jump from landmark to landmark by pressing the D key in NVDA. In Voice Over you can use the rotor to list all landmarks on the page by pressing VO + U.Rotor in VoiceOver listing all the landmarks on a page.In this list you see 4 landmarks: banner which is the &LTheader> element, navigation is the &LTnav>, main the &LTmain> element, and content information is the &LTfooter>. This list shouldn't be too long, you really only want to mark critical parts of your UI as landmarks, like the site search, a local navigation, or a pagination.If you have a site-wide navigation, a local navigation for the page, and a pagination on a single page, you might also have 3 &LTnav> elements. That's fine, but now there are three navigation landmarks and semantically they all look the same. It's hard to tell them apart, unless you know the structure of the page really well.The rotor in VoiceOver listing three unlabelled navigation landmarks.To make them distinguishable, you should label them by either using aria-labelledby or aria-label.

Useful links: media queries, landmark roles, structural elements

Download Zip: https://ssurll.com/2vKCb7

Before the introduction of HTML5, ARIA landmark roles were needed to accomplish this. However, we now have native HTML elements available to accomplish the majority of landmark page structure. Leveraging the native HTML landmark elements is preferable to applying ARIA roles, per the first rule of ARIA. For more information, see the ARIA roles section of this chapter.

The WAI-ARIA standard defines different sections of the page as different landmark regions. Together with WAI-ARIA roles, they convey information about the high-level structure of the page and facilitate navigation across landmark areas. This is particularly useful to users of assistive technologies such as screen readers.

Note: Screen readers already provide a method to navigate and convey the nesting and meaning of The , , , , and elements elements via their mapping to landmark roles, information exposed via the browser Acc APIs.

2ff7e9595c