Choice

Must

Interfaces must provide multiple ways to interact with content.

Description

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.

For examples of good practice, visit the BBC Global Experience Language website.

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 appropriate focus states, descriptions and roles on custom controls.

HTML

Using standard elements will most often provide choice of interaction as this is already built in.

HTML example

Use terms for actions that are not device or control specific:

<form>
    <p>Select the day do you prefer?</p>
    <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">
</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.
Results

The following checks are true:

  • Actionable elements can be controlled in multiple ways.