Toegankelijkheid ≠ Overlay: ARIA repareert slecht opgebouwde HTML niet op magische wijze

📅 September 2026   ⏱ 9 min leestijd

Na semantische HTML volgt een veelvoorkomend misverstand: ARIA-attributen maken een slecht gebouwd component niet automatisch toegankelijk. ARIA communiceert semantiek aan ondersteunende technologie, maar vervangt geen gedrag, toetsenbordondersteuning, focusbeheer of goede HTML.

ARIA is belangrijk, maar geen reparatielaag

WAI-ARIA communiceert rollen, toestanden en eigenschappen aan ondersteunende technologie, vooral voor dynamische inhoud en geavanceerde bedieningselementen. Het vult HTML aan; het is geen universele reparatie.

Eerste regel: gebruik native HTML wanneer dat kan

W3C adviseert maximaal gebruik te maken van native semantische HTML. Als een HTML-element al de nodige semantiek en het juiste gedrag biedt, is dat meestal robuuster dan een generiek element met ARIA.

Een rol is een belofte

W3C vat een kernprincipe samen: ‘een rol is een belofte’. <div role="button"> belooft knopgedrag, maar de rol zelf voegt geen toetsenbordinteractie toe.

ARIA communiceert semantiek, maar creëert geen gedrag

ARIA kan aangeven dat iets een knop is, uitgeklapt of geselecteerd. Het implementeert niet automatisch Tab, Enter, Spatie, pijltjestoetsen, focusbeheer of JavaScript-logica. Semantiek en gedrag moeten overeenkomen.

Naam, rol, status en waarde

WCAG 4.1.2 vereist programmatisch bepaalbare namen en rollen en beschikbare relevante toestanden, eigenschappen en waarden. Standaard HTML-bedieningselementen bieden veel hiervan al bij correct gebruik.

Onjuiste ARIA kan de ervaring verslechteren

Onjuiste ARIA is niet neutraal. W3C waarschuwt: ‘No ARIA is better than Bad ARIA’. Verkeerde semantiek kan de interface verkeerd voorstellen aan iemand die afhankelijk is van een niet-visuele ervaring.

ARIA vereist echte tests

ARIA Authoring Practices-voorbeelden waarschuwen voor verschillen in ondersteuning en adviseren testen vóór productie.

Wat heeft dit met overlays te maken?

Dit geldt ook voor overlays. Een laag kan attributen na het laden aanpassen, maar toegankelijkheid vereist dat semantiek, interactie, toetsenbord, focus en toestanden samenwerken. ARIA van buitenaf repareert een gebrekkige interface niet automatisch.

En Blind Reader?

Blind Reader hoort bij ondersteuning van de gebruiker. Het kan de persoon helpen, maar mag niet worden voorgesteld als automatische correctie van ARIA of HTML of als bewijs van WCAG-conformiteit. De website blijft verantwoordelijk.

Wat we moeten onthouden

ARIA is krachtig wanneer het nodig is en goed wordt geïmplementeerd. Eerst native semantische HTML waar mogelijk; daarna ARIA waar nodig; altijd correct gedrag, toetsenbord, focus en testen.

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 Begin
  • Ir a About
  • Ir a Blind Reader
  • Ir a Withdrawal Button
  • Ir a Diensten
  • Ir a Blog
  • Ir a Contact
  • Ir a Nederlands
  • Ir a English
  • Ir a Español
  • Ir a Català
  • Ir a Polski
  • Ir a Română
  • Ir a Italiano
  • Ir a Français
  • Ir a Svenska
  • Ir a Deutsch
  • 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.

Este artículo tiene aproximadamente 412 palabras.

Mueve el foco al inicio del contenido, saltando menús y elementos secundarios.

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.