“Label in Name’ requires that where a component has a text label, the name of the component also contains the text displayed.

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.

See Also

Understanding Success Criterion 2.5.3 (W3C)

Pointer Cancellation requires that functions don’t complete on the down-click of a pointer.

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.

See Also

Understanding Success Criteria 2.5.2 (W3C)

‘Pointer gestures’ requires that multi-point and path-based gestures can be operated with a single pointer.

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.

See Also

‘Page Break Navigation’ requires you to provide a way to navigate between page break locators.

Page break locators are a way to guide users through meaningful points within content. For example, an online version of a book might use page markers to match up with a print edition. 

Users with visual impairments or those who rely on digital means to consumer content can use page break locators to find a certain point within the text. For example, if a teacher asks them to read pages 34 – 59 before the next lesson. 

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.

See Also

‘Focus Appearance (Enhanced)’ requires that focus indicators are more clearly distinguishable when active.

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.

See Also

‘Focus Appearance (Minimum)’ requires that focus indicators are clearly distinguishable when active.

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 earlier guidance to ensure indicators are visible and have contrast between focused and unfocused states.

How to Pass ‘Focus Appearance (Minimum)’

When a component receives keyboard focus:

  • The focus indicator has a contrast ratio of at least 3:1 between focused and unfocused states;
  • The focus indicator has a contrast ratio of at least 3:1 against adjacent colours;
  • The element within focus isn’t hidden; and
  • The focus indicator area:
    • Has an outline that’s at least 1 CSS pixel thick; or
    • Has a shape that’s at least the area of a 4 CSS pixel-thick line;

‘Focus Appearance (Minimum)’ 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.

See Also

‘Animation from Interactions’ requires that users can disable motion animation.

Introduction

Animations on a website can distract users and, in some cases, cause nausea. Avoiding animated elements triggered by the user (for example parallax scrolling or a ‘page loading’ animation) can help these users enjoy the website.

How to Pass ‘Animation from Interactions’

  • Don’t use motion animation on your website; or
  • Allow users to disable all non-essential motion animation.

Exceptions

Animation that’s essential to a website’s function or information, if the same cannot be achieved by other means. 

‘Animation from Interactions’ Tips

“Motion animation” means adding steps to states, such as making a bar chart appear to grow from 0 to 100, rather than loading it at 100.

Add a site-wide control to the top of your website to allow the user to turn off non-essential animation.

This doesn’t mean websites with animation can’t pass, as an animated video would be fine if the purpose of the page was to display that animated video. It’s decorative animation you should seek to avoid or allow users to turn off.

See Also

Warn users about timeouts that cause data loss.

Introduction

Time limits can cause problems for some users with cognitive impairments, who may take longer to complete tasks on a website. It’s therefore important to allow users to complete a process in more than one sitting and alert users to the length of any timeout period.

How to Pass ‘Timeouts’

  • Where possible, allow users 20 hours before a timeout removes their data
  • Warn users of the duration of any timeout period at the beginning of the task

‘Timeouts’ Tips

There are two main types of timeout, for inactivity or a hard time limit. Inactivity is easier for users to deal with as they may be making progress (albeit at a slower pace) and so will be less likely to trigger the timeout.

Hard time limits can be justified if they protect user data or are essential for a business (for example an auction site or hotel room booking form).

Watch out for privacy regulations when you store data, many countries require explicit positive consent for you to do so.

This guideline overlaps with Timing Adjustable, which also deals with time-limits and the controls around them.

See Also

Allow users to turn off or remap single-key character shortcuts. 

Introduction

Keyboard shortcuts can help some users, but cause difficulty for those using speech input and some users with motor impairments. They can also cause issues on mobile screens as the functional area is reduced on a mobile keyboard.

For speech input users, single-key character shortcuts (for example, the letter key “F” for starting a search) are particularly bad as a spoken word can be interpreted as several individual keystrokes. 

The best course of action is to avoid using single-key character shortcuts.

How to Pass ‘Character Key Shortcuts’

  • Don’t use single-key character shortcuts
  • If you really want to:
    • give users a way to turn off the shortcut;
    • allow users to remap the shortcut to use non-character keys; or
    • ensure the shortcut only works when an element has focus.

Exceptions

  • Shortcuts where one key is not a character (for example ‘alt’ or ‘alt’ + ‘c’)
  • Elements where the shortcut is only active on focus (for example, lists and dropdown menus).

‘Character Key Shortcuts’ Tips

One last time, please just avoid setting up single-key character shortcuts.

Characters include letters, numbers, punctuation and symbols – anything you could type into a word processor and print off.

See Also

‘Section Headings’ requires you to organise content with headings.

Introduction

Adding section headings to all content will help your users understand your website. They are most helpful for users who have difficulty focusing or remembering where they are on a page, as well as users with a visual impairment who may navigate by skipping between headings.

You can help these users, and everyone else, by ensuring that all content on your website is broken up by clear and informative headings.

How to Pass ‘Section Headings’

Add a heading for every new thought or topic in your content (for example, a travel article may have headings to indicate the distinct sections on dining, transportation, and lodging).

Exceptions

A webpage can be single block of content with only one header if it is about one thought or topic.

‘Section Headings’ Tips

A section is a self-contained portion of written content that deals with one or more related topics or thoughts.

A section may consist of one or more paragraphs and include graphics, tables, lists and sub-sections.

Beware of making your content harder to read by forcing in too many headings.

Certain content may not be able to meet this guideline, for example if your website publishes unabridged historical documents that don’t use headings.

See Also