Consistency

Should

A user's experience should be consistent.

Description

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 accessibilityFrame, traits, and accessibilityLabels 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

 
[AButton setImage:[UIImage imageNamed:@"play.jpg"] forState:UIControlStateNormal];
[AButton setTitle:NSLocalizedString(@"Play clip", nil) forState:UIControlStateNormal];
[AButton setAccessibilityTraits: UIAccessibilityTraitButton];                        
// an image that doesn't look like a button
UIImageView* aImage = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
[aImage imageNamed:@"playbtn"];
[aImage setTitle:NSLocalizedString(@"Play clip", nil) forState:UIControlStateNormal];                        

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 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>                        
//A custom button element that is drawn in a non-standard way
<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:drawable="@drawable/btn_custom">
    </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.

HTML example

 
<a href="..."> Next story</a>
<button>Next story</button>                        
<div onclick="openStory();"> Next story </div>                        

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.
Results

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.