Operable Archives

The target size minimum for pointer inputs is at least 24 by 24 CSS pixels.

Introduction

Users with mobility impairments may have difficulty using elements if their target area is small. These users may have trouble with aiming or being able to keep a pointer steady. Larger target areas help these users interact with controls and elements.

How to Pass ‘Target Size (Minimum)’

Ensure that the target areas for all pointer inputs are at least 24 by 24 CSS pixels.

Exceptions

When there is at least 24 CSS pixels distance to any adjacent target.
When the target is a sentence or block of inline text.
When the presentation of a target that doesn’t meet the requirements is essential.

‘Target Size (Minimum) Tips

Making the spacing of targets at least 44 by 44 CSS pixels will pass 2.5.5 – Target Size at Level AAA.

Remember that pointers include both mouse control and touch control.

Although there is a minimum size, the larger the control the easier it is for everyone to use.

Consider making frequently used or important controls larger.

Be careful not to place controls near the edge of a screen as this may be more difficult to reach for some users.

Introduction

Some users with mobility impairments may have difficulty using a dragging action precisely, either by mouse pointer or touch. Others may use an accessibly input mechanism, such as eye control, that makes dragging even more difficult or even impossible.

These users need an alternative that enables them to complete the same input as dragging.

How to Pass ‘Dragging Movements’

Where a control uses dragging, provide an alternative.

Exceptions

Where dragging is essential. For example, creating art or playing a game where dragging is a design feature.

‘Dragging Movements’ Tips

A dragging movement is one where only the start and end points matter, the direction between them is not considered.

A common example of a dragging control is one where the user drags elements into a certain order. This can also be achieved by a clickable up/down navigation or by typing numbered values next to elements.

Introduction

Users may choose to switch between different methods of input when interacting with a website. For example, for some controls a user might prefer to input by keyboard and for others they might favour a mouse.

Users might also prefer to override the primary input mechanism for a device. For example, connecting an external keyboard to a touchscreen tablet. Allowing users to switch between concurrent input mechanisms can satisfy these needs.

How to Pass ‘Concurrent Input Mechanisms’

Ensure there are no restrictions on modes of input.

Exceptions to ‘Concurrent Input Mechanisms’

Where a set input mode is essential. For example, a touch-typing test.
If the restriction is required for security.
If the restriction is required to respect a user’s setting.

Introduction

How to Pass ‘ Target Size’

Ensure that the target areas for all pointer inputs are at least 44 by 44 CSS pixels.

Exceptions

When the target is available through an equivalent control on the same page that meets the requirements.
When the target is a sentence or block of inline text.
When the target size is controlled by the user agent.
When the presentation of a target that doesn’t meet the requirements is essential.

‘Target Size’ Tips

Remember that pointers include both mouse control and touch control.

Although there is a minimum size, the larger the control the easier it is for everyone to use.

Consider making frequently used or important controls larger.

Be careful not to place controls near the edge of a screen as this may be more difficult to reach for some users.

Introduction

Where gestures such as pointing or movements like a shaking or tilting control a function, some users will need to be able to control these through a more standard interface. Users with mobility impairments may not be able to make the correct movements (or make them precisely) enough to interact with these types of controls.

Similarly, some users may inadvertently use these controls and therefore need a way to switch them off.

How to Pass ‘Motion Actuation’

Ensure users can enable and disable gesture and movement-based controls.
Provide a standard interface (such as a button) in addition to motion and gesture controls.

Exceptions

Where the motion operates a function through an accessible interface supported by the user’s assistive technology and:
- The technology is supported widely (such as HTML); or
- The technology is supported in a widely distributed plug-in; or
- The content is within a closed environment or network where the user agent required is accessible; or
- The user agents that support the technology are available at the same cost and as easily to users with and without disabilities.
Where the motion is essential for the function, for example a step counter that uses movement to calculate distance.

‘Motion Actuation’ Tips

Ignore the exceptions and stick to providing alternate interface and the ability to disable motion controls.

Introduction

Some users rely on the programmatic names of components and controls, rather than text that is visually displayed on them. This is especially useful for users relying on assistive technology such as screen readers as the name of the control and the text displayed on it will match.

For speech-input users, mismatched labels and names may present them from effectively interacting with a control as they will need to use a name different to that displayed.

How to Pass ‘Label in Name’

Ensure that the text label and programmatic name of components match.

Abort actions where the pointer is released outside the boundary of the target.

Exceptions

Where there is no visible label for a component.
Where text is used symbolically, for example ‘ABC” used to indicate a spellchecker.

‘Label in Name’ Tips

Labels include:
- Text to the left of dropdown lists and text inputs
- Text to the right of checkboxes and radio buttons
- Text inside buttons and tabs
- Text below icons used as buttons
Programmatic names include alt text, aria-label and aria-labelledby attributes.
Programmatic names can be simplified versions of the display text if they begin with the same word. For example, ‘Search this page’ could use a name of ‘Search’.

When deciding how much text counts as a visual label, take a commonsense approach. The text immediately adjacent to the control will be enough.

Introduction

Some users may need extra help using a mouse or prefer to use assistive technology in place of a mouse. It’s important to reduce the chances of an accidental click for these users by ensuring that the down-click of a mouse pointer alone doesn’t complete a function.

How to Pass ‘Pointer Cancellation’

Ensure that actions are only taken when a pointer is clicked and released within the boundary of the target.

Abort actions where the pointer is released outside the boundary of the target.

Exceptions to ‘Pointer Cancellation’

Where it’s essential the action occurs on the down-click.

This might seem rare but is relevant to keyboard emulators, where a letter appears typed on the down-press of a key (and therefore the down-press of a mouse in an emulator. A music keyboard or shooting game may also need the action to complete on the down-click. In these instances there are often other ways for users to change an action that don’t need pointer cancellation.

Introduction

Some users cannot easily perform gestures in a reliable or precise way, which can make it difficult for them to interact with websites where gestures are required. To overcome this, users might have assistive technology driven by speech or eye movement to make gestures.

Multi-point or path-based movements can be particularly challenging for some users. A multi-point gesture is one where two or more gestures are needed together. For example, a two-finger pinch and zoom or swipe. A path-based movement might be drawing a shape or swiping through a carousel.

How to Pass ‘Pointer Gestures’

Where you have a function that requires a multi-point or path-based gesture, provide a way for a user to operate the same function with a single pointer.

For example:

Where a map might use pinch and zoom it can also have + and – controls operated by a single click or tap.
A carousel operated by a series of swipes can also have ‘forward’ and ‘back’ buttons

Exceptions

Where a multi-point or path-based gesture is essential for functionality. For example, drawing a signature on a document.

‘Pointer Gestures’ Tips

This goes beyond providing a keyboard accessible control as some users find pointers easier to use than keyboards. A user with an eye movement pointer will often find it easier to point at a control than to switch to a keyboard.

How to Pass ‘Page Break Navigation’

If your content has page break locators, provide users with a way to navigate to and between them:

In HTML you can add page list navigation using <nav role=”doc-pagelist”>
You could then add designations using <span id=”pg1”>

‘Page Break Navigation’ Tips

This only applies when you have content with page break locators, it’s not a requirement to add these to your content.

Introduction

Focus indicators help users see which element on a page currently has focus, they are especially useful for people with low-vision, memory or mobility impairments.

Where a focus indicator is used to show an element has current focus, it must be clearly visible and distinguishable. This goes beyond 2.4.11 to increase contrast requirements and expands the minimum area of the indicator.

How to Pass ‘Focus Appearance (Enhanced)’

When a component receives keyboard focus:

The focus indicator has a contrast ratio of at least 4.5:1 between focused and unfocused states;
The element within focus isn’t hidden; and
The focus indicator area is at least 2 CSS pixels around the perimeter.

‘Focus Appearance (Enhanced)’ Tips

It may sound basic, but a thick black border around an element when it receives focus will often do the trick (unless your website has a very dark background colour of course).

You could also change the background colour of the whole element on focus.

If you’re worrying about pixel sizes, your indicator probably isn’t clear enough – keep it simple.

Introduction

How to Pass ‘Target Size (Minimum)’

Exceptions

‘Target Size (Minimum) Tips

See Also

Introduction

How to Pass ‘Dragging Movements’

Exceptions

‘Dragging Movements’ Tips

See Also

Introduction

How to Pass ‘Concurrent Input Mechanisms’

Exceptions to ‘Concurrent Input Mechanisms’

See Also

Introduction

How to Pass ‘ Target Size’

Exceptions

‘Target Size’ Tips

See Also

Introduction

How to Pass ‘Motion Actuation’

Exceptions

‘Motion Actuation’ Tips

See Also

Introduction

How to Pass ‘Label in Name’

Exceptions

‘Label in Name’ Tips

See Also

Introduction

How to Pass ‘Pointer Cancellation’

Exceptions to ‘Pointer Cancellation’

See Also

Introduction

How to Pass ‘Pointer Gestures’

Exceptions

‘Pointer Gestures’ Tips

See Also

How to Pass ‘Page Break Navigation’

‘Page Break Navigation’ Tips

See Also

Introduction

How to Pass ‘Focus Appearance (Enhanced)’

‘Focus Appearance (Enhanced)’ Tips

See Also

Start here

Boring pages

Security

Search Wuhcag