Operable · 2.5 Input Modalities
Content must not restrict the use of input modalities available on the platform, such as switching between touch, mouse, keyboard and stylus, except where the restriction is essential, needed for security, or needed to respect user settings.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Press Add to cart with the mouse, then Tab to it and press Enter. If you have a touch screen, tap it too. Then switch to Fails.
The tools follow the version you last used.
What happened
Why it passes
The button answers touch, mouse and keyboard, so someone who uses a tablet with a keyboard, or picks up a mouse when their hands are tired, can finish buying.
Why it fails
The button listens only for touch. A mouse click or the Enter key does nothing, so a person who uses a keyboard with their tablet cannot buy the shoes.
Examples
Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
Fails
Live preview
// Mouse clicks and the Enter key never fire touchend, so they do nothing.const add = document.getElementById('add-to-cart');add.addEventListener('touchend', (e) => { e.preventDefault(); addToCart('trail-shoes');});Only touch works. Someone who uses a keyboard or mouse with their tablet, or a switch that acts as a keyboard, cannot add the item.
Passes
Live preview
// click fires for a tap, a mouse click, a pen tap, and Enter or Space.const add = document.getElementById('add-to-cart');add.addEventListener('click', () => { addToCart('trail-shoes');});One click handler serves every input on the device, so people can switch between touch, mouse and keyboard at any moment.
Fails
Live preview
// On a laptop with a touch screen, the mouse and keyboard stop working here.const eventName = navigator.maxTouchPoints > 0 ? 'touchend' : 'click';document.querySelectorAll('.gallery-next').forEach((btn) => { btn.addEventListener(eventName, showNextPhoto);});The script picks touch as soon as it finds a touch screen and never listens for clicks, so the other inputs on the same device are shut out.
Passes
Live preview
/* Bigger targets when any coarse pointer is present; every input still works. */@media (any-pointer: coarse) { .gallery-next { min-width: 48px; min-height: 48px; }}Adjusting the layout for touch is fine, as long as the controls keep answering the mouse, the keyboard and a pen as well.
Why it matters
People who combine inputs, such as a keyboard attached to a tablet, a switch alongside touch, or speech with a mouse, can use whichever method suits them at any moment.
W3C: Understanding 2.5.6Level AAA
Level AAA is the highest level. It is not required for whole sites, but it is worth meeting where you can.
Where it is required
No law on this site requires Level AAA criteria for whole sites.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures