Mi escuela está usando el código de tarjeta invertida de W3Schools para la interactividad en nuestras páginas de clase, con algo de JavaScript agregado para mantener las tarjetas invertidas cuando se hace clic o se toca. Sin embargo, no creo que sean accesibles para los lectores de pantalla. Parece que necesitan algún código ARIA, y soy muy nuevo en ARIA. ¿Cómo puedo asegurarme de que los estudiantes que usan lectores de pantalla puedan usar las tarjetas invertidas?
Agregué un código ARIA, pero no estoy seguro de si es correcto o útil. ¿Tiene sentido que la parte delantera controle la parte trasera y viceversa? También estoy usando JavaScript para alternar el aria expandido entre verdadero y falso cuando se voltean las cartas.
<div class="flip-card"> <div class="flip-card-inner" tabindex="0"> <div class="flip-card-front" role="button" aria-expanded="true" id="flip-card-front_4" aria-controls="flip-card-back_4"> <p>Front of card</p> </div> <div class="flip-card-back" role="button" aria-expanded="false" id="flip-card-back_4" aria-controls="flip-card-front_4"> <p>Back of card</p> </div> </div> </div>En realidad, no necesita ningún ARIA, lo cual es bueno porque la primera regla de ARIA es no usar ARIA si puede evitarlo.
Hice dos pequeños cambios en el ejemplo y funcionó con un teclado y se leyó bien con un lector de pantalla.
Cambié
.flip-card:hover .flip-card-inner {a
.flip-card:hover .flip-card-inner, .flip-card:focus .flip-card-inner {para que obtenga la animación de volteo al pasar el mouse o al enfocar el teclado.
Luego agregué tabindex="0" a la tarjeta invertida para que pudieras tabularla .
<div class="flip-card" tabindex="0">Con un lector de pantalla en ejecución, al pasar a la tarjeta invertida, escuchará todo el contenido de texto de la tarjeta. Para NVDA , escucho:
"Gráfico de Avatar John Doe encabezado nivel 1 Arquitecto e ingeniero Nos encanta ese tipo"
JAWS es similar pero marginalmente diferente:
"Avatar John Doe Arquitecto e ingeniero Nos encanta ese tipo Gráfico"
No funciona tan bien con Voiceover en iOS. Puede deslizar el dedo hacia la imagen y luego tocar dos veces para voltearla, pero solo dice "avatar". Pero si continúa deslizando, puede escuchar el nombre y el título del trabajo. Simplemente no sabes que la tarjeta se volteó cuando la tocaste.
La pieza de usabilidad que falta es el papel de la tarjeta. ¿Cómo sabe un usuario que la tarjeta se va a voltear cuando recibe el foco del teclado? No hay un rol estándar que se ajuste a este comportamiento, por lo que es posible que deba usar `aria-roledescription' para darle una descripción decente.
<div class="flip-card" tabindex="0" aria-roledescription="flipping card">También eche un vistazo a este patrón de diseño de tarjeta . No estoy seguro si habla de voltear cartas, pero tiene buena información.