ARIA significa Accesible Rich Internet Applications.
Las utilizamos para mejorar la accesibilidad de nuestro sitio web y ponerlo al alcance de personas con discapacidad.
A veces escribir bien el html semantico no es suficiente. Las etiquetas ARIA nos resuelve esto, ayuda a enriquecer nuestro HTML, especialmente si usamos elementos dinámicos generados, por ejemplo, con javascript.
¿Qué es y cómo podemos usarlas?
Son un conjunto de atributos especiales para accesibilidad que pueden añadirse a cualquier etiqueta, pero especialmente adaptado a HTML.
Fue creado por la W3C con el fin que podamos comunicar cambios especiales de nuestras aplicaciones. Esta implementado en la mayoría de los navegadores y lectores de pantallas más populares.
Tiene tres atributos:
- Roles
- Propiedades
- Estados
¿Por qué debemos incluir las etiquetas ARIA en nuestro negocio online?
Imaginate que a tu tienda virtual ingresa una persona con discapacidad visual.
En tu sitio web tienes un carrusel con con todos tus producto más destacados, los que deseas que te compren.
Dime, cómo le indicas a esta persona, ¿Dónde esta el botón de cambiar los productos del carrusel?. Cómo le dices ¿Cuál es el boton de atrás y adelante?
Amigo mío, dejame contarte que aquí entra las etiquetas ARIA. Te van ayudar a resolver esto y hará que tu sitio web, sea accesible.
Como te das cuenta en este ejemplo, no solo basta con agregar el atributo ALT a las imágenes o facilitar la navegación por el teclado. A veces se requiere un recurso adicional.
Empecemos explicando como utilizarlas.
ARIA: Roles
Definen el tipo general del objeto. Le indica al navegador que la etiqueta que estamos usando es un artículo, una notificación, un slider, una imagen o si va a haber mucha o poca interacción.
En el siguiente ejemplo, le indicamos al navegador que el tag anchor, no se va a comportar como un enlace sino como un botón.
<a href="#" role="button">Enlace como botón</a>
Nota: Los Aria ROLE, solo se usan en situaciones muy especificas. Los usamos solamente cuando el HTML semántico se nos queda corto para dar accesibilidad a lo que tenemos.
En este ejemplo, si usamos un button no se necesita usar
role=button, ya que los elementos de botón tienen una semántica nativa fuerte.
ARIA: Propiedades
Comunican atributos que son esenciales para el comportamiento o significado de un elemento pero que suelen comunicar visualmente.
Expliquemolo mejor con el ejemplo del slider.
Necesidad:
Indicarle al navegador cuales son las acciones de los botones que tienen las flechas. Visualmente, nos damos cuenta que una se usa para retroceder y la otra para avanzar el slider.
En el html lo haríamos asi:
ARIA: Estados
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.
De esta manera, el navegador sabe que aunque hay 5 elementos en la lista, solo se esta mostrando tres al usuario.
