¿Qué es el Marcado WAI ARIA? Guía para Principiantes

La accesibilidad es un problema importante en el mundo online actual. Hoy en día, se considera inaceptable tener un sitio web por el que muchas personas tienen dificultades para navegar.

El marcado ARIA es un paso en la dirección correcta. Es la respuesta a cómo puedes hacer que tu sitio web sea más accesible para las personas con discapacidad.

¿Qué es ARIA? Un conjunto de atributos de código que amplía las capacidades de HTML y facilita la optimización de tu sitio para los lectores de pantalla. Para ello, hace visibles para las tecnologías de asistencia partes de tu sitio web con las que, de otro modo, estos dispositivos no podrían interactuar en absoluto.

¿Está preparado para incorporar ARIA a tu sitio web? ¿O simplemente tienes curiosidad por saber más al respecto? En este artículo, te explicaré qué es ARIA, cómo hacer que tu sitio sea accesible y te proporcionaremos recursos para aprender más sobre esta valiosa tecnología.

¿Por qué hacer Accesible tu Sitio Web?

Algunas personas se preguntarán: ¿por qué preocuparse por la accesibilidad a Internet? ¿Realmente vale la pena dedicar los recursos para conocer las especificaciones, como ARIA? ¿Construir un sitio web accesible tiene realmente un gran impacto?

La discapacidad no es infrecuente

De hecho, lo es. La discapacidad no es tan infrecuente. Con datos de la Organización Mundial de la Salud -OMS- 2.000 millones de personas en todo el mundo viven con discapacidad o ceguera, y al menos 1.100 millones de personas viven sin visión por problemas oculares.

Esto significa que muchas personas pueden tener problemas para navegar por los sitios web y pueden depender de herramientas como un lector de pantalla.

Las personas con discapacidad necesitan Internet tanto como cualquier otra persona. Muchos la utilizan para comprar, socializar y buscar información. A veces es su principal, o incluso su única, forma de hacerlo.

Dar a las personas con discapacidad un acceso sin restricciones para navegar por la web debería ser un objetivo importante para cualquier desarrollador web.

La accesibilidad se solapa con el buen diseño web y el SEO

Un sitio web que sigue las normas de accesibilidad suele utilizar buenos principios de diseño web, se comporta mejor en los dispositivos móviles y ocupa un lugar destacado en el SEO.

Por ejemplo, una de las normas WCAG incluye la reproducción no automática de clips largos de audio sin una forma de detener el sonido. Esto ya es un gran problema para los diseñadores de páginas web. Otra norma es garantizar un contraste de color suficiente entre los elementos. Los colores que se mezclan en un sitio web suelen indicar una paleta pobre.

En consecuencia, las siguientes pautas de accesibilidad conducen a un sitio que tiene mejor aspecto y es más fácil de usar. ¿Alguien puede decir que esto es ganar-ganar?

La accesibilidad también es una parte importante del SEO. Eludirlo puede conducir a penalizaciones en el ranking de Google y otros motores de búsqueda.

Una cosa que puedes hacer es implementar ARIA en tu diseño para que las personas con lectores de pantalla puedan encontrar mejor su camino a través de su sitio.

¿Qué es un lector de pantalla?

Un lector de pantalla es un programa que lee el contenido de una página o documento en voz alta, permitiéndote navegar por él mediante el teclado. Cualquiera puede descargarse uno en su ordenador y hay varios programas disponibles de forma gratuita o de pago.

Algunos de ellos también te ayudan a navegar por el escritorio y otros programas, así como por los sitios web. Pueden ampliar el texto y las imágenes para los discapacitados visuales y algunos pueden salir en una pantalla Braille actualizable.

Sin lectores de pantalla, los discapacitados visuales tendrán dificultades para utilizar los ordenadores e internet, o no podrán utilizarlos en absoluto.

El marcado ARIA desempeña un papel importante en el funcionamiento de estas herramientas. Proporciona información adicional, dándoles más opciones y la posibilidad de interactuar con partes de la interfaz de usuario que de otro modo serían invisibles para ellos.

Pero, ¿qué es la ARIA y cómo puedes mejorar tu sitio web al activarla? Hagamos un rápido desglose de esta especificación y de su funcionamiento.

¿Qué es ARIA?

ARIA son las siglas de Accessible Rich Internet Applications. Se trata de un conjunto de atributos que proporcionan un contexto adicional sobre cómo está diseñada una página web y qué hay en ella. En otras palabras, dan más información sobre partes de la interfaz de usuario, como alertas emergentes, menús o incluso secciones enteras de la página.

Si alguna vez has mirado un sitio web utilizando las herramientas de desarrollo del navegador, es posible que lo hayas visto antes.

En consecuencia, ARIA permite crear interfaces y widgets accesibles sin ni siquiera cambiar su aspecto o actuación en el front-end. La mayoría de la gente ni siquiera podrá darse cuenta de que el marcado está presente. Pero, añade algo de código y los lectores de pantalla podrán interactuar con tu interfaz sin problemas.

Hasta finales de 2021, hay dos versiones completas de WAI-ARIA:

• WAI-ARIA 1.0  se publicó como Recomendación W3C completa en 2014.
• WAI-ARIA 1.1  se publicó como Recomendación del W3C completa en 2017.
• WAI-ARIA 1.2  está actualmente en desarrollo e incluirá múltiples características nuevas.

¿Cuándo es Realmente Necesaria ARIA?

Por defecto, los lectores de pantalla pueden entender la mayoría de los elementos de HTML y HTML5. Si tienes un sitio muy sencillo y estático, es posible que no necesites implementar ARIA en absoluto. Pero, algunos elementos dinámicos e interactivos de JavaScript no pueden ser vistos por los lectores de pantalla, y aquí es donde entra en juego el marcado.

Por otro lado, no debes utilizar ARIA cuando lo que está definiendo ya está disponible. Por ejemplo, un elemento HTML button es reconocido por los lectores de pantalla. No debería tener un papel ARIA. Sólo debes incluir funciones si no utilizas elementos HTML compatibles con los dispositivos de asistencia.

¿Sigues confundido? Hablemos un poco más de cómo funciona ARIA. También puedes introducirte a su uso, en este artículo.

Entender ARIA

Las cosas pueden complicarse mucho con ARIA, y es fácil sentirse abrumado. Pero, lo básico es bastante fácil de desglosar. Una vez que los entiendas, aprender los conceptos más avanzados será un juego de niños.

El marcado de ARIA consta de tres atributos: roles, estados y propiedades.

Roles de Aria

Las funciones definen los elementos de una página, como los botones y las casillas de verificación. Ayudan a los lectores de pantalla a saber qué hacen las partes de la página, y tienen seis subcategorías diferentes: roles de estructura del documento, de referencia, de widget, de ventana, live region y abstractos.

• Roles de referencia – Dividir el sitio en diferentes secciones como el contenido principal, la navegación y las áreas adicionales. Esto puede ayudar a los visitantes a orientarse y a encontrar más fácilmente lo que buscan en la página.
• Roles de estructura del documento – Describe secciones específicas de la página, como artículos, documentos, listas y filas.
• Roles de widget – Definir elementos e interfaces. Pestañas, cuadros de texto, alertas y botones son algunos de los elementos que ARIA puede describir. Cuando el HTML no define estos elementos, o estás usando un widget de muchas partes diferentes, los roles de los widgets pueden ayudar.
• Roles de ventana – Definen subventanas a la ventana principal del documento, dentro de la misma ventana, como cuadros de diálogo modales emergentes:
• Roles Live Region – Los roles de Live Region se utilizan para definir elementos con contenido que se cambiará dinámicamente.
• Roles abstractos – Estos son utilizados por el navegador. No tienes que preocuparte por ellos.

Estados y propiedades de Aria

Los estados y las propiedades funcionan de la misma manera entre sí. Una vez establecidas, las propiedades rara vez cambian, ya que sólo describen las relaciones con otros elementos. Los estados son dinámicos y pueden cambiar por sí mismos o en interacción con el usuario.

Un ejemplo de estado es aria-busy, que indica al lector de pantalla que el elemento se está actualizando. Otra es aria-pressed , que indica que se ha pulsado un botón. Son elementos que pueden cambiar activamente.

Por otro lado, las propiedades incluyen atributos como aria-valuemax que establece el número máximo en el selector de rango, o indica aria-haspopup que el elemento provocará una ventana emergente. Es poco probable que se actualicen.

Y esto es lo básico de ARIA. Mucho más fácil una vez que se ha explicado, ¿no? Pero te sorprendería lo mucho que puedes hacer con él.

Para obtener más información, consulta la documentación oficial de WAI-ARIA o la Introducción a ARIA para desarrolladores de Google.

Pruebas de Disponibilidad de ARIA

Una vez que hayas implementado ARIA, puedes asegurarte de que todo funcione correctamente. ¿Cómo se ve tu sitio web en los dispositivos de asistencia?

La forma más obvia es descargarte un lector de pantalla gratuito, como NVDA, vendarte los ojos e ir al grano. Esto te permitirá disfrutar de una experiencia completa.

También puedes omitir la venda de los ojos y limitarte a señalar los elementos en los que quieres probar los atributos ARIA, pero te perderás información clave como la dificultad de encontrar estos elementos.

Incluso eso no es una representación perfecta de lo que sería utilizar un lector de pantalla, ya que se necesita mucha práctica para aprender, así que es mejor pedir a los usuarios reales que prueben tu sitio.

También hay muchas herramientas de inspección, como el inspector de accesibilidad de Firefox, que permiten ver información sobre los elementos seleccionados. WAVE indica varios errores, incluso con ARIA.

Por último, esta lista de comprobación del widget ARIA (ARIA Widget Checklist) es una gran auditoría mientras se diseña.

Otras formas de hacer Accesible tu Sitio Web

El marcado ARIA es sólo el principio cuando se trata de la accesibilidad web. Hay muchas otras normas que debes seguir para que tu sitio web sea accesible a personas con discapacidades visuales, auditivas, de movilidad y de otro tipo.

He aquí algunos ejemplos de algunas pautas que debes seguir:

• Los contenidos de la web son responsivos y funcionan cuando se amplían.
• El sitio web y sus elementos sólo pueden utilizarse con un teclado.
• El texto está correctamente contrastado con los fondos.
• Todo el material no textual contiene textos alternativos, incluidos los subtítulos/transcripciones de audio y vídeo.
• Asegúrate de que la mayoría de las imágenes tengan un texto alternativo descriptivo y que las imágenes decorativas tengan un texto alternativo en blanco.
• Ninguna información se transmite únicamente a través de la vista, el sonido o el color.
• Evitar la reproducción automática de sonido sin proporcionar un botón de silencio.
• Los elementos que se mueven automáticamente pueden ser pausados o detenidos.

Estas son sólo algunas de las cosas que puedes hacer para que tu sitio web sea realmente accesible. Si esto te parece demasiado, prueba con una sencilla lista de comprobación de la accesibilidad. Utilízala como base para tu diseño antes de pasar a unas directrices WCAG más detalladas.

Garantizar que tu Sitio Web es Adecuado para Todos

Evitar la accesibilidad puede tener un impacto negativo en tu base de usuarios e incluso en tu reputación. Las personas con discapacidad constituyen un gran porcentaje de usuarios de Internet, y es importante que la mayor parte de la red no les esté vedada.

Al aplicar las normas de accesibilidad, incluido el marcado ARIA, se permite que los lectores de pantalla vean más páginas web y que tu sitio web crezca lo máximo posible.

Una vez que sepas cómo incorporar especificaciones como ARIA, la accesibilidad te parecerá mucho menos confusa. Facilitar el uso de tu sitio a todo el mundo significa que más gente está dispuesta a quedarse, así que no hay razón para no utilizar ARIA si tu sitio lo necesita. Muchos themes también lo ofrecen de forma inmediata.