M27 - Providing touch access for custom controls

Technique Category

Technique Status Category

Status

• Detlev Fischer
• LINK TO SURVEY WHEN SURVEYED BY GROUP

Applicability

This technique applies to touch and pointer operating modes.

WCAG References

The technique relates to:

• Success Criterion 2.5.1 Touch: All functions available by touch are still available by touch after system assistive technology that remaps touch gestures is turned on. (Level A)

User Agent and Assistive Technology Support Notes

ANY NOTES REGARDING KNOWN LACK OF SUPPORT FOR THIS TECHNIQUE WITH USER AGENTS OR ASSISTIVE TECHNOLOGY.

Description

Custom controls in web interfaces may not be suitable for touch or pointer access when the built-in screen reader of mobile operating systems is enabled.

Where default touch or pointer gestures (such as dragging) do not work because of screen reader gestures that take precedence, ensure that there are equivalent alternative ways of activating or changing the state or value of the control.

Solution

Either:

1. Extend the touch- or pointer-focused control. When the default touch or pointer gesture for manipulation is not available because the screen reader is turned on, equivalent screenreade-supported gestures are available (e.g. focus by swiping, then double-tap).
2. Offer a redundant control: Offer a separate alternative control for the same functionality (e.g., specifying a value, changing the state, activation) that does not rely on touch or pointer gestures that are not available when the screen reader is turned on.

Examples

Example 1

A slider can be used to change a value (food quality) of a five point scale by dragging the thumb of the slider . When the system-internal screen reader is turned on, this direct manipulation does not work. Therefore, a different method is provided to set the value of the slider. Discrete marks along the slider representing the five posible values can be selected by first moving the focus to the appropriate mark and then selecting this mark by double-tapping.

Example 2 on: http://files.paciellogroup.com/blogmisc/samples/aria/slider/

Example 2

A slider is used to set the numerical value of a donation. The value can be set by dragging the thumb of the slider. When the system-internal screen reader is turned on, this direct manipulation does not work. Therefore, an input field with type number is provided for users to specify the amount they want to donate. Note that the slider is not part of the focus order and hidden with aria-hidden because it is not intended to be used in keyboard and screen reader operation.

The example I remember has since been replaced by another mechanism btu it should be hard to construct an example based on something like http://files.paciellogroup.com/blogmisc/ARIA/slider/ when adding a text input.

Resources

• ANY EXTERNAL REFERENCE (INCLUDES UAAG OR OTHER W3C SPEC REFERENCES)

Related Techniques

• LIST OF RELATED TECHNIQUE NUMBERS (e.g. H30)

Tests

For interactive elements (controls):

Procedure

1. Check that the control can be used (activated/deactivated, values changed etc.) with the system-internal screen reader turned on
2. If the control cannot be used with screenreader on, check that there are alternative equivalent means to carry out the action

Expected Results

• #2 or #3 are TRUE

TEST FILES

ANY TEST FILES GO HERE (NOTE WORKING EXAMPLES INCLUDING SOURCE CODE SHOULD BE REFERENCED IN THE EXAMPLES SECTION).