ARIA Landmarks

From Level Access Web Labs
Jump to: navigation, search

remove navigation

Notes

  • The majority of landmark roles are well supported, though historically NVDA would not announce them as JAWS would. I filed a bug against this but I'm not sure if it's fixed as yet. The landmark role like role=main etc., should convey the beginning and ending boundaries to screen reader users. This works correctly in JAWS.
  • It is possible to determine the beginning and end of a region with NVDA by using browse mode. If you navigate out of the region and back into it using the arrow keys it is announced that the region is entered so it is known.
  • This does not work in Window-Eyes where regions are only announced when navigating from the top.
  • None of the windows screen readers I checked announce regions when navigating using the tab key.
  • You can add a unique label for a landmark region by adding aria-label or aria-labelledby to the same node that contains the role.
  • when using role=region, it is required that an explicit label be set using aria-label or aria-labelledby, otherwise the boundaries will not be recognized.
  • Technically role=application is treated as a landmark role, but this changes the keyboard interaction model for screen reader users. JAWS will enter Applications Mode when Enter is pressed on an active element within an application region, but will not activate the element until Enter is pressed again, also tabbing into an application region will automatically activate Applications Mode. NVDA will now enforce Applications Mode when entering an application region so that only active elements can be interacted with; pressing Insert+Space will re-activate Browse Mode, but browse focus will then be confined within the boundaries of the application region and the only way to get out is to tab out. INSERT+CTRL+SPACE also works for this purpose.

Example

This is the banner section

This is the ARIA role navigation section

This is our site navigation

This is the search section

This is the main section

Main content would appear here

This section contains the HTML5 main element

Application area

Do you like ice cream?

Complementary content

This is where complementary content goes

Form area

Content Info area

(Footer here)

Navigation menu