Addaw, ir a inicio Donar

Técnica Técnicas generales WCAG 2.2

G202Hacer que todas las funciones se puedan usar con el teclado

Nombre oficial en el W3C: Garantizar el control por teclado de toda la funcionalidad

En pocas palabras

Todo lo que se puede hacer en la página con el ratón o el dedo también debe poder hacerse solo con el teclado. Incluye menús, botones, formularios, arrastrar elementos o añadir productos al carrito. No hace falta que cada control funcione con teclado si hay otra forma de hacer lo mismo.

Por qué es importante

Muchas personas no usan ratón. Las personas ciegas navegan con el teclado. Otras usan pulsadores, teclados en pantalla o programas de control por voz, y todos ellos funcionan como si fueran un teclado.

Si una función solo responde al ratón, esas personas no pueden completarla. Por ejemplo, no pueden abrir el menú, pedir una cita o pagar. Es un requisito de nivel A (criterio 2.1.1).

Cómo se hace

  1. Haga una lista de lo que se puede hacer en la página: enlaces, menús, campos, pestañas, ventanas emergentes, arrastrar y soltar, chat, carrito, etc.
  2. Use elementos nativos de HTML, como <button>, <a href> o <select>. Ya funcionan con teclado sin código extra.
  3. Lo que ocurre al pasar el ratón por encima debe ocurrir también al llegar con el tabulador.
  4. Si algo se hace arrastrando, ofrezca otra vía con teclado. Por ejemplo, botones «Subir» y «Bajar» para reordenar una lista.
  5. En móvil, el menú hamburguesa debe abrirse y recorrerse también con un teclado externo o un pulsador.
  6. Indique los atajos de teclado especiales para que la gente sepa que existen.

Cómo comprobarlo

  1. Deje el ratón a un lado y recorra la página con Tab y Mayús+Tab.
  2. Active cada control con Intro o Espacio, y use las flechas en menús, pestañas y listas.
  3. Intente completar las tareas principales de principio a fin: buscar, rellenar un formulario, comprar.
  4. Anote cualquier función a la que no se pueda llegar o que no responda.

Ejemplo

Un div con clic solo responde al ratón; un botón real responde también a Intro y Espacio.

<!-- Mal: no recibe el foco ni responde al teclado -->
<div class="boton" onclick="abrirMenu()">Menú</div>

<!-- Bien: botón nativo, funciona con teclado -->
<button type="button" onclick="abrirMenu()">Menú</button>

Para saber más, en nuestro blog

  • Tipos de discapacidad y accesibilidad web

    Este artículo explora cómo garantizar la accesibilidad web para personas con diferentes tipos de discapacidades.

  • Principios de las WCAG

    Los cuatro principios rectores de las WCAG establecen que los contenidos web deben ser Perceptibles, Operables, Comprensibles y Robustos (POCR).

  • Introducción a la accesibilidad web

    La accesibilidad web trata de crear contenido web y diseños que puedan ser utilizadas por todos, independientemente de su habilidad.

Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica G202 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

Todas las tecnologías que admiten el funcionamiento interactivo.

Descripción

El objetivo de esta técnica es proporcionar manejo por teclado para toda la funcionalidad de la página. Cuando toda la funcionalidad del contenido puede manejarse mediante un teclado o una interfaz de teclado, pueden utilizarla tanto las personas sin visión como quienes deben usar teclados alternativos o dispositivos de entrada que actúan como emuladores de teclado, por ejemplo, programas de entrada por voz o teclados en pantalla.

Una interfaz de teclado permite a los usuarios proporcionar entradas de pulsaciones de teclas a los programas aunque el dispositivo informático que utilizan no disponga de un teclado físico. Por ejemplo, muchos dispositivos móviles tienen interfaces de teclado en su sistema operativo, además de la opción de conectar teclados inalámbricos externos. Las aplicaciones pueden utilizar la interfaz para obtener entradas de teclado tanto de un teclado externo como de otros servicios que proporcionan una salida de teclado simulada, como los conmutadores, los intérpretes de escritura manual o las aplicaciones de conversión de voz a texto.

Para implementar esta técnica, determine primero qué funcionalidad está disponible para los usuarios en la página. En este paso es importante tener en cuenta las funciones que se realizan usando el ratón y el teclado conjuntamente. Son ejemplos de funcionalidad el uso de controles físicos como enlaces, menús, botones, casillas de verificación, botones de opción y campos de formulario, así como el uso de características como arrastrar y soltar, seleccionar texto, cambiar el tamaño de regiones o mostrar menús contextuales. Otros ejemplos de funcionalidad pueden basarse en tareas como añadir o quitar un artículo del carrito de la compra o iniciar una sesión de chat con un representante comercial.

Una vez determinada la funcionalidad del contenido, el autor verifica que cada una de las funciones identificadas puede realizarse utilizando únicamente el teclado.

Esto no significa necesariamente que cada uno de los controles individuales pueda utilizarse desde el teclado, siempre que en la página existan varios métodos para realizar la misma función. Se aconseja a los autores que consideren cómo descubrirán los usuarios los equivalentes de teclado disponibles.

Ejemplos

  • Una página con imágenes utilizadas como enlaces cambia cuando el usuario pasa el ratón por encima de la imagen. Para ofrecer a los usuarios de teclado una experiencia similar, la imagen también cambia cuando el usuario llega a ella con la tecla de tabulación.
  • Una página que permite a los usuarios hacer clic y arrastrar los elementos de una lista para reordenarlos incluye también una serie de controles que permiten a los usuarios de teclado mover los elementos hacia arriba, hacia abajo o al principio y al final de la lista.
  • La versión móvil de un sitio web incluye un botón de menú que se pulsa para abrir el menú del sitio, implementado como una capa superpuesta flotante. Para dar acceso a las personas que utilizan teclados externos o conmutadores con su dispositivo móvil, tanto el botón de menú como el menú del sitio se implementan de modo que puedan manejarse mediante la interfaz de teclado del dispositivo móvil.

Pruebas

Procedimiento

  1. Identificar toda la funcionalidad del contenido.
  2. Comprobar que se puede acceder a toda la funcionalidad utilizando únicamente el teclado o la interfaz de teclado.

Resultados esperados

  • La comprobación n.º 2 es verdadera.

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica G202 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.