Analizar la compatibilidad con teclado en formularios con DevTools
En este artículo se usa la herramienta Inspeccionar y la pestaña Escuchas 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 el formulario Donar, los botones de cantidad y el botón Donar no funcionan con un 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 herramientas de prueba automáticas como la herramienta Problemas. En este ejemplo, los botones se implementan mediante elementos, que estas herramientas no reconocen como div un control en un formulario.
Para usar la herramienta Inspeccionar y la pestaña Escuchas de eventos para analizar la falta de compatibilidad con el teclado en la página de demostración:
Abra la página web de demostración de pruebas de accesibilidad en una nueva pestaña del explorador y, a continuación, seleccione F12 para abrir DevTools.
Seleccione el botón Inspeccionar ( Inspeccionar icono ) en la esquina superior izquierda de DevTools para que el botón esté
(azul).Mantenga el mouse sobre los botones de donación 50, 100y 200. La herramienta Inspeccionar aparece en la página web, como una superposición. La fila centrada en el teclado de la superposición Inspeccionar muestra que ninguno de los botones de cantidad de donación es accesible para el teclado, como indica un círculo gris con línea diagonal. Los botones no tienen nombre y tienen un rol de porque son elementos, lo que significa que los botones no son accesibles para la tecnología
genericdivde asistencia.
Al inspeccionar los botones del formulario, se muestra que no son accesibles con tecladoCuando la herramienta Inspeccionar esté activa, en la página web, seleccione el cuadro de texto Otra entrada, 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 elementos and en el cuadro de texto Otros es válido, lo que significa que la etiqueta Otros está vinculada
labelinputcorrectamente con el cuadro de texto de entrada. **** **** Elinputcuadro de texto también es accesible con teclado. El resto del marcado del formulario son elementos, que son fáciles dedivaplicar, pero que no tienen ningún significado semántico.La funcionalidad del formulario se crea con JavaScript y puede probarla comprobando la pestaña Escuchas de eventos, de la siguiente manera.
Con el elemento aún seleccionado en el árbol DOM, seleccione la pestaña Escuchas de eventos a la derecha de la pestaña Estilos y, a
<input id="freedonation" class="smallinput">continuación, expanda la escucha de **** ****clickeventos.Seleccione el
buttons.js:18vínculo. Se abre la herramienta Orígenes, que muestra el 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!')
}
})
Usar un click evento para leer los botones es una buena práctica, ya que un evento se dispara tanto en la interacción con el puntero del mouse como con el click teclado. Sin embargo, como un elemento no es accesible para teclado y este botón Donar se implementa como un elemento ( ), esta funcionalidad de JavaScript nunca se ejecuta a menos que use un mouse u otro origen de un evento, como un botón especial disponible en algunos div **** div <div class="submitbutton">Donate</div> click teclados.
Este es un ejemplo clásico en el que Se agregó JavaScript para crear funciones button que los elementos proporcionan de forma nativa. La simulación de la funcionalidad de los div botones con elementos acabó produciendo una experiencia inaccesible.