aria-hidden tests

W3C WAI-ARIA Spec Language:

Indicates that the element and all of its descendants are not visible or perceivable to any user* as implemented by the author.
Expected Behavior:
The following linked images should not be percievable by any user-agent that uses Accessibility APIs.
* Comment:
The spec language could/should be clarrified here to underscore the fact that it is not "any" user, but rather any user accessing the Accessibility API, as clearly the following examples are both visible and perceivable to sighted users.

Test 1: aria-hidden="true" on anchor element (with <img alt="">)

Tim Berners-Lee Takes the Stand to Keep the Web Free

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi est, ultricies id consequat vel, suscipit vitae sapien.

<a href="tbl.html" aria-hidden="true">
  <img src="tim_th.jpg" class="thumb" alt="">
</a>
<h3><a href="tbl.html">Tim Berners-Lee Takes the Stand to Keep the 
                       Web Free</a>
</h3>

Results for Test 1:

Firefox 10.0.1

JAWs 13

Announces "Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Link, graphic, T B L || Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

Internet Explorer 9

JAWs 13

Announces "Link, graphic, aria dash hidden, tim underline T H || Link, Heading Level 3: Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Link, graphic, T B L || Heading Level 3: Tim Berners-Lee Takes the Stand to Keep the Web Free"

Internet Explorer 8 (Windows XP)

JAWs 13

Announces "Link, graphic, aria dash hidden, tim underline T H || Link, Heading Level 3: Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Link, graphic, T B L || Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

Chrome

JAWs 13

Announces "Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Link, Heading Level 3, Tim Berners-Lee Takes the Stand to Keep the Web Free"

ChromeVox

Announces "[Link earcon], Heading Level 3: Tim Berners-Lee Takes the Stand to Keep the Web Free, Link"

Safari

VoiceOver

Announces "Tim Berners-Lee Takes the Stand to Keep the Web Free, Heading Level 3, Link"

Return to Menu

Test 2: aria-hidden="true" on both anchor element and image (with <img alt="">)

Tim Berners-Lee Takes the Stand to Keep the Web Free

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi est, ultricies id consequat vel, suscipit vitae sapien.

<a href="tbl.html" aria-hidden="true">
  <img src="tim_th.jpg" class="thumb" aria-hidden="true" alt="">
</a>
<h3><a href="tbl.html">Tim Berners-Lee Takes the Stand to Keep the 
                       Web Free</a>
</h3>

Results for Test 2:

Firefox 10.0.1

JAWs 13

Announces "Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Link, graphic, T B L || Heading Level 3: Tim Berners-Lee Takes the Stand to Keep the Web Free"

Internet Explorer 9

JAWs 13

Announces "Link, graphic, aria dash hidden, tim underline T H || Link, Heading Level 3: Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Link, graphic, T B L || Heading Level 3: Tim Berners-Lee Takes the Stand to Keep the Web Free"

Internet Explorer 8 (Windows XP)

JAWs 13

Announces "Link, graphic, aria dash hidden, tim underline T H || Link, Heading Level 3: Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Link, graphic, T B L || Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

Chrome

JAWs 13

Announces "Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Link Heading Level 3: Tim Berners-Lee Takes the Stand to Keep the Web Free"

ChromeVox

Announces "[Link earcon], Heading Level 3: Tim Berners-Lee Takes the Stand to Keep the Web Free, Link"

Safari

VoiceOver

Announces "Tim Berners-Lee Takes the Stand to Keep the Web Free, Heading Level 3, Link"

Return to Menu

Test 3: aria-hidden="true" on anchor element (with <img alt="Tim Berners-Lee Takes the Stand to Keep the Web Free">)

Tim Berners-Lee Takes the Stand to Keep the Web Free

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi est, ultricies id consequat vel, suscipit vitae sapien.

<a href="tbl.html" aria-hidden="true">
  <img src="tim_th.jpg" class="thumb" 
       alt="Tim Berners-Lee Takes the Stand to Keep the Web Free">
</a>
<h3><a href="tbl.html">Tim Berners-Lee Takes the Stand to Keep the 
                       Web Free</a>
</h3>

Results for Test 3:

Firefox 10.0.1

JAWs 13

Announces "Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Link, graphic, Tim Berners-Lee Takes the Stand to Keep the Web Free || Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

Internet Explorer 9

JAWs 13

Announces "Link, Heading Level 3, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Link, graphic, Tim Berners-Lee Takes the Stand to Keep the Web Free || Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

Internet Explorer 8 (Windows XP)

JAWs 13

Announces "Link, Heading Level 3, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Link, graphic, Tim Berners-Lee Takes the Stand to Keep the Web Free || Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

Chrome

JAWs 13

Announces "Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Link Heading Level 3: Tim Berners-Lee Takes the Stand to Keep the Web Free"

ChromeVox

Announces "[Link earcon], Heading Level 3: Tim Berners-Lee Takes the Stand to Keep the Web Free, Link"

Safari

VoiceOver

Announces "Tim Berners-Lee Takes the Stand to Keep the Web Free, Heading Level 3, Link"

Return to Menu

Test 4: aria-hidden="true" on both anchor element and image (with <img alt="Tim Berners-Lee Takes the Stand to Keep the Web Free">)

Tim Berners-Lee Takes the Stand to Keep the Web Free

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi est, ultricies id consequat vel, suscipit vitae sapien.

<a href="tbl.html" aria-hidden="true">
  <img src="tim_th.jpg" class="thumb" aria-hidden="true" 
       alt="Tim Berners-Lee Takes the Stand to Keep the Web Free">
</a>
<h3><a href="tbl.html">Tim Berners-Lee Takes the Stand to Keep the 
                       Web Free</a>
</h3>

Results for Test 4:

Firefox 10.0.1

JAWs 13

Announces "Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Link, graphic, Tim Berners-Lee Takes the Stand to Keep the Web Free || Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

Internet Explorer 9

JAWs 13

Announces "Link, Heading Level 3, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Link, graphic, Tim Berners-Lee Takes the Stand to Keep the Web Free || Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

Internet Explorer 8 (Windows XP)

JAWs 13

Announces "Link, Heading Level 3, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Link, graphic, Tim Berners-Lee Takes the Stand to Keep the Web Free || Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

Chrome

JAWs 13

Announces "Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Link Heading Level 3: Tim Berners-Lee Takes the Stand to Keep the Web Free"

ChromeVox

Announces "[Link earcon], Heading Level 3: Tim Berners-Lee Takes the Stand to Keep the Web Free, Link"

Safari

VoiceOver

Announces "Tim Berners-Lee Takes the Stand to Keep the Web Free, Heading Level 3, Link"

Return to Menu


role="presentation" tests

W3C WAI-ARIA Spec Language:

An element whose implicit native role semantics will not be mapped to the accessibility API. The intended use is when an element is used to change the look of the page but does not have all the functional, interactive, or structural relevance implied by the element type.
Expected Behavior:
Neither the image or its parent container, the link, should retain its native function: the link should not be linking, and the image and alt text should be ignored by the Accessibility APIs.

Test 5: role="presentation" on anchor element (with <img alt="">)

Tim Berners-Lee Takes the Stand to Keep the Web Free

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi est, ultricies id consequat vel, suscipit vitae sapien.

<a href="tbl.html" role="presentation">
  <img src="tim_th.jpg" class="thumb" alt="">
</a>
<h3><a href="tbl.html">Tim Berners-Lee Takes the Stand to Keep the 
                       Web Free</a>
</h3>

Results for Test 5:

Firefox 10.0.1

JAWs 13

Announces "Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Link, graphic, T B L || Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

Internet Explorer 9

JAWs 13

Announces "Link, Heading Level 3, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "T B L || Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

Internet Explorer 8 (Windows XP)

JAWs 13

Announces "Link, Heading Level 3, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Annonces "T B L || Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

Chrome

JAWs 13

Announces "Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Link Heading Level 3: Tim Berners-Lee Takes the Stand to Keep the Web Free""

ChromeVox

Focus on image element with [Link earcon]; Announces "Heading Level 3: Tim Berners-Lee Takes the Stand to Keep the Web Free, Link"

Safari

VoiceOver

Announces "Tim Berners-Lee Takes the Stand to Keep the Web Free, Heading Level 3, Link"

Return to Menu

Test 6: role="presentation" on both anchor element and image (with <img alt="">)

Tim Berners-Lee Takes the Stand to Keep the Web Free

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi est, ultricies id consequat vel, suscipit vitae sapien.

<a href="tbl.html" role="presentation">
  <img src="tim_th.jpg" class="thumb" role="presentation" alt="">
</a>
<h3><a href="tbl.html">Tim Berners-Lee Takes the Stand to Keep the 
                       Web Free</a>
</h3>

Results for Test 6:

Firefox 10.0.1

JAWs 13

Announces "Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Heading Level 3: Tim Berners-Lee Takes the Stand to Keep the Web Free"

Internet Explorer 9

JAWs 13

Announces "Link, Heading Level 3, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "T B L || Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

Internet Explorer 8 (Windows XP)

JAWs 13

Announces "Link, Heading Level 3, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Annonces "T B L || Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

Chrome

JAWs 13

Announces "Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Link Heading Level 3: Tim Berners-Lee Takes the Stand to Keep the Web Free"

ChromeVox

Focus on image element with [Link earcon]; Announces "Heading Level 3: Tim Berners-Lee Takes the Stand to Keep the Web Free, Link"

Safari

VoiceOver

Announces "Tim Berners-Lee Takes the Stand to Keep the Web Free, Heading Level 3, Link"

Return to Menu

Test 7: role="presentation" on anchor element (with <img alt="Tim Berners-Lee Takes the Stand to Keep the Web Free">)

Tim Berners-Lee Takes the Stand to Keep the Web Free

Tim Berners-Lee Takes the Stand to Keep the Web Free

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi est, ultricies id consequat vel, suscipit vitae sapien.

<a href="tbl.html" role="presentation">
  <img src="tim_th.jpg" class="thumb" 
       alt="Tim Berners-Lee Takes the Stand to Keep the Web Free">
</a>
<h3><a href="tbl.html">Tim Berners-Lee Takes the Stand to Keep the 
                       Web Free</a>
</h3>

Results for Test 7:

Firefox 10.0.1

JAWs 13

Announces "Graphic, Tim Berners-Lee Takes the Stand to Keep the Web Free; Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NOTE: while marked as Fail (for the use-case), this is indeed correct behavior for this code pattern, as the role="presentation" is only on the anchor element and not the image element - there is no inheritance

NVDA 2011.2

Announces "Link, graphic, Tim Berners-Lee Takes the Stand to Keep the Web Free || Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

Internet Explorer 9

JAWs 13

Announces "Graphic, Tim Berners-Lee Takes the Stand to Keep the Web Free || Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NOTE: while marked as Fail (for the use-case), this is indeed correct behavior for this code pattern, as the role="presentation" is only on the anchor element and not the image element - there is no inheritance

NVDA 2011.2

Announces "Graphic: Tim Berners-Lee Takes the Stand to Keep the Web Free || Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

Internet Explorer 8 (Windows XP)

JAWs 13

Announces "Graphic, Tim Berners-Lee Takes the Stand to Keep the Web Free || Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NOTE: while marked as Fail (for the use-case), this is indeed correct behavior for this code pattern, as the role="presentation" is only on the anchor element and not the image element - there is no inheritance

NVDA 2011.2

Annonces "Graphic, Tim Berners-Lee Takes the Stand to Keep the Web Free || Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NOTE: while marked as Fail (for the use-case), this is indeed correct behavior for this code pattern, as the role="presentation" is only on the anchor element and not the image element - there is no inheritance

Chrome

JAWs 13

Announces "Graphic: Tim Berners-Lee Takes the Stand to Keep the Web Free || Link, Heading Level 3, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NOTE: while marked as Fail (for the use-case), this is indeed correct behavior for this code pattern, as the role="presentation" is only on the anchor element and not the image element - there is no inheritance

NVDA 2011.2

Announces "Graphic: Tim Berners-Lee Takes the Stand to Keep the Web Free || Link, Heading Level 3, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NOTE: while marked as Fail (for the use-case), this is indeed correct behavior for this code pattern, as the role="presentation" is only on the anchor element and not the image element - there is no inheritance

ChromeVox

Focus on image element with [Link earcon], announces "Tim Berners-Lee Takes the Stand to Keep the Web Free, Link"; Announces "Heading Level 3: Tim Berners-Lee Takes the Stand to Keep the Web Free, Link"

Safari

VoiceOver

Announces "Tim Berners-Lee Takes the Stand to Keep the Web Free, Image || Tim Berners-Lee Takes the Stand to Keep the Web Free, Heading Level 3, Link"

NOTE: while marked as Fail (for the use-case), this is indeed correct behavior for this code pattern, as the role="presentation" is only on the anchor element and not the image element - there is no inheritance

Return to Menu

Test 8: role="presentation" on both anchor element and image (with <img alt="Tim Berners-Lee Takes the Stand to Keep the Web Free">)

Tim Berners-Lee Takes the Stand to Keep the Web Free

Tim Berners-Lee Takes the Stand to Keep the Web Free

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi est, ultricies id consequat vel, suscipit vitae sapien.

<a href="tbl.html" role="presentation">
  <img src="tim_th.jpg" class="thumb" role="presentation" 
       alt="Tim Berners-Lee Takes the Stand to Keep the Web Free">
</a>
<h3><a href="tbl.html">Tim Berners-Lee Takes the Stand to Keep the 
                       Web Free</a>
</h3>

Results for Test 8:

Firefox 10.0.1

JAWs 13

Announces "Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Heading Level 3: Tim Berners-Lee Takes the Stand to Keep the Web Free"

Internet Explorer 9

JAWs 13

Announces "Link, Heading Level 3, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Graphic: Tim Berners-Lee Takes the Stand to Keep the Web Free || Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

Internet Explorer 8 (Windows XP)

JAWs 13

Announces "Link, Heading Level 3, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Graphic: Tim Berners-Lee Takes the Stand to Keep the Web Free || Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

Chrome

JAWs 13

Announces "Heading Level 3, Link, Tim Berners-Lee Takes the Stand to Keep the Web Free"

NVDA 2011.2

Announces "Link Heading Level 3: Tim Berners-Lee Takes the Stand to Keep the Web Free"

ChromeVox

Focus on image element with [Link earcon], announces "Tim Berners-Lee Takes the Stand to Keep the Web Free, Link"; Announces "Heading Level 3: Tim Berners-Lee Takes the Stand to Keep the Web Free, Link"

Safari

VoiceOver

Announces "Tim Berners-Lee Takes the Stand to Keep the Web Free, Heading Level 3, Link"

Return to Menu


Solving the use-case

Based on the previous tests, it seems that a combination of Test 3 and Test 6 will achieve the best result:

Test 9: aria-hidden="true on anchor element + "role="presentation" on both anchor and image elements (with <img alt="Tim Berners-Lee Takes the Stand to Keep the Web Free">)

Tim Berners-Lee Takes the Stand to Keep the Web Free

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi est, ultricies id consequat vel, suscipit vitae sapien.

<a href="tbl.html" aria-hidden="true" role="presentation">
  <img src="tim_th.jpg" class="thumb" 
       alt="Tim Berners-Lee Takes the Stand to Keep the Web Free
	   role="presentation"">
</a>
<h3><a href="tbl.html">Tim Berners-Lee Takes the Stand to Keep the 
                       Web Free</a>
</h3>

Results for Test 9:

Firefox 10.0.1

JAWs 13

NVDA 2011.2

Internet Explorer 9

JAWs 13

NVDA 2011.2

Internet Explorer 8 (Windows XP)

JAWs 13

NVDA 2011.2

Chrome

JAWs 13

NVDA 2011.2

ChromeVox

Safari

VoiceOver

Announces "Tim Berners-Lee Takes the Stand to Keep the Web Free, Heading Level 3, Link"

Return to Menu

Test 10: aria-hidden="true" & tabindex="-1" on anchor element + "role="presentation" on both anchor and image elements (with <img alt="Tim Berners-Lee Takes the Stand to Keep the Web Free">)

Tim Berners-Lee Takes the Stand to Keep the Web Free

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi est, ultricies id consequat vel, suscipit vitae sapien.

<a href="tbl.html" aria-hidden="true" role="presentation" tabindex="-1">
  <img src="tim_th.jpg" class="thumb" 
       alt="Tim Berners-Lee Takes the Stand to Keep the Web Free
	   role="presentation"">
</a>
<h3><a href="tbl.html">Tim Berners-Lee Takes the Stand to Keep the 
                       Web Free</a>
</h3>

Results for Test 10:

Firefox 10.0.1

JAWs 13

NVDA 2011.2

Internet Explorer 9

JAWs 13

NVDA 2011.2

Internet Explorer 8 (Windows XP)

JAWs 13

NVDA 2011.2

Chrome

JAWs 13

NVDA 2011.2

ChromeVox

Safari

VoiceOver

Return to Menu