On this page:
Provide an alternative text description for images. Make sure the description conveys the same message or functionality.
All non-text content (like images, charts, icons and infographics) must have an appropriate text equivalent.
Images (like logos and icons) that communicate information have short text alternatives that serve the same purpose as the image:
Endeavour to be succinct, and avoid redundant phrasing such as “Picture of …”, “… logo”, or “Select this to …”. Verbose alternatives make content harder to listen to and understand for screen reader users.
The element type or trait, such as image or button, should not be included in the alternative as it is programmatically determined and added by the screen reader. For example:
Images that are purely decorative (meaning that do not convey any information) should be explicitely silenced in code so that they are not read out by screen readers.
Images that are completely redundant (meaning that convey information or functionality that’s already conveyed in text) should be explicitely silenced in code so that they are not read out by screen readers.
This ensures that information conveyed by non-text content is available to people who cannot see it, like screen reader users.
Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose.
Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content.
Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
See the W3C’s detailed explanation of this guideline with techniques and examples.
UIImageView a label:
logoImageView.isAccessibilityElement = true
logoImageView.accessibilityLabel = "Company Name"
UIImageView from screen readers:
decorativeImageView.isAccessibilityElement = false
ImageView a label:
ImageButton, etc. that are non-decorative, must have a contentDescription set. AndroidStudio lint check will remind you with a warning if you skip it. Remember to place your strings in the
res folder, so you can easily change them, translate them, etc.
Alternatively, you could set the contentDescription programatically:
imageView.importantForAccessibility = IMPORTANT_FOR_ACCESSIBILITY_YES //optional, because all views that are focusable are important for accessibility
imageView.contentDescription = getString(R.string.company_name)
ImageView from screen readers
In your XML Layout, set the contentDescription to
This satisfies Android Studio’s lint check by confirming that you are not providing a contentDescription for this view intentionally, rather than forgetting to do so.
Do not add placeholder labels to dismiss lint warnings. If you leave these placeholder labels in your app when you publish it, your users might get confused.
Alternatively, you could hide the view from screen readers programatically:
imageView.importantForAccessibility = IMPORTANT_FOR_ACCESSIBILITY_NO
alt attribute in their source code
svg element doesn’t have an
alt attribute, screen readers will read the file name of the image as it’s name;
alt text should convey the same information
alt text should convey the same functionality
alt="Search" (unless the image is accompanied by a “Search” text node, in which case the image should be silenced to avoid repetition).
<img src="rating.jpg" alt="Rate this article" />
<!-- Don't do this -->
<img src="rating.jpg" alt="Greyed out stars" />
alt="", or be CSS background images, so that they’re ignored by screen readers.
background-image for images unless they’re purely decorative or redundant
background-image for images that convey purpose or information not already available in text. (CSS background images should only used for decorative images).
background-image should not be used to include images that convey important information