Comparing Screen Reader Behavior for Aria-label and Title on Text Links

Links used in this test

1. Different title and anchor text: Annual Report 2013   Markup: <a href="#" title="Download PDF">Annual Report 2013</a>
2. Identical title and anchor text: Annual Report 2013   Markup: <a href="#" title="Annual Report 2013">Annual Report 2013</a>
3. Aria-label present besides anchor text: Annual Report 2013   Markup: <a href="#" aria-label="Download PDF">Annual Report 2013</a>
4. Both Aria-label and title present besides anchor text: Annual Report 2013   Markup: <a href="#" aria-label="Download PDF" title="2013- Annual Report">Annual Report 2013</a>

The Comparison

Notes:

• For JAWS, the above behavior is the same in Firefox and Internet Explorer (Windows 7).
• NVDA was tested only with Firefox
• VoiceOver was used with Safari on OSX and iOS
• Default verbosity settings were used for all screen readers. The test links are not indicative of markup to be used for download links for PDF (or other) file types.

Conclusion:

• JAWS 15 provides the best user experience followed by VoiceOver on iOS
• The title attribute is read by VoiceOver on OSX when the user explicitly checks for presence of help text on the element (VO+Shift+h). This is akin to interrogating a link for presence of a title attribute with JAWS (or Window-Eyes)
• NVDA developers are working on providing a better experience when a link contains aria-label as per the thread Regarding the accessible name calculation for aria-label within links?, which in part, motivated this article.

Both aria-label and the title are listed in the text alternative computation algorithm with the title having the lowest preference. The aria-label gains preference even over the anchor text in determining the accessible name for a link. In situations where text that is different from the anchor text needs to be rendered to aid vision impaired users, the aria-label is the better choice. When the link's name (i.e. anchor text or aria-label) needs to be supplemented with advisory text, the title is more suitable. This will reduce the dependence on the CSS off-screen text method for providing such supplemental text to aid non-sighted users. It may be noted that neither aria-label or title is available to keyboard-only users; but the title is exposed as a tooltip when one mouses over the element.

Update:

Results with NVDA 2014 are better now. So the outcome in situations B, C and D above are different:

• NVDA ignores title if it is identical to anchor text
• NVDA reads aria-label and ignores anchor text