Difference between revisions of "MikeS Nav-Landmark"

From Level Access Web Labs
Jump to navigation Jump to search
Line 12: Line 12:
  
 
<nav style="background-color: #e1ecf4;">Nav element with no label
 
<nav style="background-color: #e1ecf4;">Nav element with no label
<br>lorum ipsum</nav>
+
<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;">ARIA navigation role with no label

Revision as of 01:52, 10 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.
(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