Cómo usa ARIA la accesibilidad web

Contenido del curso

No sé dónde empezar

Fundamentos de HTML

Listas y Enlaces

Formularios y Tablas

Contenido Multimedia

Accesibilidad Web Y SEO

Proyecto final

17
Portafolio en HTML semántico accesible
08:01 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0013:25

Cómo usa ARIA la accesibilidad web

Curso de HTML

Clase 15 de 17

Clase 15 / 17

Recursos

La accesibilidad web no termina con HTML semántico. Cuando quieres que tu sitio sea entendido por lectores de pantalla y usado por todas las personas, necesitas ARIA, un conjunto de atributos que añade contexto y descripción a tus etiquetas. Aquí te explico qué es, cómo aplicarlo y en qué casos te salva el proyecto.

Qué es ARIA y por qué importa en accesibilidad web

ARIA significa Accessible Rich Internet Applications y es una especificación que agrega atributos a tus etiquetas HTML para describir mejor lo que hace cada elemento. No cambia lo visual, pero sí cambia lo que el software lector de pantalla le comunica al usuario.

¿ARIA reemplaza al HTML semántico? No. ARIA complementa la semántica que ya tiene HTML. Primero usa etiquetas semánticas correctas y, cuando necesites más contexto o descripción, agregas ARIA encima.

La idea es simple: HTML semántico te da una base de accesibilidad sólida, y ARIA es la capa que pone la accesibilidad en primer lugar [01:00].

Cómo usar aria-label para dar contexto a botones e inputs

El atributo aria-label agrega una descripción corta a un elemento que, por sí solo, no comunica su función. Es útil cuando lo visual no basta para que un lector de pantalla entienda qué hace un control.

Botón con icono sin texto

Imagina un botón que solo muestra una X. Visualmente intuyes que cierra algo, pero el lector de pantalla solo dirá botón. Con aria-label le das significado:

html <button aria-label="Cerrar ventana">X</button>

Ahora el lector anuncia botón cerrar ventana y el usuario sabe exactamente qué pasará al activarlo [02:30].

Navegación sin título visible

Cuando tienes varios <nav> en el proyecto, conviene distinguirlos. Aplica aria-label directo a la etiqueta:

html

Así el lector identifica cuál navegación es cuál y el usuario puede moverse con claridad.

Input tipo search

Un <input type="search"> se ve como buscador, pero el lector solo anuncia input. Una etiqueta corta resuelve la confusión:

html <input type="search" aria-label="Buscador de productos">

Cuándo usar aria-describedby para descripciones largas

aria-describedby se diferencia de aria-label porque no es una etiqueta corta: enlaza el elemento con otro bloque de texto que ya existe en tu HTML mediante un id. Sirve cuando necesitas explicar reglas, instrucciones o detalles extensos.

Formulario de contraseña con instrucciones

Si tu input de password tiene reglas (mínimo ocho caracteres, números y letras), no las metas todas en aria-label. Mejor liga la instrucción que ya está en pantalla:

html <label for="password">Contraseña</label> <input type="password" id="password" aria-describedby="password-help"> <small id="password-help">Mínimo 8 caracteres, incluye números y letras.</small>

El lector de pantalla anuncia el campo y luego lee las reglas como parte de la instrucción [06:30].

Imagen con descripción extendida

El atributo alt ayuda, pero tiene límites de longitud. Para una gráfica con datos importantes, combina alt corto con aria-describedby apuntando a un párrafo descriptivo:

html <img src="ventas.png" alt="Ventas del 2024" aria-describedby="grafica-descripcion">

<p id="grafica-descripcion">Las ventas aumentaron un 40% en el Q1.</p>

El lector primero identifica la imagen y después ofrece la descripción completa.

¿Cuál es la diferencia entre aria-label y aria-describedby? aria-label da un nombre o contexto corto al elemento. aria-describedby apunta por id a otro elemento que contiene una descripción más larga ya visible en la página.

Cómo usar role cuando no puedes aplicar HTML semántico

Hay proyectos grandes donde, por estructura o restricciones, terminas usando un <div> comodín en lugar de una etiqueta semántica. El atributo role te permite asignarle a ese contenedor el mismo significado que tendría una etiqueta nativa.

Etiquetas como <header> o <nav> ya tienen un role implícito. Cuando usas un div, debes declararlo manualmente.

Contenedor principal con div

html

<div role="main"> <h3>Título</h3> <p>Contenido principal...</p> </div>

El lector entiende que ese bloque es el contenido principal de la página.

Alerta construida con div

Cuando un div funciona como mensaje de alerta, asígnale el rol correspondiente para que el lector lo anuncie como tal:

html

<div role="alert">Tu sesión está por expirar.</div>

¿Para qué sirve role en ARIA? Para darle semántica a etiquetas comodín como div o span cuando no puedes usar HTML semántico nativo. Le indica al lector de pantalla qué tipo de elemento está leyendo (main, alert, navigation, etc.) [10:00].

Buenas prácticas al aplicar ARIA en tus proyectos

Antes de saturar tu HTML con atributos, considera estas reglas de oro que se desprenden de los ejemplos:

Usa primero HTML semántico. ARIA es complemento, no reemplazo.
Aplica aria-label para nombres cortos en botones con iconos, navegaciones e inputs sin texto visible.
Usa aria-describedby cuando ya existe un texto descriptivo en pantalla que quieres asociar.
Reserva role para casos donde un div cumple una función semántica que no pudiste expresar con la etiqueta correcta.

ARIA es un tema mucho más extenso de lo que cabe en una sola exploración. Hay decenas de atributos y roles más, así que te invito a profundizar con los recursos de la clase y a revisar la documentación oficial. Construir productos accesibles es construir productos para todas las personas, y eso amplía tu alcance real.

¿Qué atributo de ARIA piensas aplicar primero en tu próximo proyecto? Cuéntalo en los comentarios.