aria-hidden

¿Qué es aria-hidden?

aria-hidden es un atributo ARIA que indica si un elemento y todos sus descendientes deben ser ocultados de las tecnologías de asistencia (lectores de pantalla, etc.). Se usa para elementos que son puramente decorativos o redundantes.

Valores

• aria-hidden="true": El elemento está oculto de tecnologías de asistencia
• aria-hidden="false": El elemento es accesible (explícitamente visible)
• Sin atributo: El elemento es accesible por defecto

Relación con WCAG 2.1

El Criterio 1.3.1 (Información y Relaciones) requiere que la información pueda determinarse programáticamente. aria-hidden ayuda a ocultar información decorativa que no aporta valor accesible.

Ejemplos prácticos

✅ Correcto: Icono decorativo

<!-- Icono que no aporta información adicional -->
<button>
  <span aria-hidden="true">🎉</span>
  <span>¡Felicitaciones!</span>
</button>

✅ Correcto: Elemento redundante

<!-- Imagen decorativa que duplica el texto -->
<div>
  <img src="check.png" alt="" aria-hidden="true">
  <span>Completado</span>
</div>

✅ Correcto: Contenido visual complejo

<!-- Gráfico que tiene descripción textual separada -->
<div>
  <svg aria-hidden="true" class="grafico">
    <!-- Gráfico complejo -->
  </svg>
  <p id="grafico-desc">El gráfico muestra un aumento del 25% en ventas.</p>
</div>

❌ Incorrecto: Ocultar contenido importante

<!-- Contenido importante oculto -->
<div aria-hidden="true">
  <h2>Información importante</h2>
  <p>Este contenido no será leído por lectores de pantalla</p>
</div>

❌ Incorrecto: Ocultar elementos interactivos

<!-- Elemento interactivo oculto -->
<button aria-hidden="true" onclick="submit()">
  Enviar
</button>
<!-- El botón no será accesible -->

Errores comunes

1. Ocultar contenido importante: Usar aria-hidden="true" en información relevante
2. Ocultar elementos interactivos: Botones, enlaces y controles deben ser accesibles
3. No actualizar dinámicamente: Si el contenido cambia de decorativo a importante, actualizar el atributo
4. Confundir con display:none: aria-hidden solo afecta tecnologías de asistencia, no la visualización
5. Ocultar elementos con foco: Los elementos enfocables no deben estar ocultos

Buenas prácticas

• Solo para decoración: Usar solo en elementos puramente visuales
• Actualizar dinámicamente: Si el contenido cambia, actualizar el atributo
• No en elementos interactivos: Botones, enlaces y controles deben ser accesibles
• Probar con lectores de pantalla: Verificar que el contenido se oculta correctamente
• Documentar decisiones: Explicar por qué se oculta contenido

Términos relacionados

• [[Contenido oculto]]
• [[Texto solo para lectores de pantalla]]
• [[aria-label]]
• [[WCAG 2.1]]
• [[Criterio 1.3.1]]