Accessibilitat ≠ Overlay: ARIA no arregla màgicament un HTML mal construït

📅 Setembre 2026   ⏱ 9 min de lectura

Després de l’HTML semàntic arriba una confusió habitual: afegir atributs ARIA no converteix automàticament un component mal construït en accessible. ARIA comunica semàntica a les tecnologies d’assistència, però no substitueix comportament, teclat, focus ni una bona base HTML.

ARIA és important, però no és una capa de reparació

WAI-ARIA comunica rols, estats i propietats a les tecnologies d’assistència, sobretot en contingut dinàmic i controls avançats. Complementa HTML; no és un pedaç universal.

Primera regla: utilitza HTML natiu quan puguis

W3C recomana maximitzar l’HTML semàntic natiu. Si un element HTML ja aporta semàntica i comportament, sol ser més robust que reconstruir-lo amb un element genèric i ARIA.

Un role és una promesa

W3C resumeix un principi essencial: «un role és una promesa». <div role="button"> promet comportament de botó, però el role no afegeix per si sol la interacció de teclat d’un botó natiu.

ARIA comunica semàntica; no crea comportament

ARIA pot comunicar que un element és un botó, està expandit o seleccionat. No implementa automàticament Tab, Enter, Espai, fletxes, gestió del focus o lògica JavaScript. Semàntica i comportament han de coincidir.

Nom, funció, estat i valor

WCAG 4.1.2 exigeix noms i funcions determinables programàticament i estats, propietats i valors rellevants disponibles. Els controls HTML estàndard ja aporten molta d’aquesta informació quan s’utilitzen correctament.

ARIA incorrecte pot empitjorar l’experiència

ARIA incorrecte no és neutre. W3C adverteix que «No ARIA is better than Bad ARIA». Una semàntica errònia pot representar malament la interfície per a qui depèn d’una experiència no visual.

ARIA necessita proves reals

Els exemples d’ARIA Authoring Practices adverteixen de diferències de suport entre navegadors i tecnologies d’assistència i recomanen proves abans de producció.

Què té a veure això amb els overlays?

També s’aplica als overlays. Una capa pot modificar atributs després de carregar, però l’accessibilitat depèn que semàntica, interacció, teclat, focus i estats funcionin junts. Afegir ARIA des de fora no repara automàticament una interfície defectuosa.

I Blind Reader?

Blind Reader pertany a l’assistència a l’usuari. Pot ajudar la persona, però no s’ha de presentar com una correcció automàtica d’ARIA o HTML ni com una prova de conformitat WCAG. El web continua sent responsable.

La idea que hem de recordar

ARIA és potent quan cal i s’implementa bé. Primer HTML natiu i semàntic quan sigui possible; després ARIA quan calgui; sempre comportament correcte, teclat, focus i proves amb tecnologies d’assistència.

Fuentes / Sources

🧑‍🦯 Blind Reader
Narrador listo.

Guía para invidentes

Esto es un resumen funcional, no una lectura literal.

Ir al objetivo principal Salta al área principal de acción (formulario, listado o contacto).

Estás en una página tipo: listado. El objetivo principal parece ser: explorar opciones.

Acciones principales: Explorar listado.

Hay 14 secciones clave a las que puedes saltar.

Confianza: 68%

Antes de continuar:

  • Gestionar cookies o avisos Motivo: Detecté un aviso relacionado con cookies/consentimiento. — Vía recomendada: Contenido principal

Acciones recomendadas

  • Explorar listado Motivo: Parece haber un listado de elementos. — Vía recomendada: Listado

Ir por objetivos

Elige qué quieres hacer. Te lo explico y luego te pregunto antes de saltar.

Modo de confirmación

Elige cada cuánto debo preguntar antes de saltar.



Alcance del aprendizaje (solo para “primera vez”)

Sitio: recuerda este objetivo en toda la web. Página: recuerda por URL.


  • Ir a Inici
  • Ir a About
  • Ir a Blind Reader
  • Ir a Withdrawal Button
  • Ir a Serveis
  • Ir a Blog
  • Ir a Contacte
  • Ir a Català
  • Ir a English
  • Ir a Español
  • Ir a Polski
  • Ir a Română
  • Ir a Italiano
  • Ir a Français
  • Ir a Svenska
  • Ir a Deutsch
  • Ir a Nederlands
  • Ir a Português
  • Ir al contenido del artículo
  • Ir a comentarios
  • Ir al final del artículo
  • Volver a Noticias (blog)
  • Noticia anterior
  • Noticia siguiente
  • Gestionar cookies o avisos Importante: esto puede bloquear la navegación.
  • Explorar listado

Guía progresiva

La guía anuncia una sección cada vez.

Cómo funciona: Iniciar guía anuncia la primera sección clave y la muestra en pantalla. Siguiente avanza a la siguiente sección. Para llevar el foco a la sección, usa Ir a la sección actual. Detener sale.

Estado: Guía inactiva

Ir a la sección actual Este enlace se actualiza conforme avanza la guía.

Aquest article té aproximadament 503 paraules.

Mou el focus a l'inici del contingut, saltant menús i elements secundaris.

Acerca de Blind Reader

Blind Reader es un asistente de accesibilidad que analiza cada página y narra su propósito, secciones clave y acciones recomendadas — diseñado para usuarios de lectores de pantalla.

Constructores compatibles: Funciona con cualquier tema o constructor de WordPress: Divi, Elementor, Gutenberg, WPBakery, Avada y otros. Lee el contenido real de la página, no el marcado del constructor.

¿Interfiere en tu contenido? No. Blind Reader añade un panel accesible encima de la página pero no modifica, oculta ni altera ningún contenido ni estilo existente en tu web.

¿Cómo funciona? Analiza la estructura de la página (encabezados, enlaces, formularios, landmarks) y genera un resumen funcional. La guía y los objetivos ayudan a navegar sin tener que recorrer toda la página.

Atajo de teclado: Pulsa Alt + G para saltar directamente al primer objetivo.