WCAG Master Guide: Input Modalities

Using a mouse to navigate and interact with a website may be second nature to you. However, this is not necessarily the case for someone with a mobility impairment. 

The input modality requirements outlined in the Web Content Accessibility Guidelines (WCAG) ensure that website developers and owners are considering the unique challenges of those with physical disabilities.

What are Input Modalities?

Input modality requirements recognize that users operating pointer input devices may not be capable of carrying out complex or timed actions on a website. Swiping, long presses, and drag-and-drop actions are some examples of this.

With WCAG’s input modality requirements, developers are not being discouraged from including more complex actions. However, an alternative input method should always be available to users with motor impairments. 

Alternative input methods should make it possible for a visitor to interact with your site using just a single, untimed pointer gesture. 

In essence, your website should cater to users who rely on mouse, speech, touch, and keyboard input methods. 

WCAG Input Modalities Success Criteria

Here are the success criteria you would need to meet for input modalities in order to achieve Level A or higher.

Pointer Gestures

Any functions on your website that use a path-based or multipoint gesture should allow users to also operate it with a single pointer unless a path-based gesture is essential. 

A path-based gesture refers to a pointer moving through at least one intermediate point before reaching the end point. Some examples include swiping, sliders, carousels, and drawing shapes.

The objective of this requirement is to provide users with the option to operate touch screens with one finger and reduce gestures. Basically, you want to provide a single-point operation for all functions where possible.

Pointer Cancellation

When functionality on your site can be operated with a single pointer, at least one of the requirements needs to be met:

• Moving a mouse pointer down will not execute any part of the function.
• Moving a mouse pointer up will complete a function and there is an option available to cancel this function or undo it completely.
• Moving the mouse pointer up will reverse any function that was triggered by moving the mouse down.
• Moving a mouse down to complete a function is essential. This is only true for functions that emulate a keyboard or numeric keypad press. 

The idea behind the pointer cancellation requirement is to reduce any accidental activation of controls on your site. To do this, website developers want to make pointer cancellation predictable and consistent. 

Label In Name

The purpose of this requirement is to ensure website users can activate a control with the help of a visual label.

By adding a visual label to components on your site, users will know how to interact with it programmatically. 

Along with controls having a visible text label, they should also have a programmatic name. When these two names match, visitors who rely on speech input can navigate your website by speaking the names of these labels – menus, links, and buttons are some examples of these components. 

Motion Actuation

The motion actuation requirement dictates that your content is not dependent on a visitor’s ability to move a device. A user should be able to engage with your content without the need to shake or tilt the screen. More conventional user interface components can also be used. 

Target Size

The intent of the target size requirement is to ensure that targets are large enough for any user to easily activate them. Targets should be at least 44 by 44 CSS pixels except when:

• The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels.
• The target is in a sentence or block of text.
• The size of the target is determined by the user agent and is not modified by the developer.
• A particular presentation of the target is essential to the information being conveyed.

Basically, if a visitor is using a touchscreen device to access your site or they have limited dexterity, they should still be able to activate a target. 

Concurrent Input Mechanisms

This particular requirement is only applicable if you want to achieve WCAG Level AAA, which isn’t necessary for most site owners.

Concurrent input mechanism requirements state that web content shouldn’t restrict the user of input modalities available on a platform unless it’s essential. Essential would mean it’s necessary for the security of the content or in line with a user’s settings. 

Input Modality Best Practices

To achieve Level AA by complying with the necessary input modality requirements of WCAG, here are some best practices you can follow: 

Limit dragging requirements. Many users won’t be able to maintain enough pressure on an input device to drag content, so it should be limited or avoided where possible. 

Add enough spacing between targets. Some of your site visitors will struggle with hand tremors or have limited dexterity. For this reason, you want to add enough space between targets on your site to make it easier for them to click them. Menu links and buttons are some examples of targets.

Label your site’s functional elements correctly. Make it easier for users who rely on screen readers and speech-to-text navigation to engage with your site by ensuring any UI components with labels that include text or images of text have the same programmatic name. 

Frequently Asked Questions