Images and graphics

Make visual non-text content accessible in mobile apps.

Overview

What you need to do

All images need text alternatives for people who cannot see the image or who need help understanding it.

Meeting the Web Accessibility Standard

When a meaningful image has a text alternative that serves the equivalent purpose, it meets WCAG 2 Success Criterion 1.1.1 Non-text content (Level A).

When an interactive element made from an image has a descriptive accessible label, it meets WCAG 2 Success Criterion 1.1.1 Non-text content (Level A).

Why this matters

Images without text alternatives fail the most basic accessibility principle: being perceivable by all users. When visual content lacks text alternatives, it becomes unavailable to screen readers and unusable by the 180,000 New Zealanders with severe to moderate functional vision loss.

Images lacking text alternatives also:

make functional images like buttons inoperable for users who can’t see them
create confusing interfaces where users miss critical information
prevents assistive technologies users who rely on text alternatives from accessing the image content.

When this applies

When you need text alternatives

Informative images: Photos, illustrations, infographics, charts that convey information
Functional images: Icons, buttons, logos that users interact with
Complex images: Graphs, diagrams, maps

When you do not need text alternatives

Decorative images: Use an empty or null (“”) text alternative.
Images with nearby text: If identical information is already in text on the screen, ideally right before or after, and programmatically associated with, the image.

Design

Checklist for accessible images and media

Provide text alternatives for all meaningful and interactive images.
Ensure sufficient contrast of meaningful visual elements.
Use real text, not text in images.
If using images with text, include that text in the text alternative.
Ensure text over images is readable.
Avoid distracting motion.
Use high-quality images.

Design resources

The following resources will help you write good text alternatives for the images in your apps:

Best practices for good text alternatives in native mobile apps are basically the same as they are for the web. For more comprehensive, web-oriented guidance on image accessibility, read Web Content Type: Images.

Development

iOS implementation

For technical documentation on adding images, read the following Apple Developer Documentation resources:

Techniques and code examples for creating accessible images that meet WCAG 2 can be found at Success Criterion 1.1.1 Non-text Content — Appt.

For complete guides on iOS accessibility from Apple Developer Documentation, read:

Android implementation

For technical documentation on adding images, read Add images to your Android App — Android Developers.

Techniques and code examples for creating accessible images that meet WCAG 2 can be found at Success Criterion 1.1.1 Non-text Content — Appt.

For a complete guide on Android app accessibility, see Make apps more accessible — Android Developers.

Testing

Quick test

These quick steps will help you check if your images are understandable and accessible.

Turn on your device’s screen reader (VoiceOver on iOS, TalkBack on Android).
Check meaningful images — do they have helpful text alternatives?
Check decorative images — are they being skipped?
Check linked or interactive images — do they have text alternatives that are clear about where they go or what they do.
Check media (like video or audio) — do they have captions, transcripts, and audio descriptions?

Automated testing

Use the platform accessibility testing tools to check the text alternatives associated with each image:

iOS — Accessibillity Inspector — Apple Developer Documentation
Android — Accessibility Scanner — Android Accessibility Help
Android — axe Accessibility Analyzer — Deque Systems — Google Play.

Testing resources:

The most practical way to test the accessibility of images in your app is to use the built-in screen reader.

How to test with VoiceOver on iOS

How to test with TalkBack on Android

Learn more

Platform guidance

Refer to the following official design and development guidance for creating images on each platform:

iOS — Images — Human Interface Guidelines — Apple Developer Documentation
Android — Images and graphics — Mobile — Android Developers

Other guides and best practices

Refer to the following guides and best practices for image accessibility in different contexts: