Herramientas como los lectores de pantalla y las alternativas al teclado ayudan a muchas personas a acceder a Internet. Sin embargo, algunos sitios web no están optimizados para estas interacciones. ARIA puede ayudar.
Cómo usar ARIA: una guía para principiantes
Las aplicaciones enriquecidas de Internet accesibles (ARIA) hacen que los sitios web sean más accesibles para personas con discapacidad. Aprende a usar ARIA y descubre por qué es tan importante.
Herramientas como los lectores de pantalla y las alternativas al teclado ayudan a muchas personas a acceder a Internet. Sin embargo, algunos sitios web no están optimizados para estas interacciones. ARIA puede ayudar.
La navegación por teclado es fundamental para quienes no pueden usar un ratón u otro dispositivo señalador. Asegurarse de que los elementos habilitados para ARIA respondan a las teclas Tab, Enter y Espacio ayuda a que todos se desplacen sin problemas por tu sitio.
Datos recientes de WebAIM revelan que el 95% de las páginas de inicio de los sitios web no cumplen con las Pautas de Accesibilidad para el Contenido Web (WCAG), y solo el 33,6% de las páginas contienen menos de 10 errores de accesibilidad. A pesar de estas preocupantes estadísticas, muchos expertos predicen mejoras significativas en los próximos años. Es esencial que sigamos avanzando para garantizar que todos puedan acceder a la información en línea sin barreras.
Existen formas de abordar estas preocupaciones. Las aplicaciones enriquecidas de Internet accesibles, o ARIA, ayudan a que tu sitio web sea compatible con tecnologías de asistencia. Incluir ARIA en tu código indica a los lectores de pantalla y otras herramientas cómo interactuar con el contenido de tu sitio web y presentarlo correctamente.
Implementar ARIA distingue a tu sitio web y permite que una audiencia más amplia interactúe con tu contenido. Exploremos cómo usar ARIA y por qué es esencial en el proceso de desarrollo web.
¿Qué es ARIA?
ARIA es un conjunto de roles y atributos HTML que hacen que los sitios web sean más accesibles para personas con discapacidad. El World Wide Web Consortium (W3C) lo creó bajo la Iniciativa de Accesibilidad Web (WAI) a principios de la década de 2000 para solucionar la falta de una verdadera accesibilidad web en la codificación de los sitios.
ARIA es un tipo de HTML semántico, que etiqueta y define las diferentes partes del contenido de un sitio web dentro de su código. Cada fragmento de marcado ARIA ayuda a los navegadores y desarrolladores a entender la función de un elemento. Los roles, estados y propiedades de ARIA —elementos en el código que activan las funciones de ARIA— permiten a los desarrolladores adaptar las páginas web para las tecnologías de asistencia.
Muchas herramientas de asistencia, como los lectores de pantalla y el control por voz, interactúan mejor con los sitios web cuando el HTML incluye reglas ARIA, indicando a un lector de pantalla, por ejemplo, dónde está un botón o qué hace, para que los visitantes con discapacidad visual puedan seguir utilizándolo.
¿Por qué usar ARIA?
Usar ARIA en tu código brinda acceso a tu contenido a una audiencia más amplia. También puede garantizar que tus proyectos cumplan con las normas de accesibilidad web como las WCAG, otra de las mejores prácticas de la WAI.
La WAI enumera diversas capacidades y barreras que podrían afectar la forma en que diferentes personas experimentan la web. Por ejemplo, alguien con fotosensibilidad podría tener una reacción negativa a las animaciones parpadeantes, mientras que alguien con una discapacidad auditiva podría no obtener información de un video que carece de subtítulos.
Para ayudarte a cumplir con estas pautas de diseño de accesibilidad, ARIA se basa en los fundamentos del HTML semántico al permitir una gama más amplia de accesibilidad en la navegación, avisos de formularios, descripciones de widgets y mensajes de error, por nombrar algunos.
ARIA no puede hacer que tu sitio web sea accesible para todos, pero reduce la cantidad de barreras dentro de tu código. Considera las necesidades de una audiencia más amplia sin comprometer la función del sitio, permitiendo que más personas accedan al contenido de tu sitio web, lean tu blog, exploren tu portafolio o completen cualquier conversión que busques.
Cómo usar ARIA
Para usar ARIA, incorpora sus roles y atributos en el código existente o nuevo. Aquí te explicamos cómo hacerlo sin complicar ni romper el sitio web.
Roles ARIA
Los roles ARIA son atributos HTML que se aplican a elementos existentes en el código. Sirven para nombrar e identificar estos elementos —formularios, tablas, imágenes— de modo que la tecnología de asistencia pueda entenderlos y mostrarlos correctamente.
Puedes añadir estos roles a tu código HTML usando etiquetas div y el atributo role para indicar qué elemento de la página está resaltando el código ARIA.
Cada rol tiene una función distinta, así que asegúrate de usar el correcto. Etiquetar mal los elementos podría romper tu código y afectar negativamente la experiencia de usuario (UX).
Estos roles tienen cuatro clasificaciones:
- Los roles abstractos establecen las bases para otros roles (por ejemplo, widget, landmark, window, command).
- Los roles de widget definen elementos interactivos como alert, button, scrollbar, tab y textbox
- Los roles de estructura de documento organizan el contenido de la página web, como article, toolbar, row, directory y list.
- Los roles de punto de referencia (landmark) definen puntos de navegación (como role, application, form y main) para diferentes regiones de la página.
Estados y propiedades ARIA
Los estados y propiedades ARIA complementan a los roles ofreciendo más información sobre la funcionalidad de la página. Los estados son un tipo de atributo que puede cambiar con el tiempo, mientras que las propiedades son más estables. Algunos ejemplos, que pueden ser estados, propiedades o ambos, incluyen aria-describedby, aria-haspopup, aria-hidden y aria-label.
Estas cuatro clasificaciones de atributos definen los estados y propiedades:
- Los atributos de widget se aplican a elementos de la interfaz y sirven de apoyo a roles de widget como formularios y ventanas emergentes
- Los atributos de región activa caracterizan el contenido que se actualiza constantemente, como el clima o los valores bursátiles. Las tecnologías de asistencia usan estas actualizaciones para informar a los visitantes de que los datos de la página están cambiando
- Los atributos de arrastrar y soltar se aplican a elementos que se pueden arrastrar o que requieren soltar un archivo
- Los atributos de relación definen las relaciones entre elementos cuando el HTML no lo hace por sí solo, como la relación entre el encabezado de un formulario y el campo del formulario en sí
Cuándo no necesitas ARIA
A veces, la semántica de HTML5 y los elementos nativos son suficientes para transmitir el significado a las tecnologías de asistencia. El uso excesivo de ARIA puede crear etiquetas redundantes o contradictorias, así que confirma siempre que has agotado las soluciones HTML nativas antes de añadir más marcado.
Directrices ARIA
En la comunidad de desarrollo web hay un dicho: "Es mejor no usar ARIA que usar un mal ARIA". Incorporar ARIA correctamente ayuda a una base de usuarios más amplia, pero hacerlo mal puede perjudicar la experiencia de todos. Vale la pena añadirlo, pero requiere esfuerzo e investigación. Asegúrate de entender bien tu objetivo final y cómo alcanzarlo antes de publicar.
Las directrices ARIA de la WAI describen reglas y mejores prácticas para garantizar una implementación adecuada. Estas son las cinco reglas de ARIA que vale la pena recordar:
1. Usa elementos HTML siempre que sea posible
Originalmente, ARIA cubría la falta de elementos de accesibilidad en HTML4. Desde entonces, HTML5 ha avanzado para admitir el etiquetado semántico, lo que significa que es posible que tu código ya incluya la especificación necesaria para ser más accesible para personas con discapacidad.
Si estás evaluando tu código para comprobar su accesibilidad, utiliza siempre un elemento semántico de HTML5 en lugar de ARIA si puedes. Esta práctica reduce la sobrecarga del sitio web y la posibilidad de cometer errores.
2. Solo cambia la semántica nativa si es necesario
Partiendo de la primera regla sobre el uso de ARIA, la segunda establece que solo debes cambiar los elementos o atributos HTML nativos si es estrictamente esencial. De nuevo, la semántica HTML podría tener ya las funciones de accesibilidad adecuadas, y cambiarlas podría empeorar el rendimiento del código.
3. Todos los controles interactivos ARIA deben ser accesibles mediante teclado
Usar un ratón para explorar un sitio web no es posible para todo el mundo. Añadir navegación por teclado ayuda a las personas a interactuar con tu contenido de otra manera.
El teclado debe poder activar cualquier elemento de acción de una página: arrastrar, soltar, hacer clic, etc. Identificar elementos con roles ARIA comunica qué pulsaciones de teclado activan estas acciones, como pulsar la tecla Intro para interactuar con un botón en lugar de hacer clic con el ratón.
4. No uses role="presentation" o aria-hidden="true" en un elemento enfocable
Cuando utilizas uno de estos identificadores en un elemento enfocable, estos no enfocan nada, lo que hace que la acción no tenga sentido. Usar cualquiera de estas etiquetas en un elemento enfocable, como un botón, puede ocultar inadvertidamente el botón al usuario, dificultándole la navegación por tu sitio web.
5. Todos los elementos interactivos deben tener un nombre accesible
Cada elemento de la interfaz de usuario necesita un nombre accesible que identifique su especificidad y uso. Este nombre puede provenir de una propiedad visible (como el texto de un botón) o de una propiedad invisible (como el texto alternativo de una imagen). Esta práctica ayuda a la tecnología de accesibilidad a utilizar los elementos correctamente.
Para obtener una guía más detallada sobre el uso correcto de ARIA, consulta las referencias oficiales de MDN Web Docs y la documentación de “Using ARIA” de la W3C.
Accesibilidad en Webflow
Descubre nuestro compromiso con la accesibilidad web y cómo puedes crear experiencias en línea más inclusivas.
Ejemplos de patrones ARIA
La WAI cuenta con un recurso exhaustivo de ejemplos de patrones sobre cómo los roles, estados y propiedades trabajan juntos para crear elementos de usuario más accesibles. Explorar estos ejemplos te dará una mejor comprensión de cómo funciona ARIA en un sitio web funcional antes de incorporarlo.
Migas de pan: Una ruta de migas de pan enumera enlaces en orden jerárquico que conducen de vuelta a la página principal. Esta ruta indica a los usuarios dónde están navegando y ofrece un camino más claro si desean volver a una página anterior.
Botones: Un botón normalmente requiere que los usuarios hagan clic en un enlace o menú, pero ARIA permite que la tecnología de asistencia “haga clic” en el botón con la barra espaciadora en lugar de con el ratón.
Enlaces: ARIA identifica los enlaces para que los visitantes sepan cuándo un elemento contiene uno y hacia dónde dirige. Este proceso se aplica tanto a enlaces internos (a otras páginas del mismo sitio) como externos (a otros sitios web).
Carruseles: La codificación ARIA crea elementos interactivos para los carruseles de imágenes, permitiendo que las tecnologías adaptativas los gestionen y guíen a los usuarios.
Alertas y cuadros de mensaje: Cuando aparece una alerta para mostrar un mensaje, generalmente solicita al usuario que responda haciendo clic en "Aceptar", "Cancelar" o una confirmación similar. ARIA distingue entre ventanas emergentes (no urgentes) y alertas (urgentes) para que los usuarios actúen según corresponda.
También es buena idea probar estos patrones con lectores de pantalla como NVDA o VoiceOver. Esto garantiza que todo el marcado ARIA esté etiquetado correctamente y sea realmente accesible.
Cómo incorporar ARIA en tu sitio
Miles de personas utilizan tecnología de asistencia para navegar por la web. Incorporar ARIA desde el principio te ayuda a llegar a ellos y ofrecerles apoyo.
La lista de verificación de accesibilidad de Webflow cubre procesos ARIA vitales y otras medidas, como añadir texto alternativo, usar colores de alto contraste y redactar encabezados lógicos y descriptivos. Seguir esta lista no garantiza una accesibilidad total —un sitio web “perfecto” no existe—, pero te permite cumplir objetivos clave como asignar roles a formularios y tablas y etiquetar el logotipo de tu sitio.
Un uso común de ARIA en sitios de Webflow es dar más contexto a una entrada mediante aria-describedby. Aquí te explicamos cómo:
- Identifica el elemento de entrada en tu sitio web que necesite contexto adicional. Puede ser un campo de texto, un área de texto o cualquier otro formulario. Para este ejemplo, usaremos un campo etiquetado como “invitados”.
- Crea un elemento descriptivo que ofrezca instrucciones claras al usuario. Para “invitados”, el objetivo es que los usuarios enumeren los nombres de todos los asistentes separados por comas. Comunica esta información claramente en el elemento descriptivo.
- Asigna atributos ID únicos tanto al elemento de entrada “invitados” como al elemento descriptivo. Podrías asignarles, por ejemplo, los ID guests-input y guest instructions, respectivamente.
- Vincula los elementos usando el atributo aria-describedby en el elemento de entrada y el descriptivo. Este enlace asegura que los lectores de pantalla y otras tecnologías de asistencia comuniquen correctamente las instrucciones adicionales a los usuarios.
Mejora la accesibilidad de tu sitio con Webflow
Para aprender más sobre accesibilidad web, consulta el curso de accesibilidad de Webflow University, donde enseñamos las mejores prácticas y por qué seguirlas. Es un excelente punto de partida antes de implementar ARIA u otras medidas. Visita nuestro blog para descubrir más consejos e inspirarte con defensores de la accesibilidad.
