Mobile Accessibility Guidelines - Design

Choice must

Interfaces must provide multiple ways to interact with content.

Providing multiple ways to interact with content gives users choice and increases inclusivity. This supports different user expectations on how to interact with elements, and users who have difficulty with one type of interaction can use another.

Some elements provide multiple types of interaction. For example, a button element can be navigated to via mouse, touch, keyboard, or switch device, and then clicked, tapped or otherwise activated. Swipe gestures, which only cover touch interaction, must be supported by alternatives that perform the same actions. Additionally custom controls must be consistent with similar native controls, providing multiple ways to interact with them to cover all types of user interaction.

Refer to How to for more details.

Avoid describing gestures in an alternative, tooltip, or hint, as the gesture or action might be different for users with assistive technology enabled.

iOS

Use standard controls when possible and set accessibility traits for custom controls.

Android

Use standard controls when possible and set accessibility traits for custom controls.

HTML

Use standard controls when possible and set accessibility traits for custom controls.

HTML Pass Example

<!-- Use button elements for button-like behavior (for example, pausing a video, expanding/collapsing content, etc. -->
<button>I am a button</button>

<!-- Use link anchors to direct the user to other pages, either within the application or to external websites -->
<a href="…">I am a link</a>

<!-- Use native form elements for collecting information from the user -->

<form>
  <fieldset>
       <legend>Select the day do you prefer?</legend>
       <label><input type="radio" name="day" id="mon" value="Monday">Monday</label>
       <label><input type="radio" name="day" id="fri" value="Friday">Friday</label>
       <label><input type="radio" name="day" id="sat" value="Saturday">Saturday</label>
       <input type="submit" value="Submit">
   </fieldset>
</form>

Testing

Procedures

  1. Identify the different actionable elements.
  2. Verify they can be accessed and controlled, as appropriate for the device, by:
    • mouse,
    • touch,
    • keyboard,
    • with or without screen reader enabled.

Outcome

The following checks are true:

  • Actionable elements can be controlled in multiple ways.