Skip to content

Accessibility

Hylke Bons edited this page Feb 12, 2020 · 4 revisions

Visual users often know that sets of controls go together due to their proximity on screen. However, you must explicitly define these relationships before accessibility clients can use them as well. For example, a container could adopt the a11y-group keyword, indicating that its contents should be treated as a group of controls.

- group !a11y-group a11y-label:"Play" a11y-help:"Here's what this does"
    - layer
    - layer

The a11y-label and a11y-help keywords can be used on most views to provide more information. These can later be used as tooltips or accessibility descriptions depending on the toolkit converter.

Every element that the user can interact with must have a meaningful value set for its a11y-label property. Ideally, this label is a single word that briefly describes the control. Add, Play, Delete, Search, Favorites, and Volume all make ideal labels.

Essentially, the a11y-help text acts like a tool tip. Use help text only when the results are not obvious from the control’s label. Just like the label, strive to make the help text as short as possible. Start with a capital letter. Begin with a verb and omit the subject. For example, use “Plays the song” not “This button plays the song.” Also, do not include a description of the action, gesture, view or control. Finally, always localize your help text.