Difference between revisions of "MikeS Nav-Landmark"

From Level Access Web Labs
Jump to navigation Jump to search
 
(3 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
<body>
 
<body>
 
<h2>Landmark identification</h2>
 
<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.<br>
+
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>
 
<em>(Need to test and add results for TalkBack, though they may differ between Firefox and Chrome.)</em>
  
Line 11: Line 13:
 
<br><br>
 
<br><br>
  
<nav style="background-color: #e1ecf4;">Nav element with no label
+
<nav style="background-color: #e1ecf4;">
<br>lorum ipsum</nav>
+
<div>Nav element with no label</div>
 +
<p>lorum ipsum</p></nav>
 
separator
 
separator
<div role="navigation" style="background-color: #e1ecf4;">ARIA navigation role with no label
+
<div role="navigation" style="background-color: #e1ecf4;">
<br>lorum ipsum</div>
+
<div>ARIA navigation role with no label</div>
 +
<p>lorum ipsum</p></div>
 
<br>
 
<br>
  
Line 24: Line 28:
 
<br><br>
 
<br><br>
  
<nav aria-label="Fruit" style="background-color: #e1ecf4;">Nav element with aria-label: apples oranges bananas
+
<nav aria-label="Fruit" style="background-color: #e1ecf4;">
<br>lorum ipsum</nav>
+
<div>Nav element with aria-label: apples oranges bananas</div>
 +
<p>lorum ipsum</p></nav>
 
separator
 
separator
<div role="navigation" aria-label="vegetables" style="background-color: #e1ecf4;">ARIA navigation role with aria-label: corn potatoes carrots
+
<div role="navigation" aria-label="vegetables" style="background-color: #e1ecf4;">
<br>lorum ipsum</div>
+
<div>ARIA navigation role with aria-label: corn potatoes carrots</div>
 +
<p>lorum ipsum</p></div>
 
<br>
 
<br>
  
Line 39: Line 45:
  
 
<h4 id="food1">Fruits</h4>
 
<h4 id="food1">Fruits</h4>
<nav aria-labelledby="food1" style="background-color: #e1ecf4;">Nav element with aria-labelledby: apples oranges bananas
+
<nav aria-labelledby="food1" style="background-color: #e1ecf4;">
<br>lorum ipsum</nav>
+
<div>Nav element with aria-labelledby: apples oranges bananas</div>
 +
<p>lorum ipsum</p></nav>
 
separator
 
separator
 
<h4 id="food2">Vegetables</h4>
 
<h4 id="food2">Vegetables</h4>
<div aria-labelledby="food2" role="navigation" style="background-color: #e1ecf4;">ARIA navigation role with aria-labelledby: corn potatoes carrots
+
<div aria-labelledby="food2" role="navigation" style="background-color: #e1ecf4;">
<br>lorum ipsum</div>
+
<div>ARIA navigation role with aria-labelledby: corn potatoes carrots</div>
 +
<p>lorum ipsum</p></div>
 
<br>
 
<br>
  
Line 51: Line 59:
 
<br><br>
 
<br><br>
  
<nav role="presentation">Nav element with ARIA role of presentation
+
<nav role="presentation">
<br>lorum ipsum</nav>
+
<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 role="none">
<br>lorum ipsum</nav>
+
<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