Mobile Accessibility Guidelines - Design

Consistency should

A user's experience should be consistent.

Consistency allows all users to predict where to find information and how to use it. This is particularly helpful for users with cognitive impairments, in particular autistic users.

Consistent and logical structure and language help all users understand where they are and how to navigate or perform a task. Consistent and logical layout helps both sighted and non-sighted users predict where they should touch or interact.

For example, navigational aids such as back buttons should consistently move the user back to the previous step and act as a breadcrumb trail.

The look and sound of a control, object or element should inform the user how to interact with it.

For example, unless there is a recognised convention, such as for navigation, do not use links that are styled to look like buttons. This can be confusing for users of assistive technology, such as voice control or screen readers.

Additionally, use common gestures alongside other controls for commonly used design patterns:

swipe gestures for slideshows and carousels, drag gestures for toggle and slider elements, and, where available, support native inertia for scrolling.

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

iOS

Ensure {code}accessibilityFrame{/code}, {code}traits{/code}, and {code}accessibilityLabels{/code} correctly indicate the purpose and function of the object to users who cannot see. Use standard controls to indicate the purpose of objects to users who can see. Refer to iOS Human Interface Guidelines design principles.

iOS Example (Objective-C)

[myButton setImage:[UIImage imageNamed:@"play.jpg"] forState:UIControlStateNormal];

[myButton setTitle:NSLocalizedString(@"Play clip", nil) forState:UIControlStateNormal];

[myButton setAccessibilityTraits: UIAccessibilityTraitButton];

Android

Use standard controls to indicate the purpose of objects to users who can and cannot see. There is no ability to change accessibility role or trait information on the Android platform. Refer to Android Material Design principles.

Android Pass Example

//A custom element that doesn't look like a button uses the default button theme and indicate visual focus
<CustomButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:background="@drawable/my_button"></CustomButton>
 
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item android:state_focused="true" android:drawable="@android:drawable/btn_default"></item>
    
    <item android:drawable="@drawable/btn_default"></item>

</selector>

HTML

Use visual styling to indicate that an item is actionable. Links should be different from static text for example a different font weight, outline, or some other visual styling that doesn’t rely on colour alone. Use of standard elements without custom styling will automatically provide this for links and buttons, although multiple or long links can become illegible on small screens.

Make sure icons, link text, etc. is consistent. For example, if the link to the home page is “home” on one page, make sure it is not “Start page” on another page. Additionally, if a particular icon refers to “Help” on one page, it must not mean something else on another page.

HTML Pass Example

<a href="..."> Next story</a>
<button>Next story</button>

Testing

Procedures

  1. Activate a screen reader.
  2. Navigate through actionable items.
  3. Verify that the visual appearance of the screen and control, elements, and objects indicate their purpose and action status.
  4. Verify that the purpose of elements, objects, and control is announced.

Outcome

The following checks are true:

  • The visual layout and style of elements, object, and controls indicates their action;
  • The actionable status and purpose of elements, controls, and objects is announced.