Difference between revisions of "MikeS aria-label"

From Level Access Web Labs
Jump to navigation Jump to search
 
Line 2: Line 2:
 
<body>
 
<body>
  
<h3>aria-label variants</h3>
+
<h2>aria-label variants</h2>
  
 
<a aria-label="this image link has aria-label and enclosed image has alt text that is different. this is the aria-label." href="#">
 
<a aria-label="this image link has aria-label and enclosed image has alt text that is different. this is the aria-label." href="#">
Line 16: Line 16:
 
<a href="#"><img alt="standard image link as control. there is no aria-label. this is the image alt text" src="https://www.levelaccess.com/wp-content/uploads/2017/04/logo.png"></a>
 
<a href="#"><img alt="standard image link as control. there is no aria-label. this is the image alt text" src="https://www.levelaccess.com/wp-content/uploads/2017/04/logo.png"></a>
  
<h3>Testing results</h3>
+
<h2>Testing results</h2>
JAWS 2018: For image links, JAWS reads the aria-label of the link tag if you Tab to it. But it reads the enclosed image alt text instead of the aria-label if you arrow to the link. For text links or image links with null alt text, JAWS reads the aria-label whether you Tab OR arrow to it.
+
<ul>
<br>
+
<li>JAWS 2018: For image links, JAWS reads the aria-label of the link tag if you Tab to it. But it reads the enclosed image alt text instead of the aria-label if you arrow to the link. For text links or image links with null alt text, JAWS reads the aria-label whether you Tab OR arrow to it.</li>
VoiceOver 11.4.1:  reads the aria-label when it is available, overriding either inner text or enclosed image alt text.
+
<li>VoiceOver 11.4.1:  reads the aria-label when it is available, overriding either inner text or enclosed image alt text.
<br>
+
</li>
TalkBack  
+
<li>TalkBack  
<br>
+
</li>
NVDA 2018.x
+
<li>NVDA 2018.x
 
+
</li>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 00:01, 19 October 2018

aria-label variants

this is image alt text being read despite the aria-label in the link tag

Olallieberry



Standard text link as control

standard image link as control. there is no aria-label. this is the image alt text

Testing results

  • JAWS 2018: For image links, JAWS reads the aria-label of the link tag if you Tab to it. But it reads the enclosed image alt text instead of the aria-label if you arrow to the link. For text links or image links with null alt text, JAWS reads the aria-label whether you Tab OR arrow to it.
  • VoiceOver 11.4.1: reads the aria-label when it is available, overriding either inner text or enclosed image alt text.
  • TalkBack
  • NVDA 2018.x