All mobile applications have similar accessibility requirements. The technical methods for how you achieve these requirements depend on the framework you are using.
Accessible mobile app resources
-
Include text alternatives for images
When you add images in a mobile app, add a text description of the images–commonly called alt text. An app framework that supports accessibility will have ways to add image descriptions that are invisible to the eye but used by assistive technology, such as screen readers.
Decorative images that do not convey any meaning should instead be coded as decorative, so they will be ignored by assistive technology.
-
Measure color contrast
For meaningful elements like text and graphics, use colors that have high contrast against their background.
Use a tool to measure color contrast if you are unsure. These tools compare the foreground color against the background color. Many design software programs have built-in contrast checkers. You can also use browser extensions or downloadable tools designed to measure color contrast.
Color contrast minimums:
- Text: 4.5:1
- Icons and graphics: 3:1
Use tools, such as the WebAIM contrast checker, to evaluate color contrast ratios.
-
Organize information with headings
Group sections of text using headings. Headings help organize information whether a user is reading the content visually or using assistive technology.
-
Write in plain language
Write mobile app content in plain language to ensure your message is clear to all users.
-
Write descriptive labels
Interactive elements must have a clear name so users can predict what they will do.
This name must be visible in the design and also communicated in the code. Visual labels can include text or widely recognized icons, such as a magnifying glass icon that labels a search field.
Non-visible labels are provided in the code and must always use descriptive text that is available to assistive technology. If an element has a visible text label, the name in the code must match it exactly.
Example of matching visible and code labels
In the code for a Search button below, the aria-label matches the visible button text.
<button type="button" aria-label="Search">Search</button> -
Build for keyboard navigation
Any app functions that can be completed by touch must also be operable with only a keyboard.
That means users must be able to focus on interactive elements and activate them using a keyboard alone.
Keyboard navigation is critical for mobile app users with external keyboards or other assistive tools.
-
Communicate interactive roles
Every interactive element in an app performs a specific job, and you communicate that job in the code by assigning the element a role. Users who rely on assistive technologies can better understand and interact with elements when each one has a clear and correct role.
Common interactive roles include button, link, switch, checkbox, radio button, tab, text field, and more.
The right role depends on the element’s function, not just its visual design. If the element looks like a link, but acts like a button, it should have the button role.
User story: Labels
Aliyah is trying a new mobile app to keep a food journal ahead of her next medical appointment. To record a new day, the app has a button with visible text “New Day.” Aliyah has limited motor control in her hands, so she uses voice control to interact with her phone. She vocally instructs the phone to activate the “New Day” button, but nothing happens.
Even though the button visually displays “New Day,” the accessible name in the code is actually “Add.” Because the code label does not match the visible text, the voice control technology cannot locate the button based on Aliyah’s verbal instruction. Aliyah can work around this issue, but it’s slower and more frustrating.
Remove the barrier: All buttons in the app are updated so the visible text label matches the name in the code. When the button is labeled “New Day” both visually and in the code, Aliyah’s voice command works as expected. Matching names allows her to complete tasks quickly and independently.