Accessible Name Calculation for img Elements

Although WAI-ARIA attributes fall first in the accessible name calculation for img elements according to the HTML to Platform Accessibility APIs Implementation Guide, it is always best to use the most robust attribute: alt.

1. Use aria-labelledby
2. Otherwise use aria-label
3. Otherwise use alt attribute
4. Otherwise use title attribute
5. If none of the above yield a usable text string there is no accessible name

OS/UA/AT Support

• OS X 10.9.2 + Safari + VoiceOver
• iOS 7 + Mobile Safari + VoiceOver
• Windows 7 + Firefox 28 + NVDA 2013.1
• Windows 7 + Internet Explorer 8 + JAWS 14.0.1832
• Android 4.4.2 + Chrome 34.01847.114 + TalkBack 3.5.1
• Android 4.4.2 + Firefox 29.0.1 + TalkBack 3.5.1

Support Notes

VoiceOver for iOS and OS X allows the user to choose an option to always, never, or only navigate images with descriptions (accessible names). VoiceOver reads the file name of the image with no accessible name by default. NVDA & JAWS does not read the file name of the image with no accessible name at all, the user would not know it is present on the page. On Android in Chrome the image with no name is ignored, in Firefox the image with no name is read as "graphic".

aria-labelledby

Pennybacker Bridge via aria-labelledby

aria-label

alt attribute

title attribute

no accessible name

Example Screenshot of Screen Reader Output on Firefox Android with TalkBack