Non-text Content
Non-text content includes any content that is not plain text, such as images, videos, audio clips, and graphical elements. In the context of accessibility, non-text content must have equivalent text alternatives that convey the same information or function. This ensures all users, including those with visual, auditory, or cognitive impairments, can access and understand the content. Proper labeling of non-text content is important for app accessibility, making content more inclusive and usable for everyone.
- Rule Category :
Accessibility Labels
- WCAG 2.1 SC :
1.1.1 (A)
- WCAG 2.2 SC :
1.1.1 (A)
- Rule Severity :
Serious
- Supported Platforms :
Android
,iOS
ImageView element accessibility label
An accessibility label is an attribute assigned to ImageView
or ImageButton
elements that convey information graphically. This label gives a textual description of the graphic, making it accessible to users relying on screen readers.
Using app accessibility testing, you can identify ImageView
elements that lack proper accessibility labels.
Success criteria
The rule checks for the following potential violations:
For Android:
- Non-decorative image (
ImageView
orImageButton
) elements that convey meaningful information lackcontentDescription
.
For iOS:
- Non-decorative image (
ImageView
orImageButton
) elements that convey meaningful information lackaccessibilityLabel
.
How to fix?
To prevent ImageView
element accessibility label violations, ensure every ImageView
or ImageButton
that conveys meaningful information includes a clear description using the contentDescription
(Android) or accessibilityLabel
(iOS) property. This description should articulate the visual content and purpose.
Example
The following example scan report highlights an informative ImageView
element is present at the bottom right corner of the screen without an appropriate accessibility label. It is indicated by contentDescription: ""
. The ImageView
, represented by an icon, is used to convey meaningful information (in this case, it might be a shortcut to access the gallery or perform a specific action). However, as it lacks a descriptive label, screen readers will not be able to narrate the context of this image, making it inaccessible to users with visually difficulties.
Fix
- For Android:
Add acontentDescription
property to theImageView
element that clearly describes its purpose. For example, if theImageView
is a button to open the gallery, thecontentDescription
should be something likeOpen Gallery
.
- For iOS:
Add anaccessibilityLabel
property to theImageView
element that clearly describes its purpose. For example, if theImageView
is a button to open the gallery, theaccessibilityLabel
should be something likeOpen Gallery
.
Reference
- Learn more about Non-text Content WCAG: 2.1 - 1.1.1 (Level A) guideline.
- Learn more about Non-text Content WCAG: 2.2 - 1.1.1 (Level A) guideline.
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!