This document provides a concise checklist of accessibility requirements for mobile app developers. It is intended to continuously evolve as more patterns arise.
Colour
- Colour contrast MUST comply with WCAG 2.0 AA level requirements:
- Contrast ratio of 4.5:1 for normal text (less than 18 point or 14 point bold.)
- Contrast ratio of 3:1 for large text (at least 18 point or 14 point bold.)
- Information conveyed via colour MUST be also available by other means too (underlined text for links, etc.)
Note: Jon Snook has written a useful Colour Contrast Checker that is useful for checking contrast.
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 orvisibility
ordisplay
style properties. - Unless absolutely unavoidable,
aria-hidden
attribute SHOULD NOT be used.
- USE the
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 assigned to them, such as
button
,link
, orcheckbox
.
- Focus should be handled in a logical order and consistent manner.
Text Equivalents
- 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
, oraria-describedby
.
- Images of text MUST be avoided.
- All form controls MUST have labels ({{ htmlelement("label") }} elements) for the benefit of screen reader users.
Handling 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
, andaria-pressed
.
General Guidelines
- An app title MUST be provided.
- Headings MUST not break hierarchical structure
<h1>Top level heading</h1> <h2>Secondary heading</h2> <h2>Another secondary heading</h2> <h3>Low level heading</h3>
- ARIA Landmark Roles SHOULD be used to describe an app or document structure, such as
banner
,complementary
,contentinfo
,main
,navigation
,search
. - Touch event handlers MUST only be triggered on the
touchend
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.)
Note: The original version of this document was written by Yura Zenevich.