ARIA states

Les compartó una lectura sugerida: https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships

Estados de ARIA: Comunican estados y cambios de estados en elementos que se suelen comunicar visualmente.

Añadimos a la etiqueta de <li> el atributo: aria-hidden=“true” para que el lector de pantalla solo lea los elementos visibles en el estado actual de la página.

🗿 ARIA states

Estados de ARIA comunican estados y cambios de estados en elementos que se suelen comunicar visualmente

• Existen veces que mostramos casos que solo pasan cuando algo cambia en la pantalla
  • Impidiendo que personas con discapacidades visuales no podrán notar ese cambio
  • Debemos dar una experiencia del sitio a personas discapacitadas al igual que damos importancia a personas sin ningún problema
• Si tenemos un checkbox
  • Sabemos que esta seleccionado por que está marcado
  • Alguien con discapacidad quizás no pueda ver eso
• Un lector de pantalla no se dará cuenta que algunas cosas no se están mostrando
• Podemos usar el atributo aria-hidden para ocultar algunas cosas de los lectores de pantalla

<li aria-hidden="true">...</li>

RESUMEN: Podemos brindar una experiencia similar a usuarios con discapacidades al igual que usuarios que tienen todos los beneficios físicos, usando estados los cuales comunicarán que cosas se estarán mostrando en pantalla

Además de los estados y propiedades mencionados, existen otros más, aquí los pueden consultar https://www.w3.org/TR/wai-aria-1.0/states_and_properties

Con ChromeVox los items del carrousel se mueven automáticamente hasta el ultimo leyéndolos. Si les agrego el aria-hidden se mueven igualmente pero los deja de leer🤔

En esta parte pienso que al se debería indicar que hay más items en las lista y que mueva el forward button para observar los items que faltan, como se puede hacer esto?

Entonces es mejor poner aria en el primer elemento que lee el lector de pantalla

• Lo importante es que las personas que navegan con un lector de pantalla le demos una experiencia casi igual a las personas que utilizan tecnologías asistivas

Qué son

Comunican estados y cambios de estados en elementos que se suelen comunicar visualmente. Tenemos que comunicar los diferentes estados que tengamos en nuestras aplicaciones a nuestros usuarios

• **aria-hidden="true" → nos ayuda a esconder el contenido del carrusel para que el Voice Over no lo lea cuando aún no hemos tenido interacción con el carrusel**

<li aria-hidden="true"><button><img src="/images/project4.png" class="project project4" alt="Mi cuarto proyecto"></button></li>
          <li aria-hidden="true"><button><img src="/images/project5.png" class="project project5" alt="Mi quinto proyecto" ></button></li>

Yo lo tengo igual que la profe pero mi lector de pantalla me dice que hay 5 elementos. Alguién sabe por qué?

Algunos recursos complementarios:

• ARIA states
• aria-hidden

Estados: Estados de ARIA comunican estados y cambios de estados en elementos que se suelen comunicar visualmente.

<aside aria-hiden="true/false"><nav>etc</nav></aside>

Añadimos a la etiqueta de <li> el atributo: aria-hidden=“true” para que el lector de pantalla solo lea los elementos visibles en el estado actual de la página, entonces si le añadimos display: none; o visibility: hidden; el aside no será considerado por lectores de pantalla ni tampoco por la navegación secuencial del teclado.

Los aria states por medio de qué se pueden cambiar?
En el caso de que, por ejemplo en el carrusel se muestre el objeto que estaba oculto al principo.

Si por ejemplo tuviéramos una tabla con muchísimos campos y esa tabla la tuviéramos paginada, sería necesario usar aria-hidden para los campos que no se muestran todavía porque están en otras páginas de la tabla? Gracias.

¿Cómo sería la interacción cuando le da al botón de mostrar lo que sigue del carrousel?
¿De qué manera puede darse cuenta que ahí hay más por ver, de una manera accesible para la persona que leerá nuestra web? ¿o será mejor no tener objetos ocultos?

perfecto

n