M004 - Providing clear indication that elements are actionable / Design actionable objects to look actionable

Technique Category

General Techniques

Technique Status Category

M4 Draft for Techniques Proposed

Status

This technique refers to a shorter Guideline in the BBC Mobile Acessibility Guidelines: Actionable elements

Applicability

This technique is relevant for web and native mobile applications that have actionable elements like buttons or links, especially in interaction modes where the affordance of actionable elements is commonly detected visually (touch and mouse use).

WCAG references

Applicable WCAG Success Criteria:

The Technique is advisory.

User Agent and Assistive Technology Support Notes

Provide notes regarding known lack of support for this technique with particular user agents or assistive technologies.

Description

The objective of this technique is to ensure that visual users interacting with content via touch (direct manipulation) or via visual cursors operated with mice, touchpads, joysticks or similar devices can detect actionable elements.

Frequently, links or buttons triggering changes in mobile apps are not sufficiently distinct to be clearly distinguishable from non-actionable elements (content, status information, etc). There are a number of interface design conventions to indicate clearly those visual elements are actionable. Following these conventions benefits all users but especially users with vision impairments.

For different types of elements,a clear indication that elements are actionable can be achieved by using visual features that set the actionable element apart in terms of shape, color, style, positioning, text label for an action, or conventional iconography.

It is advisable to apply the principle of redundant coding to ensure that elements are indicated as actionable by more than one distinguishing visual feature. Typical examples for redundant coding:

State changes during interaction should be used to reinforce the detection and interpretation of the affordances of actionable elements. This includes visual pressed states for buttons and clearly visual focus when focusing elements via a keyboard via tabbing or arrowing, a pointer device, or swipe gestures when interacting with touch devices in a "screenreader active" mode.

Examples

Examples for distinguishing features used for an indication that elements are actionable:

Resources

Related Techniques

Tests

Procedure

  1. For all actionable elements, check that they can be visually distiguished from non-actionable text
  2. For all elements that appear actionable according to the styles and conventions used in the context of the app, check that it triggers an action

Expected Results

Test Files