F54Funciones que solo se activan con el ratón o con gestos táctiles

Por qué es importante

Las personas ciegas no usan ratón, porque no ven el puntero. Muchas personas con poca movilidad en las manos tampoco. Navegan con el teclado o con dispositivos que imitan al teclado, como teclados adaptados o pulsadores.

Si el botón «Página siguiente» de un catálogo solo reacciona a onmousedown, esas personas no pueden pasar de página. Se quedan atascadas en la primera.

Cómo evitarlo

1. Use elementos nativos que ya funcionan con teclado: <button> para acciones y <a href> para ir a otra página.
2. Use el evento click. En enlaces y botones también se dispara con Intro, y con Espacio en los botones.
3. Evite que una función dependa solo de mousedown, mouseup, dblclick, mouseover o de gestos táctiles.
4. Si usa gestos, como deslizar para pasar fotos, ofrezca también botones que se manejen con teclado.
5. Si crea un control propio, dele foco con tabindex="0" y programe las teclas que la persona espera.

Cómo comprobarlo

1. Deje el ratón a un lado y recorra la página con Tab.
2. Intente usar cada función con Intro, Espacio o las flechas.
3. Si algo solo funciona con el ratón o con el dedo, hay fallo, salvo que dependa del trazo, como una firma a mano.
4. En el código, busque manejadores como onmousedown, ondblclick o touchstart sin equivalente de teclado.

Ejemplo

La flecha de «Página siguiente», primero solo con ratón y después como botón real que también funciona con teclado.

<!-- Incorrecto: solo funciona con el ratón -->
<img src="flecha.svg" alt="Página siguiente" onmousedown="paginaSiguiente()">

<!-- Correcto: funciona con ratón, teclado y tacto -->
<button type="button" onclick="paginaSiguiente()">
  <img src="flecha.svg" alt="Página siguiente">
</button>