Accessibilitat ≠ Overlay: quan un overlay interfereix amb el lector de pantalla

📅 Setembre 2026   ⏱ 8 min de lectura

Els lectors de pantalla presenten mitjançant veu o braille la informació que una interfície exposa programàticament. Les persones que els utilitzen aprenen les seves ordres, configuren preferències i desenvolupen estratègies per moure’s per encapçalaments, enllaços, regions, formularis i controls. W3C inclou els lectors de pantalla entre les tecnologies d’assistència utilitzades per interactuar amb el web. Per tant, el punt de partida ha de ser un web ben construït, no substituir des de la pàgina la tecnologia de l’usuari.

El lector de pantalla ja és la tecnologia d’assistència de l’usuari

Els lectors de pantalla presenten mitjançant veu o braille la informació que una interfície exposa programàticament. Les persones que els utilitzen aprenen les seves ordres, configuren preferències i desenvolupen estratègies per moure’s per encapçalaments, enllaços, regions, formularis i controls. W3C inclou els lectors de pantalla entre les tecnologies d’assistència utilitzades per interactuar amb el web. Per tant, el punt de partida ha de ser un web ben construït, no substituir des de la pàgina la tecnologia de l’usuari.

Què necessita realment un lector de pantalla d’un web

La interoperabilitat depèn de la informació del codi: HTML semàntic, encapçalaments reals, enllaços i botons recognoscibles, etiquetes associades als camps, noms accessibles, rols, estats i valors correctes, i una gestió coherent del focus. W3C explica que els lectors de pantalla poden utilitzar l’estructura d’encapçalaments per navegar i que els controls HTML estàndard afavoreixen la interoperabilitat. Si aquesta base falla, el problema és a la implementació.

Què canvia quan entra un overlay

Alguns overlays injecten JavaScript de tercers que analitza la pàgina i intenta reparar problemes al front-end. La tecnologia d’assistència pot rebre així una versió modificada de la interfície. L’Overlay Fact Sheet adverteix que aquestes reparacions poden alentir la càrrega o provocar canvis inesperats per als usuaris de tecnologies d’assistència. No significa que tots els overlays provoquin sempre el mateix error, però afegeixen una variable entre el web i el lector de pantalla.

Focus, teclat i estructura: petits canvis poden ser grans barreres

Per a una persona que navega sense visió, el focus determina on és i quin element utilitzarà. Canvis inesperats de focus, tecles interceptades o semàntica alterada poden desorientar completament. També els encapçalaments artificials, noms poc fiables o estats mal anunciats. Les experiències recollides per l’Overlay Fact Sheet inclouen usuaris de lector de pantalla que descriuen salts de focus, navegació alterada i webs més difícils d’utilitzar amb l’overlay actiu.

Un botó de «perfil per a lector de pantalla» planteja la pregunta equivocada

La pregunta no és si l’usuari ha activat un perfil especial, sinó si el web funciona des del principi amb la seva tecnologia d’assistència habitual. W3C assenyala que les persones amb discapacitat utilitzen configuracions i eines diferents segons les seves necessitats i preferències. Haver de descobrir un giny, obrir-lo i seleccionar un mode addicional afegeix passos sense garantir que es corregeixin les barreres originals.

No tots els usuaris de lector de pantalla naveguen igual

NVDA, JAWS, VoiceOver, TalkBack i altres solucions tenen ordres i modes diferents. Cada persona també configura veu, velocitat, puntuació, braille i preferències. És arriscat dissenyar una experiència universal de «lector de pantalla». L’accessibilitat robusta exposa informació estàndard i previsible perquè navegadors i tecnologies d’assistència interoperin.

La semàntica correcta permet a l’usuari decidir com navegar

Un bon encapçalament no és només text gran. Un camp no és accessible només perquè tingui una paraula visualment a prop. Amb HTML apropiat i, quan cal, ARIA correcte, el lector de pantalla pot comunicar l’estructura i l’usuari pot navegar amb les seves pròpies ordres. W3C recomana utilitzar elements natius sempre que sigui possible i defineix ARIA per comunicar rols, estats i propietats.

Provar amb un lector de pantalla no és només comprovar que la pàgina parla

Sentir text no demostra que una pàgina sigui usable. Cal provar tasques completes: arribar al contingut principal, entendre la jerarquia, utilitzar menús i formularis, identificar errors, treballar amb diàlegs i components dinàmics i recuperar l’orientació. També cal provar amb teclat i, sempre que sigui possible, amb persones usuàries habituals d’aquestes tecnologies.

Què hauria de fer una empresa en lloc de confiar en una capa

Primer cal identificar les barreres reals i corregir-les al component, plantilla, tema o aplicació que les genera. HTML semàntic, patrons accessibles, bona gestió del focus i proves amb combinacions representatives de navegador i tecnologia d’assistència. L’automatització pot detectar alguns problemes, però l’experiència amb lector de pantalla necessita proves funcionals i humanes.

Accessibilitat ≠ Overlay

L’entrega 06 posa el focus en una idea senzilla: el lector de pantalla pertany a l’usuari, no al web. El web ha d’oferir una interfície sòlida i previsible amb la qual aquesta tecnologia pugui interoperar. Si una capa altera estructura, focus o semàntica, pot transformar una barrera coneguda en una altra de més difícil de diagnosticar. La solució sostenible continua sent corregir en origen i provar amb tecnologies d’assistència reals.

Fonts oficials i tècniques

W3C Web Accessibility Initiative (WAI)
Tools and Techniques — How People with Disabilities Use the Web
Page Structure Tutorial
WAI-ARIA Overview

Overlay Fact Sheet
Overlay Fact Sheet — experiències i limitacions relacionades amb tecnologies d’assistència

Aquest article forma part de la sèrie «Accessibilitat ≠ Overlay». Entrega 06 — Overlays i lectors de pantalla.

🧑‍🦯 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 8 secciones clave a las que puedes saltar.

Confianza: 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. Siguiente avanza. 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 978 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.