Difference between revisions of "MikeS Nav-Landmark"

From Level Access Web Labs
Jump to navigation Jump to search
Line 8: Line 8:
 
<br><br>
 
<br><br>
  
<nav>Nav element with no label</nav>
+
<nav>Nav element with no label
 +
<br>lorum ipsum</nav>
 
separator
 
separator
<div role="navigation">ARIA navigation role with no label</div>
+
<div role="navigation">ARIA navigation role with no label
 +
<br>lorum ipsum</div>
 
<br>
 
<br>
  
Line 19: Line 21:
 
<br><br>
 
<br><br>
  
<nav aria-label="Fruit">Nav element with aria-label: apples oranges bananas</nav>
+
<nav aria-label="Fruit">Nav element with aria-label: apples oranges bananas
 +
<br>lorum ipsum</nav>
 
separator
 
separator
<div role="navigation" aria-label="vegetables">ARIA navigation role with aria-label: corn potatoes carrots</div>
+
<div role="navigation" aria-label="vegetables">ARIA navigation role with aria-label: corn potatoes carrots
 +
<br>lorum ipsum</div>
 
<br>
 
<br>
  
Line 28: Line 32:
 
<br><br>
 
<br><br>
  
<nav role="presentation">Nav element with ARIA role of presentation</nav>
+
<nav role="presentation">Nav element with ARIA role of presentation
 +
<br>lorum ipsum</nav>
 
separator
 
separator
<nav role="none">Nav element with ARIA role of none</nav>
+
<nav role="none">Nav element with ARIA role of none
 +
<br>lorum ipsum</nav>
 
<br>
 
<br>
 
separator
 
separator

Revision as of 02:35, 10 January 2017

Unlabeled landmarks

JAWS 18 announces both as merely "navigation region" (and "navigation region end" at the closing tag).
NVDA 2016.4 announces "navigation landmark" at the beginning (but NVDA does not explicitly announce the end of landmarks/regions)
VoiceOver announces both as "navigation landmark" after the initial content (rather than before it)

separator

ARIA navigation role with no label
lorum ipsum


Labeled landmarks

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).
NVDA 2016.4 announces both by the combination of their label text followed by "navigation landmark", e.g. "fruit navigation landmark".
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).

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.

separator


separator