PARÁMETROS ARIA EN HTML – GUÍA COMPLETA PARA MEJORAR LA ACCESIBILIDAD WEB
En el desarrollo web moderno, crear interfaces atractivas no es suficiente. También es fundamental que sean accesibles para todas las personas, incluyendo aquellas que utilizan lectores de pantalla, navegación por teclado u otras tecnologías de asistencia. Aquí es donde entran en juego los parámetros ARIA, Accessible Rich Internet Applications. Estos atributos especiales de HTML permiten describir el propósito, el estado y las relaciones de los elementos de una página web de forma que las tecnologías de asistencia puedan interpretarlos correctamente.¿Qué es ARIA?
ARIA es un conjunto de atributos definidos por el W3C que se añaden a elementos HTML para mejorar la accesibilidad de aplicaciones web dinámicas y ricas en interacción.Su objetivo principal es:
- Comunicar el rol de un elemento.
- Indicar el estado actual activado, expandido, seleccionado, etc..
- Establecer relaciones entre elementos.
- Proporcionar información adicional cuando el HTML semántico nativo no es suficiente.
Tipos principales de atributos ARIA
Los atributos ARIA se dividen en tres categorías principales:| Tipo | Función | Ejemplos |
|---|---|---|
| Roles | Definen el propósito del elemento | "role="button", role="navigation"" |
| Estados | Indican el estado actual del elemento | "aria-expanded, aria-checked" |
| Propiedades | Describen características o relaciones | "aria-label, aria-labelledby, aria-describedby" |
Atributos ARIA más utilizados
"aria-label"
Proporciona un nombre accesible al elemento cuando no hay texto visible:<button aria-label="Cerrar menú">
<svg>...</svg>
</button>
"aaria-labelledby"
Hace referencia al id de otro elemento que actúa como etiqueta.<h2 id="titulo-modal">Configuración</h2>
<div role="dialog" aria-labelledby="titulo-modal">
...
</div>
"aria-describedby"
Asocia un elemento con una descripción adicional.<input type="password" aria-describedby="ayuda-password">
<p id="ayuda-password">La contraseña debe tener al menos 8 caracteres.</p>
"aria-expanded"
Indica si un elemento controlable (como un menú o acordeón) está expandido o colapsado.<button aria-expanded="false" aria-controls="menu">
Menú
</button>
<ul id="menu" hidden>
...
</ul>
"aria-hidden"
Oculta un elemento a las tecnologías de asistencia, no lo elimina visualmente.<span aria-hidden="true">★</span>
" aria-live"
Informa a los lectores de pantalla sobre cambios dinámicos en el contenido.- "aria-live="polite"": Anuncia cuando el usuario termina lo que está haciendo.
- "aria-live="assertive"": Anuncia inmediatamentem usar con cuidado.
<div aria-live="polite" id="mensajes"></div>
Roles comunes
- "role='button'"
- "role='dialog'"
- "role='alert'"
- "role='tablis'", role='tab', role='tabpanel'"
- "role='navigation'"
- "role='main'"
- "role='banner'"
- "role="contentinfo""
Buenas prácticas al usar ARIA
- Priorizar siempre el HTML semántico.
- Usar "<button>", "<nav>>", "<main>", "<header>", etc., antes que roles ARIA.
- No abusar de "aria-label".
- Si el elemento ya tiene texto visible, normalmente no es necesario.
- Mantener sincronizados los estados
- Aasegurarse de que el valor sea correcto si se cambia "aria-expanded" con JavaScript, .
- Probar con lectores de pantalla reales
- NVDA (Windows), VoiceOver (macOS/iOS) y TalkBack (Android) son esenciales.
- Evitar roles innecesarios
- No poner "role='button'" en un "<button>". Es redundante y puede generar problemas.
- Usar "aria-hidden='true'" con cuidado
- Solo ocultar contenido decorativo o que no aporte información.