Posted on by Graeme Coleman in Design and development
Tags: Apps, Code, Foundations, WCAG
A pointer gesture is an action a person performs using their finger, mouse, or an assistive technology like a head pointer or eye gaze system to operate a functional control. Some pointer gestures can be difficult or even impossible for certain people to perform, so an accessible alternative may be required.
This post introduces the different forms of pointer gestures and covers how and when to provide alternatives for people who can't perform them.
Many of today's user interfaces require us to perform gestures beyond pointing and clicking. Changing the audio volume in a media player may involve moving a toggle up and down a slider, while arranging tasks in a to-do app may involve dragging items from one area of the page to another.
The popularity of touchscreen devices has also meant that many of us have had to learn new gestures using our fingers to perform actions that were otherwise impossible to perform using the keyboard or mouse alone.
Some people may find these gestures challenging to do accurately or cannot perform the gesture at all. For example:
The four main types of pointer gestures are as follows:
Note that, from a conformance perspective, the Web Content Accessibility Guidelines explicitly distinguish between dragging movements and other forms of pointer gestures. Multi-point and path-based gestures are covered by 2.5.1 Pointer Gestures (Level A), introduced in WCAG 2.1, while dragging movements are covered separately by 2.5.7 Dragging Movements (Level AA), introduced in WCAG 2.2.
Single pointer gestures only involve a mouse or a single finger/stylus on a touch screen, and are arguably the easiest to perform. Typical examples of single pointer gestures include:
Buttons, links, and checkboxes normally only require single pointer gestures.
Multi-point gestures are those that involve more than one pointer being used simultaneously. Such gestures are commonplace in touchscreen environments. Typical examples of multi-point gestures include:
Path-based gestures involve an initial "down" press of the pointer, followed by a movement of the pointer along a specific path.
For example, tracing, drawing a shape, and steady-hand games where a person must move their pointer down a narrow twisting path from one end to the other all involve path-based gestures.
Depending on other factors, gestures like sliding and swiping can also be path-based. This subject is covered in more detail in the note on path-based gestures below.
Dragging involves grabbing, picking up, or otherwise selecting an item and moving it elsewhere.
The main difference between dragging movements and path-based gestures is that, when performing a dragging movement, only the start and end points matter, not the actual path that a person takes to move the item between those points.
For example, when dragging an item from the top of the screen to the bottom, the path that a person takes to move between these points is irrelevant.
Typical examples of dragging movements include:
To support people with disabilities who may find it difficult or impossible to perform certain gestures, the related WCAG success criteria state that all functionality that uses a multi-point gesture, a path-based gesture, or a dragging movement for operation must also be operable using a single pointer gesture that is not path-based.
Exceptions include:
In practice, this usually involves adding separate controls to your designs that perform the same functionality but only require a single pointer gesture like a single tap or click.
As mentioned above, a single pointer-based alternative that is not path-based must be provided for all functionality requiring a path-based gesture.
However, in some cases, interpreting whether a gesture is path-based, and therefore whether or not such an alternative is required, can be a confusing process. This is typical in cases where there is no explicit or apparent path for a person to follow when performing the gesture.
The answer comes down to how a person must perform the gesture for the related action to trigger; in other words, the accuracy of the gesture. In short:
This is best explained through an example.
The following screenshot shows a typical carousel. A person moves slides into view by swiping left or right on the screen. The angle or direction of the swipe gesture has no impact on whether the carousel moves. Even if the gesture is performed at a slight angle, the carousel will still operate in the same way as if the person had swiped straight across the screen. Therefore, a single pointer-based, non-path-based alternative is not required to meet 2.5.1 Pointer Gestures (Level A).
Note, however, the lack of an alternative may cause the carousel to fail 2.5.7 Dragging Movements (Level AA) if the carousel also relies on dragging movements to operate.
The following screenshot shows the same carousel. This time, however, the angle of the swipe gesture must be perfectly straight from left-to-right or right-to-left. If there is deviation, for example a person swipes at a slight angle, the carousel does not move as expected. Therefore, in this case, a single pointer-based, non-path-based, alternative is required.
That said, it is good practice to provide single-pointer, non-path-based alternatives in all cases, even if the gesture's angle, direction, or accuracy has no impact on the success of the gesture. Doing so benefits everyone, particularly people who may find gestures difficult to perform, even when the gestures are not path-based. Additionally, remember that alternatives are required if operating the component requires some form of dragging movement.
The following examples demonstrate how single pointer, non-path-based, non-dragging alternatives can be provided for controls that rely on multi-point gestures, path-based gestures, and dragging movements to operate.
The following screenshot shows the basic design for a touchscreen-based map application. A person can touch the screen and drag their finger around to pan the map, and they can use a two-fingered pinch-to-zoom gesture to zoom in and out of the map.
Equivalent and appropriately labeled buttons are provided for people who cannot perform these gestures.
A volume slider allows a person to touch or click on the toggle within the slider and then drag the toggle by moving their finger or mouse up or down.
For people unable to perform these actions, there are equivalent buttons above and below the slider that allow the toggle to be moved using a single pointer gesture without any path-based or dragging movements.
Additionally, tapping or clicking on any point in the slider should move the toggle to that point and change the volume accordingly.
A carousel includes Previous and Next buttons that allow people to navigate between slides without swiping, even if the swiping gesture isn't path-based, or dragging movements.
A Kanban board containing individual "Move" buttons that - when activated - open a dialog box of potential drop points. This allows people to complete the associated task using a control requiring only a single pointer gesture rather than a dragging movement.
An application requires people to draw a circle around the item that they wish to select. Buttons labeled "Add" that only require a single pointer gesture to activate are positioned next to each option for people who are unable to perform this gesture.
When implementing interactive content, using interface controls that can be operated using a single pointer gesture and don't require any dragging - be it freeform or following a specific path - is the easiest and most accessible solution. Most components that people are familiar with, such as buttons, links, and form controls like checkboxes and radio buttons, all support single pointer gestures for operation.
If you must use controls that can only be operated using multi-point gestures, path-based gestures, or dragging movements, include additional controls within your designs that allow people to complete the related tasks using a single pointer, non-path-based, gesture that does not require any dragging.
Read more accessibility foundations posts or sign up for Accessibility Unlocked, our free six-day newsletter series designed to help you kick-start accessibility.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。