Mobile applications used or created at U-M are required to meet digital accessibility standards and provide equitable access for people with disabilities.
Use the table below as a reference for WCAG 2.1 AA requirements that usually apply to mobile apps, and how to meet them.
| Area |
Requirement |
| Color |
- Color contrast must comply with WCAG 2.1 AA level requirements:
- Text less than 18 point or 14 point bold: contrast ratio of 4.5:1
- Text at least 18 point or 14 point bold: contrast ratio of 3:1
- Control elements and images of text: contrast ratio of 3:1
- Information conveyed via color must be available by other means too.
|
| Visibility |
- Content hiding techniques such as zero opacity, z-index order and off-screen placement must not be used exclusively to handle visibility.
- Everything other than the currently visible screen must be truly invisible (especially relevant for single page apps with multiple cards):
- Use the hidden attribute or visibility or display style properties.
- Unless absolutely unavoidable, aria-hidden attribute should not be used.
|
| Focus |
- All activatable elements must be focusable.
- Standard controls such as links, buttons, and form fields are focusable by default.
- Non-standard controls must have an appropriate ARIA role (such as button, link, or checkbox) assigned to them.
- Focus should be handled in a logical order and consistent manner.
|
| Text Equivalents |
- A text equivalent must be provided for every non-strictly presentational non-text element within the app.
- Use alt and title where appropriate (see Steve Faulkner's post about Using the HTML title attribute for a good guide.)
- If the above attributes are not applicable, use appropriate ARIA properties such as aria-label, aria-labelledby, or aria-describedby.
- Images of text must be avoided.
|
| Form Controls |
- All form controls must have labels ( elements) for the benefit of screen reader users.
|
| State |
- Standard controls such as radio buttons and checkboxes are handled by the operating system. However, for other custom controls state changes must be provided via ARIA states (such as aria-checked, aria-disabled, aria-selected, aria-expanded, and aria-pressed).
|
| Other |
- An app title must be provided.
- Headings must not break hierarchical structure.
- ARIA landmark roles (such as banner, complementary, contentinfo, main, navigation, search) should be used to describe an app or document structure.
- Touch event handlers must only be triggered on the touched event.
- Touch targets must be large enough for the user to interact with (see the BBC Mobile Accessibility Guidelines for useful touch target size guidelines.)
|
