2. Operable
2.5 Input Modalities (Level AAA)
Contents
Success Criterion 2.5.5 Target Size
WCAG 2.1
Level AAA
The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when:
- Equivalent: The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels;
- Inline: The target is in a sentence or block of 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 to the information being conveyed.
Target Size Explained
This success criterion was added in WCAG 2.1 to ensure that people are able to activate actions either with a mouse click or a touch. Some people may have difficulty targeting small objects with a mouse pointer, perhaps having difficulty holding the mouse pointer steady enough to click a tiny target area.
One common way to make tiny web elements, such as radio buttons or checkboxes, targetable, is to label them with the HTML label element. When it is used the label itself becomes clickable, creating a larger target area to activate these tiny form elements.
Where target sizes often become problematic is in responsive designs. When web content is viewed on larger screens, target areas may meet the 44 by 44 pixel minimum dimensions, though when viewed on a small device, content may reflow and elements may be reduced in size to fit in the smaller space available. On mobile devices, targets need to be (a) large enough to be touchable with a finger tip without activating other nearby elements unintentionally, and (b) large enough so a finger tip does not completely obscure the element.
Exceptions:
- Targets within a sentence
- When target size is essential and would invalidate an activity or function otherwise
- When an equivalent 44 by 44 target is provided, the original does not need to meet this requirement
- Links at the end of a sentence to a footnote (these are considered to be part of the sentence)
- Elements that are part of the operating system user interface or a user agent (e.g., browser)
Key Point:
What does 44 by 44 CSS pixels look like?
Suggested Reading:
Success Criterion 2.5.6 Concurrent Input Mechanisms
WCAG 2.1
Level AAA
Web content does not restrict use of input modalities available on a platform except where the restriction is essential, required to ensure the security of the content, or required to respect user settings.
Concurrent Input Mechanisms Explained
This success criterion was added in WCAG 2.1 to ensure that users are not limited in the input method they use to access web content. For a mobile device, a finger tip is typically the main input method. For a person who may have limited use of their fingers, however, they might choose to attach a mouse and keyboard to their device to make it easier to operate. Web content must not prevent the use of these or other alternate input devices.
Input type restrictions typically occur when JavaScript is used to handle input. If, for example, a developer chooses to use a touch-specific event handler (e.g., touchstart) without providing alternative access through a mouse event handler (e.g., mousedown), it may make the content unusable by someone who is unable to touch a screen or target elements on the screen. To avoid such limitation, developers can create functions that handle a variety of input methods (e.g., finger, mouse, keyboard, stylus, or joystick), or they can use device-independent event handlers (e.g. focus, blur, or click) that do not rely on any specific input device.
Key Point: Despite the “click” event being associated with a mouse action, over time it has become a device-independent event handler that works with any device (like how focus and blur events behave).
Suggested Reading:
