Anchor with role=presentation SamC

From Level Access Web Labs
Jump to navigation Jump to search

Test Page Rationale

This page can be used to test how role="presentation" and other attributes (such as tabindex=-1, aria-hidden, and aria-disabled) change the way screen readers render an anchor <a> element. Rationale behind this test case was to determine whether role=presentation can effectively suppress the element's role from the screen reader so that it will only render the inner text content.

Anchor element with href and tabindex="-1"

This is region 1


Code snippet:

<syntaxhighlight lang="html4strict">

This is region 1

 <a tabindex="-1" href="#region1">
   
   <img alt="" src="carousel_dot_active.png">
 </a>

</syntaxhighlight>


Test Results

When browsing in screen reader (browse/read) mode:

  • JAWS 18 (IE 11) reads the anchor element as "same page link item 1 of 5 dash you are here".
  • JAWS 17 (IE 11) reads the anchor element as "same page link item 1 of 5 dash you are here".
  • JAWS 18 (Chrome 58) reads the anchor element as "same page link item 1 of 5 dash you are here".
  • JAWS 17 (Chrome 58) reads the anchor element as "same page link item 1 of 5 dash you are here".
  • NVDA 2017.2 (FF 53) reads the anchor element as "link item 1 of 5 you are here"
  • VoiceOver (iOS 10.3.2) reads the anchor element as "item 1 of 5 you are here link".
  • TalkBack (5.2 in Chrome 58 in OS 6.0.1) reads the anchor element as "item 1 of 5 you are here link"
  • TalkBack (5.2 in Firefox 53 in OS 6.0.1) reads the anchor element as "item 1 of 5 you are here graphic link"

Anchor element with href and role="presentation" and tabindex="-1"

This is region 2


Code snippet:

<syntaxhighlight lang="html4strict">

This is region 2

 <a tabindex="-1" role="presentation" href="#region2">
   
   <img alt="" src="carousel_dot_active.png">
 </a>

</syntaxhighlight>


Test Results

When browsing in screen reader (browse/read) mode:

  • JAWS 18 (IE 11) reads the anchor element as "same page link item 2 of 5 dash you are here".
    • Adding role of presentation did NOT nullify the link role in JAWS 18 as it did in JAWS 17 - is this a bug in 18, then?
  • JAWS 17 (IE 11) reads the anchor element as "item 2 of 5 dash you are here". (Note: Only using JAWS 17 in IE will role="presentation" suppress the element's role information.)
  • JAWS 18 (Chrome 58) reads the anchor element as "same page link item 2 of 5 dash you are here".
  • JAWS 17 (Chrome 58) reads the anchor element as "item 2 of 5 dash you are here clickable".
  • NVDA 2017.2 (FF 53) reads the anchor element as "item 2 of 5 you are here"
  • VoiceOver (iOS 10.3.2) read the anchor element as "item 2 of 5 you are here link".
    • Adding role of presentation did NOT nullify the link role in VoiceOver. Is this a reportable or known case of insufficient ARIA support?
  • TalkBack (5.2 in Chrome 58 in OS 6.0.1) reads the anchor element as "item 2 of 5 you are here link"
    • Again, adding role of presentation did NOT nullify the link role in TalkBack.
  • TalkBack (5.2 in Firefox 53 in OS 6.0.1) reads the anchor element as "item 1 of 5 you are here graphic link"
    • Again, adding role of presentation did NOT nullify the link role in TalkBack.

Anchor element with role="presentation" and tabindex="-1" but no href

NOTE: with no href attribute, the anchor tag will NOT be considered a link by ATs or browsers, so it is not necessary to add role of presentation or tabindex of -1 at all. Recommend deleting this scenario from this test page, or perhaps re-purposing it as a control subject just to show that anchor tags without hrefs are not links at all.

This is region 3


Code snippet:

<syntaxhighlight lang="html4strict">

This is region 3

 <a tabindex="-1" role="presentation">
   
   <img alt="" src="carousel_dot_active.png">
 </a>

</syntaxhighlight>


Test Results

When browsing in screen reader (browse/read) mode:

  • JAWS 18 (IE 11) reads the anchor element as "item 3 of 5 dash you are here".
  • JAWS 17 (IE 11) reads the anchor element as "item 3 of 5 dash you are here".
  • JAWS 18 (Chrome 58) reads the anchor element as "item 3 of 5 dash you are here clickable".
  • JAWS 17 (Chrome 58) reads the anchor element as "item 3 of 5 dash you are here clickable".
  • VoiceOver (iOS 10.2.1) reads the anchor element as "item 3 of 5 you are here".

Anchor element with aria-hidden="true" and tabindex="-1"

This is region 4


Code snippet:

<syntaxhighlight lang="html4strict">

This is region 4

 <a href="#region4" aria-hidden="true" tabindex="-1">
   
   <img alt="" src="carousel_dot_active.png">
 </a>

</syntaxhighlight>


Test Results

NOTE: confirm test results in JAWS after having added tabindex="-1" to the anchor (should be identical but just to be sure...) When browsing in screen reader (browse/read) mode:

  • JAWS 18 (IE 11) does not read the anchor element.
  • JAWS 17 (IE 11) does not read the anchor element.
  • JAWS 18 (Chrome 58) does not read the anchor element.
  • JAWS 17 (Chrome 58) does not read the anchor element.
  • NVDA 2017.2 (FF 53) does not read the anchor element.
  • VoiceOver (iOS 10.3.2) does not read the anchor element.
  • TalkBack (5.2 in Chrome 58 in OS 6.0.1) does not read the anchor element.
  • TalkBack (5.2 in Firefox 53 in OS 6.0.1) does not read the anchor element.

Anchor element with aria-disabled="true" and role="presentation" and tabindex="-1"

This is region 5


Code snippet:

<syntaxhighlight lang="html4strict">

This is region 5

 <a href="#region5" aria-disabled="true" tabindex="-1" role="presentation">
   
   <img alt="" src="carousel_dot_active.png">
 </a>

</syntaxhighlight>


Test Results

NOTE: need to update some of the testing results below after having added role="presentation to the use of aria-disabled.
When browsing in screen reader (browse/read) mode:

  • JAWS 18 (IE 11) reads the anchor element as "same page link unavailable item 5 of 5 dash you are here".
    • By design, JAWS says 'unavailable' for disabled controls like this. Given the problem from the test case above where adding role of presentation does NOT nullify the link role, adding aria-disabled true may be better for now, as the link is at least announced as unavailable/disabled.
  • JAWS 17 (IE 11) reads the anchor element as "item 5 of 5 dash you are here".
    • Here, role="presentation" causes the anchor to be announced as static content, despite aria-disabled. So including both attributes may be the best option.
  • JAWS 18 (Chrome 58) reads the anchor element as "item 5 of 5 dash you are here unavailable clickable".
  • JAWS 17 (Chrome 58) reads the anchor element as "item 5 of 5 dash you are here clickable".
  • NVDA 2017.2 (FF 53) reads the anchor element as "unavailable link item 5 of 5 you are here"
  • VoiceOver (iOS 10.3.2) reads the anchor element as "item 5 of 5 you are here dimmed link".
  • TalkBack (Chrome 58 in OS 6.0.1) reads the anchor element as "item 5 of 5 you are here link disabled"
  • TalkBack (Firefox 53 in OS 6.0.1) reads the anchor element as "item 5 of 5 you are here graphic unavailable link"