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

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".


Pennybacker Bridge via aria-labelledby


alt attribute

Pennybacker Bridge via alt attribute

title attribute

no accessible name

Example Screenshot of Screen Reader Output on Firefox Android with TalkBack

TalkBack reads "Pennybacker Bridge via title attribute graphic"