Difference between revisions of "MikeS Nav-Landmark"

From Level Access Web Labs
Jump to navigation Jump to search
Line 1: Line 1:
 
<html>
 
<html>
 
<body>
 
<body>
 +
<h2>Landmark identification</h2>
 +
The following broadly applies to landmarks and regions of both ARIA and HTML5 forms, such as the equivalence of the NAV element and the ARIA role of navigation, and of the SECTION element and the ARIA role of region. The terminology can vary by screen reader (e.g. JAWS says 'region' while NVDA & VoiceOver say 'landmark'), as can the voice used (e.g. VoiceOver uses a slightly different voice to announce them) and the order (e.g. JAWS announces the start of the landmark/region before any enclosed text, while VoiceOver reads the initial enclosed text before announcing the start of the landmark/region).
  
 
<h3>Unlabeled landmarks</h3>
 
<h3>Unlabeled landmarks</h3>
JAWS 18 announces both as merely "navigation region" (and "navigation region end" at the closing tag).<br>
+
JAWS 18 announces both examples below as "navigation region" (and "navigation region end" at the closing tag).<br>
NVDA 2016.4 announces "navigation landmark" at the beginning (but NVDA does not explicitly announce the end of landmarks/regions)<br>
+
NVDA 2016.4 announces "navigation landmark" at the beginning (though NVDA does not explicitly announce the end of landmarks/regions).<br>
VoiceOver announces both as "navigation landmark" after the initial content (rather than before it)
+
VoiceOver announces both examples as "navigation landmark" after reading the initial content (rather than before it). It announces "end navigation" at the closing tag, after the last content. Both are announced in a slightly different voice.
 
<br><br>
 
<br><br>
  
<nav>Nav element with no label
+
<nav style="background-color: #e1ecf4;">Nav element with no label
 
<br>lorum ipsum</nav>
 
<br>lorum ipsum</nav>
 
separator
 
separator
<div role="navigation">ARIA navigation role with no label
+
<div role="navigation" style="background-color: #e1ecf4;">ARIA navigation role with no label
 
<br>lorum ipsum</div>
 
<br>lorum ipsum</div>
 
<br>
 
<br>
  
 
<h3>Labeled landmarks</h3>
 
<h3>Labeled landmarks</h3>
JAWS 18 announces both by the combination of their label text followed by "navigation region". e.g. "fruit navigation region" (and "fruit navigation region end" at the closing tag).<br>
+
JAWS 18 identifies both examples below by the aria-label text followed by "navigation region". as in "fruit navigation region" (and announces "fruit navigation region end" at the closing tag).<br>
NVDA 2016.4 announces both by the combination of their label text followed by "navigation landmark", e.g. "fruit navigation landmark".<br>
+
NVDA 2016.4 also identifies both by the aria-label text followed by "navigation landmark", as in "fruit navigation landmark" (again, with no 'end' announcement).<br>
VoiceOver announces both by the combination of their label followed by "navigation landmark", e.g. "fruit navigation landmark" (again, after the initial content not before it).  
+
VoiceOver also identifies both by the aria-label text followed by "navigation landmark", e.g. "fruit navigation landmark" and "end fruit navigation".  
 
<br><br>
 
<br><br>
  
<nav aria-label="Fruit">Nav element with aria-label: apples oranges bananas
+
<nav aria-label="Fruit" style="background-color: #e1ecf4;">Nav element with aria-label: apples oranges bananas
 
<br>lorum ipsum</nav>
 
<br>lorum ipsum</nav>
 
separator
 
separator
<div role="navigation" aria-label="vegetables">ARIA navigation role with aria-label: corn potatoes carrots
+
<div role="navigation" aria-label="vegetables" style="background-color: #e1ecf4;">ARIA navigation role with aria-label: corn potatoes carrots
 
<br>lorum ipsum</div>
 
<br>lorum ipsum</div>
 
<br>
 
<br>
  
 
<h3>Neutralized landmarks</h3>
 
<h3>Neutralized landmarks</h3>
The following examples illustrate two methods of usijg ARIA to neutralize a NAV element.
+
The following examples illustrate two methods of usijg ARIA to neutralize a NAV element, in case the use of landmark elements cannot be removed but could be neutralized by adding an ARIA attribute.
 
<br><br>
 
<br><br>
  

Revision as of 07:13, 10 January 2017

Landmark identification

The following broadly applies to landmarks and regions of both ARIA and HTML5 forms, such as the equivalence of the NAV element and the ARIA role of navigation, and of the SECTION element and the ARIA role of region. The terminology can vary by screen reader (e.g. JAWS says 'region' while NVDA & VoiceOver say 'landmark'), as can the voice used (e.g. VoiceOver uses a slightly different voice to announce them) and the order (e.g. JAWS announces the start of the landmark/region before any enclosed text, while VoiceOver reads the initial enclosed text before announcing the start of the landmark/region).

Unlabeled landmarks

JAWS 18 announces both examples below as "navigation region" (and "navigation region end" at the closing tag).
NVDA 2016.4 announces "navigation landmark" at the beginning (though NVDA does not explicitly announce the end of landmarks/regions).
VoiceOver announces both examples as "navigation landmark" after reading the initial content (rather than before it). It announces "end navigation" at the closing tag, after the last content. Both are announced in a slightly different voice.

separator

ARIA navigation role with no label
lorum ipsum


Labeled landmarks

JAWS 18 identifies both examples below by the aria-label text followed by "navigation region". as in "fruit navigation region" (and announces "fruit navigation region end" at the closing tag).
NVDA 2016.4 also identifies both by the aria-label text followed by "navigation landmark", as in "fruit navigation landmark" (again, with no 'end' announcement).
VoiceOver also identifies both by the aria-label text followed by "navigation landmark", e.g. "fruit navigation landmark" and "end fruit navigation".

separator

ARIA navigation role with aria-label: corn potatoes carrots
lorum ipsum


Neutralized landmarks

The following examples illustrate two methods of usijg ARIA to neutralize a NAV element, in case the use of landmark elements cannot be removed but could be neutralized by adding an ARIA attribute.

separator


separator