Input Modalities 2.5
Motion Actuation 2.5.4
Acceptance Criteria
- After text is input in a field, shaking a device shows a dialog offering users to undo the input. A cancel button next to the text field offers the same functionality.
- A user can tilt a device to advance to the next or a previous page. Buttons or links are also provided to perform the same function.
- A user can move or pan a device to change the view in an interactive photo. A control is also available to perform these same functions.
- A user can gesture towards the device to navigate content. Controls are also available to navigate.
- A user can choose an application setting which turns off Shake to Undo features.
Exceptions
- Supported Interface: The motion is used to operate functionality through an accessibility supported interface;
- Essential: The motion is essential for the function and doing so would invalidate the activity.
Notes
Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation.
Pointer Gestures 2.5.1
Acceptance Criteria
- Ensure all content can be operated without complex gestures.
- Examples of single-point activation on a touchscreen or touchpad include taps, double taps, and long presses.
- Examples for a mouse, trackpad, head-pointer, or similar device include single clicks, click-and-hold and double clicks.
- Pinch gesture for zooming and drag gestures to move the visible area must also contain [+] and [-] buttons to zoom in and out, and arrow buttons to pan in all directions.
- Slider controls that use swiping or dragging must also have buttons on both sides to allow scrolling or increment/decrement the selected value and update the posiiton.
Notes
All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential.
Pointer Cancellation 2.5.2
Acceptance Criteria (must meet 1)
- 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. (ex: functions that emulate a keyboard or numeric keypad key press.)
Notes
For functionality that can be operated using a single pointer, at least one of the below criteria is true.
Label in Name 2.5.3
Examples
aria-label (incorrect)
This would not work because the user sees "Next" written on the page so they speak "next". The aria-label over-rides everything so they would need to say "Go to..." which they cannot see.
<a href="#" aria-label="Go to next page">Next</a>
aria-label (correct)
It would, however, be okay to do something like this, as long as the text represented on the screen is what the aria-label starts with, you've met the success criterion.
<a href="#" aria-label="Next page">Next</a>
visually-hidden (incorrect)
This would not work because what shows up on the screen is "Next Page" so that is what the user would speak. However, the for assistive technology, the link is going to show up as "Go to Next Page" and will be looking for the user to say this.
<a href="#"><span class="visually-hidden">Go to </span>Next Page</a>
visually-hidden (correct)
This would work as long as the user would say "Next Page". It would still be best to use aria-label as above than use "visually-hidden" class to hide text.
<a href="#">Next<span class="visually-hidden"> Page</span></a>
Acceptance Criteria
- Visible text labels of controls must match their accessible names.
- The accessible name of a button begins with the same text as the visible label.
Notes
For user interface components with labels that include text or images of text, the name contains the text that is presented visually.
Dragging Movements 2.5.7
Acceptance Criteria
- Check that the value of the control slider (range) can be set with a tap or click using a pointer.
- Check that single pointer operable controls exist over or adjacent to the content slider that advance to adjacent chunks of content.
Notes
All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential or the functionality is determined by the user agent and not modified by the author.
Target Size 2.5.8
Acceptance Criteria
- The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:
- Spacing: Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;
- Equivalent: The function can be achieved through a different control on the same page that meets this criterion;
- Inline: The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;
- User agent control: The size of the target is determined by the user agent and is not modified by the author;
- Essential: A particular presentation of the target is essential or is legally required for the information being conveyed.
Notes
Targets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the success criterion. Examples include sliders, color pickers displaying a gradient of colors, or editable areas where you position the cursor.
For inline targets the line-height should be interpreted as perpendicular to the flow of text. For example, in a language displayed vertically, the line-height would be horizontal.