Análisis de la compatibilidad del teclado en formularios

En este artículo se usa la herramienta Inspeccionar y la pestaña Agentes de escucha de eventos para analizar la falta de compatibilidad con el teclado en una página de demostración que tiene botones que usan el <div> elemento .

En la página web de demostración de pruebas de accesibilidad, en el formulario Donar , los botones de cantidad y el botón Donar no son accesibles con un teclado. Para probar esto:

1. Abra la página web de demostración de pruebas de accesibilidad en una nueva ventana o pestaña.

2. En la sección Ayuda con una donación , haga clic en el cuadro de texto Otros para centrarse en él.

3. Intenta presionar Tab o Mayús-Tab para mover el foco a los botones Donar, 50, 100 o 200 . Los botones no son accesibles mediante teclado.

La depuración del formulario de donación requiere comprender por qué la falta de estilo de foco no se marca como un problema con las herramientas de pruebas automáticas , como la herramienta Problemas. En este ejemplo, los botones se implementan mediante <div> elementos HTML, que estas herramientas no reconocen como controles de formulario.

Analizar la falta de compatibilidad con el teclado mediante la herramienta Inspeccionar

Para usar la herramienta Inspeccionar para analizar la falta de compatibilidad con el teclado en la página de demostración:

1. Abra la página web de demostración de pruebas de accesibilidad en una nueva ventana o pestaña.

2. Haga clic con el botón derecho en cualquier lugar de la página web y, a continuación, seleccione Inspeccionar.

3. Haga clic en el botón Inspeccionar () en la esquina superior izquierda de DevTools para que el botón esté resaltado (azul).

4. Mantenga el puntero sobre el botón de donación de 50, 100 y 200 . La herramienta Inspeccionar aparece en la página web, como una superposición. La fila que se puede centrar en el teclado de la superposición Inspeccionar muestra que ninguno de los botones de cantidad de donación es accesible mediante teclado, como se indica en un círculo tachado gris:

   

   Los botones no tienen nombre y tienen un rol de generic porque son <div> elementos, lo que significa que los botones no son accesibles para la tecnología de asistencia.

5. Cuando la herramienta Inspeccionar esté activa, en la página web, seleccione el cuadro de texto Otras entradas, encima del botón Donar . Se abre la herramienta Elementos , que muestra el árbol DOM de la página web. El elemento <input id="freedonation" class="smallinput"> está seleccionado.

   <div class="donationrow">
       <div class="donationbutton">50</div>
       <div class="donationbutton">100</div>
       <div class="donationbutton">200</div>
   </div>
   <div class="donationrow">
       <label for="freedonation">Other</label>
       <input id="freedonation" class="smallinput">
   </div>
   <div class="donationrow">
       <div class="submitbutton">Donate</div>
   </div>
   

   El uso de los <label> elementos y <input> en el cuadro de texto Otros es válido, lo que significa que la etiqueta Other está vinculada correctamente con el cuadro de texto de entrada. El <input> cuadro de texto también es accesible mediante teclado. El resto del marcado del formulario usa <div> elementos, que son fáciles de aplicar con CSS, pero no tienen ningún significado para la tecnología de asistencia y no son accesibles mediante teclado.

Analizar la falta de compatibilidad con el teclado mediante la pestaña Agentes de escucha de eventos

La funcionalidad del formulario se crea mediante JavaScript y puede probarla comprobando la pestaña Agentes de escucha de eventos, como se indica a continuación:

1. Abra la página web de demostración de pruebas de accesibilidad en una nueva ventana o pestaña.

2. Haga clic con el botón derecho en el cuadro de texto Otros de la página web y, a continuación, seleccione Inspeccionar. Se abre la herramienta Elementos y se selecciona el <input id="freedonation" class="smallinput"> elemento .

3. Con el elemento <input id="freedonation" class="smallinput"> aún seleccionado en el árbol DOM, seleccione la pestaña Agentes de escucha de eventos a la derecha de la pestaña Estilos y, a continuación, expanda el agente de escucha de click eventos.

   

4. Haga clic en el buttons.js:18 vínculo. Se abre la herramienta Orígenes , que muestra el JavaScript aplicado:

   

   Este es un listado de código del JavaScript aplicado:

   donations.addEventListener('click', e => {
     let t = e.target;
     if (t.classList.contains('donationbutton')) {
       if (currentbutton) { currentbutton.classList.remove('current'); }
       t.classList.add('current');
       currentbutton = t;
       e.preventDefault();
     }
     if (t.classList.contains('submitbutton')) {
       alert('Thanks for your donation!')
     }
   })
   

El uso de un click agente de escucha de eventos para ejecutar código cuando se usa un botón es una buena práctica, ya que un click evento se desencadena tanto en el puntero del mouse como en la interacción con el teclado. Sin embargo, el botón Donar se implementa mediante un <div> elemento HTML, que no se puede centrar con el teclado. El click evento solo se ejecuta cuando se usa un mouse u otro origen de un click evento, como un botón especial que está disponible en algunos teclados.

Este es un ejemplo clásico en el que se agregó JavaScript para volver a crear la funcionalidad que <button> proporcionan los elementos de forma nativa. La simulación de la funcionalidad de los botones mediante el uso <div> de elementos terminó produciendo una experiencia inaccesible.