Què és l'accessibilitat web? WCAG i disseny inclusiu explicats

L'accessibilitat web vol dir construir llocs i apps web perquè les persones amb discapacitat els puguin fer servir, tant si són cegues i fan servir un lector de pantalla, com si no poden fer servir el ratolí, tenen visió reduïda o daltonisme, són sordes, o tenen discapacitats cognitives o d'aprenentatge. A la pràctica es redueix a coses com ara alternatives de text per a les imatges, prou contrast de colors, formularis amb etiquetes adequades i que tot funcioni només amb el teclat. L'estàndard internacional és WCAG, les Web Content Accessibility Guidelines del W3C.

L'accessibilitat sovint s'abreuja com a a11y: «a», 11 lletres i «y».

Per què l'accessibilitat importa quan construeixes amb IA

Els constructors d'IA són bons per produir apps que semblen correctes. L'accessibilitat tracta sobretot del que no es veu en una captura de pantalla: si un botó és realment un botó, si un camp té una etiqueta que un lector de pantalla pot anunciar, si pots arribar al menú amb la tecla Tab.

Per això val la pena preguntar-ho:

• És fàcil que se't passi per alt. Un desplegable amb estil personalitzat pot semblar perfecte i ser impossible d'usar sense ratolí. No ho notaràs si no ho proves.
• Surt més barat fer-ho bé d'entrada. Demanar components accessibles des del primer prompt gairebé no costa res. Adaptar una app acabada vol dir tocar cada pantalla.
• Ajuda tothom. Els subtítols ajuden les persones en llocs sorollosos, un bon contrast ajuda les persones que usen el telèfon al sol, i unes etiquetes clares ajuden tothom a omplir formularis més ràpidament.
• Coincideix amb el SEO. Els encapçalaments adequats, els enllaços descriptius i el text alternatiu també ajuden els motors de cerca a entendre les teves pàgines; consulta SEO per a llocs web construïts amb IA.
• Pot ser obligatori. Segons on operis i a qui serveixis, l'accessibilitat pot ser una obligació legal.

Una analogia quotidiana

Pensa en l'entrada d'un edifici.

Les escales funcionen bé per a moltes persones. Una rampa serveix a les persones en cadira de rodes, i també a les famílies amb cotxets, als repartidors amb carretons i als viatgers amb maletes. Les portes automàtiques, els senyals clars, el braille als botons de l'ascensor i una bona il·luminació eliminen cadascun una barrera per a algú.

L'accessibilitat web és la mateixa idea per als espais digitals: les rampes, els senyals i els passamans de la teva app. I, com passa amb un edifici, és molt més fàcil incloure una rampa als plànols que afegir-ne una quan el formigó ja s'ha assecat.

WCAG en poques paraules

WCAG el publica la Web Accessibility Initiative del W3C. La versió actual és WCAG 2.2, publicada per primer cop l'octubre de 2023. És compatible cap enrere: el contingut que compleix WCAG 2.2 també compleix la 2.1 i la 2.0, i el W3C recomana usar la versió més recent. WCAG 2.2 també està aprovat com a estàndard internacional, ISO/IEC 40500:2025. Una WCAG 3 molt diferent està en desenvolupament com a esborrany inicial, no com a estàndard acabat.

WCAG s'organitza en quatre principis, sovint recordats com a POUR:

Cada pauta té criteris d'èxit comprovables en tres nivells:

• Nivell A: el mínim. No complir-los bloqueja del tot algunes persones.
• Nivell AA: l'objectiu estàndard, i el nivell al qual apunten la majoria de lleis i polítiques.
• Nivell AAA: el nivell més alt. És útil aspirar-hi en alguns punts, però el W3C no recomana exigir-lo per a llocs sencers, perquè algun contingut no el pot complir.

WCAG 2.2 va afegir nou criteris d'èxit a la 2.1, entre ells Mida de l'objectiu (mínim) al nivell AA —els objectius clicables haurien de tenir en general almenys 24 per 24 píxels CSS, amb excepcions— i Autenticació accessible (mínim), que limita els passos d'inici de sessió que depenen de la memòria o de trencaclosques, com haver de reescriure una contrasenya sense permetre'n enganxar-la. També va eliminar el vell criteri «Parsing», que ha quedat obsolet.

Un exemple pràctic: un formulari de registre

Aquí tens un formulari de registre que podria produir una IA, i el que troba una comprovació d'accessibilitat:

Cap d'aquestes solucions no canvia gaire l'aspecte del formulari. Totes canvien si algunes persones el poden fer servir o no.

Termes clau

Idees errònies habituals

• «L'accessibilitat només importa per als usuaris cecs.» Cobreix discapacitats visuals, motores, auditives, del parlar i cognitives, a més de situacions temporals com un braç trencat.
• «Els llocs accessibles es veuen sosos.» L'accessibilitat limita algunes coses —contrast, estils de focus, mida del text—, però els llocs accessibles i ben dissenyats són la norma, no l'excepció.
• «Un comprovador automàtic diu 100, així que ja hem acabat.» Les eines automàtiques detecten només alguns problemes. Si el text alternatiu és realment significatiu, o si un flux té sentit amb un lector de pantalla, cal que ho comprovi una persona.
• «Un widget de capa d'accessibilitat ens farà complir la normativa.» Les barres d'eines afegides a sobre no poden corregir les etiquetes que falten ni l'accés per teclat trencat al teu codi. Corregeix l'origen.
• «No tenim usuaris amb discapacitat.» Potser simplement no ho saps. Moltes discapacitats no són visibles, i les persones que es troben una barrera normalment només se'n van.

Què demanar al teu constructor d'IA

• «Construeix això perquè compleixi WCAG 2.2 nivell AA.»
• «Fes servir HTML semàntic: botons i enllaços reals, encapçalaments en ordre i etiquetes per a cada camp del formulari.»
• «Assegura't que cada element interactiu funcioni només amb el teclat i tingui un estil de focus visible.»
• «Comprova el contrast de tots els colors del text i de les icones: 4,5:1 per al text normal, 3:1 per al text gran i les icones.»
• «Afegeix text alternatiu significatiu a les imatges informatives i text alternatiu buit a les decoratives.»
• «Mostra els errors dels formularis com a text, enllaçats al camp, i no només amb el color.»
• «Respecta la preferència de moviment reduït de l'usuari per a les animacions.»
• «Executa una comprovació automàtica d'accessibilitat i fes una llista del que no pot comprovar, perquè ho revisi a mà.»

Després, prova-ho tu mateix: aparta el ratolí i intenta completar el teu flux principal només amb Tab, Maj+Tab, Enter i Espai. Prova el lector de pantalla integrat del teu telèfon a la pàgina principal. Amplia el navegador al 200% i mira si alguna cosa es trenca.

L'accessibilitat a Mythex

Mythex no inclou un comprovador d'accessibilitat específic, així que tracta l'accessibilitat com a part dels teus prompts i de les proves. Demana WCAG 2.2 AA des del primer prompt, comprova el resultat a la Vista prèvia amb el teclat, i fes servir /test perquè l'agent faci clic pels teus fluxos principals abans de publicar; consulta Proves d'app. La recepta de SEO també demana encapçalaments semàntics i text alternatiu significatiu, que serveixen als dos objectius.

Per a una llista de comprovació pràctica, consulta com fer accessible el teu lloc web. Pel que fa al disseny, llegeix com dissenyar una app ben acabada amb IA i, abans del llançament, com provar la teva app abans de llançar-la. La visió general de WCAG del W3C és la font autoritzada.

Preguntes