Difference between revisions of "MikeS Nav-Landmark"

From Level Access Web Labs
Jump to navigation Jump to search
 
(11 intermediate revisions by the same user not shown)
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). One takeaway is that when providing accessible names for these landmarks via aria-label, it is neither necessary nor undesirable to include role-referencing words like 'navigation' or 'landmark' or 'region' because screen readers automatically speak those roles. Note that in constructing the examples below, the use of 'separator' text was designed to provide a clean separation between the end of one landmark and the start of another or the end of a second, nested landmark, as I've observed that VoiceOver may only announce one not both markers in such cases.
 +
<br>
 +
 +
<em>(Need to test and add results for TalkBack, though they may differ between Firefox and Chrome.)</em>
  
 
<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>
 +
 
 +
<nav style="background-color: #e1ecf4;">
 +
<div>Nav element with no label</div>
 +
<p>lorum ipsum</p></nav>
 +
separator
 +
<div role="navigation" style="background-color: #e1ecf4;">
 +
<div>ARIA navigation role with no label</div>
 +
<p>lorum ipsum</p></div>
 +
<br>
 +
 
 +
<h3>Labeled landmarks - aria-label</h3>
 +
JAWS 18 identifies both examples below by the aria-label text ("fruit" or "vegetables") followed by "navigation region". as in "fruit navigation region" (and announces "fruit navigation region end" at the closing tag).<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 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>Nav element with no label</nav>
+
<nav aria-label="Fruit" style="background-color: #e1ecf4;">
 +
<div>Nav element with aria-label: apples oranges bananas</div>
 +
<p>lorum ipsum</p></nav>
 
separator
 
separator
<div role="navigation">ARIA navigation role with no label</div>
+
<div role="navigation" aria-label="vegetables" style="background-color: #e1ecf4;">
 +
<div>ARIA navigation role with aria-label: corn potatoes carrots</div>
 +
<p>lorum ipsum</p></div>
 
<br>
 
<br>
  
<h3>Labeled landmarks</h3>
+
<h3>Labeled landmarks - aria-labelledby</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>
+
<en>NEWLY ADDED - test and update results below!</em><br>
NVDA 2016.4 announces both by the combination of their label text followed by "navigation landmark", e.g. "fruit navigation landmark".<br>
+
JAWS 18 identifies both examples below by the aria-label text ("fruit" or "vegetables") followed by "navigation region". as in "fruit navigation region" (and announces "fruit navigation region end" at the closing tag).<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).  
+
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 also identifies both by the aria-labelledby referenced 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>
+
<h4 id="food1">Fruits</h4>
 +
<nav aria-labelledby="food1" style="background-color: #e1ecf4;">
 +
<div>Nav element with aria-labelledby: apples oranges bananas</div>
 +
<p>lorum ipsum</p></nav>
 
separator
 
separator
<div role="navigation" aria-label="vegetables">ARIA navigation role with aria-label: corn potatoes carrots</div>
+
<h4 id="food2">Vegetables</h4>
 +
<div aria-labelledby="food2" role="navigation" style="background-color: #e1ecf4;">
 +
<div>ARIA navigation role with aria-labelledby: corn potatoes carrots</div>
 +
<p>lorum ipsum</p></div>
 
<br>
 
<br>
  
<h3>Neutralized landmarks</h3>
+
<h3>Nullified 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>
  
<nav role="presentation">Nav element with ARIA role of presentation</nav>
+
<nav role="presentation">
 +
<div>Nav element with ARIA role of presentation</div>
 +
<p>lorum ipsum</p></nav>
 
separator
 
separator
<nav role="none">Nav element with ARIA role of none</nav>
+
<nav role="none">
 +
<div>Nav element with ARIA role of none</div>
 +
<p>lorum ipsum</p></nav>
 
<br>
 
<br>
 
separator
 
separator

Latest revision as of 02:50, 11 February 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). One takeaway is that when providing accessible names for these landmarks via aria-label, it is neither necessary nor undesirable to include role-referencing words like 'navigation' or 'landmark' or 'region' because screen readers automatically speak those roles. Note that in constructing the examples below, the use of 'separator' text was designed to provide a clean separation between the end of one landmark and the start of another or the end of a second, nested landmark, as I've observed that VoiceOver may only announce one not both markers in such cases.
(Need to test and add results for TalkBack, though they may differ between Firefox and Chrome.)

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 - aria-label

JAWS 18 identifies both examples below by the aria-label text ("fruit" or "vegetables") 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


Labeled landmarks - aria-labelledby

NEWLY ADDED - test and update results below!
JAWS 18 identifies both examples below by the aria-label text ("fruit" or "vegetables") 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-labelledby referenced text followed by "navigation landmark", e.g. "fruit navigation landmark" and "end fruit navigation".

Fruits

separator

Vegetables

ARIA navigation role with aria-labelledby: corn potatoes carrots

lorum ipsum


Nullified 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