This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Accessibility
Why should mouse, finger, pen and keyboard work at the same time?
Some sites decide when loading whether a device has touch, and then turn off the mouse control, or vice versa. A tablet with keyboard, a laptop with touchscreen, a person who changes between pen and voice control: For them, the operation breaks. Criterion 2.5.6 of Level AAA requires that a website does not exclude any type of input and allows switching at any time.
What the Criterion Requires
The site does not limit operation to one type of input, unless the restriction is necessary for security or chosen by the visitor. Mouse, touch, pen, keyboard and auxiliary technology that simulates them work side by side and alternately. Violations are almost always caused by scripts: a “touch device” detection when loading, which turns off hover menus; Event handling only for touch events without click; Lock the keyboard in a widget because “here you operate with your finger”.
For whom this counts
People with motor disabilities often change the type of input per task: keyboard to write, touch to navigate, voice control for commands. People with switches or head mouse work with auxiliary technology, which reports as a mouse, sometimes as a keyboard. Anyone who locks an input type locks it out. By the way, it affects anyone with a laptop that has touchscreen and trackpad.
This is how we deal with it
The measurement finds scripts branching to touch detection and elements with event handling only for one input type, and displays them as an indication. If the change of input types works, a person checks with a device that has several. The criterion belongs to the category AAA in knowledge.
Examples
Touch recognition turns off the mouse
if ("ontouchstart" in window) {
document.body.classList.add("touch"); // Hover-Menüs aus, Maus-Ereignisse ignoriert
}element.addEventListener("pointerdown", start);
element.addEventListener("pointerup", ende);
element.addEventListener("click", ausloesen);
// keine Verzweigung nach Gerät: jede Eingabe, die kommt, wird verarbeitetA laptop with touchscreen and a person with voice control change the input type at any time.
- Use the pointer events (pointerdown, pointerup, click) instead of separate mouse and touch events.
- Never branch to “Touch Device” or “Desktop” when loading; respond to the input that’s coming.
- Make sure that each touch gesture also goes by click and keyboard (criterion 2.5.1).
- Test on a laptop with touchscreen: mouse, finger, keyboard alternately on the same page.
