This page is in progress -
Why This is Important
Preventing accidents while interacting with things is accessible to a diversity of disabilities and situations.
Blind and visually impaired people use screen readers to interact with websites and apps. A screen reader is a type of assistive tech that converts things on screen to audio and/or braille. It's important that things are understandable and interactive to screen readers.
Keyboard accessibility is essential for people who do not use a computer mouse (which might be because they have unpredictable or very specific movement due to a motor disability). Many Blind and visually impaired people also use keyboard interactions in order to use their screen reader.
Error support is accessible to people with a diversity of disabilities. A cognitive disability might affect how a person perceives and understands things. A physical disability might lead to unpredictable movement. Other factors such as environment, stress, and multi-tasking may also lead to errors.
In order to be accessible, gestures and interactions must account for people with physical and motor disabilities, who might have unpredictable or very specific movement.
Pointer input refers to actions such as clicking with a mouse or pressing your finger on a touch device. It's important to prevent and help people recover from errors.
This references to WCAG criterion 2.5.2 Pointer Cancellation (Level A).
Level AAA compliance is considered more difficult to meet because it requires more resources to fulfill. It also might encompass conflicting access needs (meaning what is accessible to some might be inaccessible to others). Use your best judgment of your target audience and your team's capabilities to determine if this is a pragmatic goal to reach.
How to Implement This
WCAG recommends that at least one of the following is true in order to be compliant:
- No Down-Event - The down-event of the pointer is not used to execute any part of the function;
- Abort or Undo - Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion;
- Up Reversal - The up-event reverses any outcome of the preceding down-event;
- Essential - Completing the function on the down-event is essential.
No Down-Event
The down-event refers to the action of pressing down on a button (or other component). The up-event refers to lifting up from a button. WCAG recommends that it is more accessible to activate the button on the up event (for example, hitting the "Send" button will send the email on the up-event only).
Abort or Undo
The option to abort or undo should be made available on the up event. This refers to when the mouse or finger presses something accidentally. People should be able to move their mouse or finger away from the target area and lift up, in which case nothing happens. This can be especially helpful for scrolling on touch devices, which requires touching the screen.
Up Reversal
Up reversal refers to when the down-event triggers an event that the up-event can reverse. For example, if you press-and-hold a button to go off mute and speak into a microphone, the up-event reverses that action and mutes you again. This is also applicable to drag-and-drop, for example if you drag an object somewhere and drop it in an ambiguous area, the up-event returns the object to its original location.
Essential
While WCAG recommends the above 3 techniques as the more accessible interaction, they make an exception if executing the function on the down event is essential. This may be relevant to musical instrument applications, such as the drums or piano, where you expect the music to play on the down-event instead of the up-event.
What to Do
The standard recommendation is:
- Use the up-event instead of the down-event to execute the function
- If the down-event does execute a function, provide a way to reverse or undo that function
Implementing these techniques can be handled through javascript using pointer events such as mouseDown and mouseUp. See Eloquent Javascript - Handling Events.
Further Documentation
How to Test This
- Interact with the buttons on the website/app.
- Make note of the pointer input behavior. Make sure that the up-event executes the function, or that there is a way to reverse or undo the function.
Credits
Contribute and Give Feedback
If you would like to provide feedback or contribute content on this resource, please fill out the form below.