| 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 (<label> 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.)
|
