Hi ha una frase de Tim Berners-Lee, l’inventor de la World Wide Web, que resumeix millor que cap altra per què l’accessibilitat importa: “El poder de la web és en la seva universalitat. L’accés de tothom, independentment de la seva discapacitat, és un aspecte essencial.”
I, tanmateix, el 2025, la majoria de llocs web continuen ignorant-ho. Textos que es confonen amb el fons, imatges sense descripció, botons que no funcionen amb el teclat. Petits descuits de disseny que, per a milions de persones, equivalen a una porta tancada.
Aquest article tracta de com obrir aquesta porta. Veurem què és l’accessibilitat web, a qui afecta realment i, sobretot, què pots fer tu com a dissenyador o desenvolupador perquè la teva web funcioni per a tothom.
què és l’accessibilitat web i per què és important?
L’accessibilitat web és la pràctica de dissenyar i desenvolupar llocs que puguin ser utilitzats per persones amb qualsevol tipus de discapacitat: visual, auditiva, cognitiva o física. No es tracta de crear una versió alternativa del lloc per a un públic minoritari, sinó de construir des del principi pensant en la diversitat real de les persones que l’utilitzaran.
A la pràctica, això afecta sobretot l’experiència visual. Una web és, per naturalesa, un mitjà visual. Però això no vol dir que hagi de ser-ho d’una manera excloent. Moltes persones amb discapacitats visuals naveguen cada dia: llegeixen el correu, compren online, consumeixen notícies, busquen feina. Ho fan amb eines com lectors de pantalla, teclats adaptats o configuracions d’alt contrast. I quan un lloc no està preparat per a això, simplement marxen.
Aquí hi ha el punt que molts passen per alt: la manca d’accessibilitat no és només un problema ètic. També és un problema de negoci. Cada usuari que no pot llegir el teu contingut perquè el contrast és insuficient, o que no pot completar un formulari perquè els camps no tenen etiquetes, és un client potencial que perds i una oportunitat que es tanca.
problemes freqüents que afronten els usuaris amb discapacitat visual
Abans de parlar de solucions, val la pena entendre des de dins quina experiència té algú amb discapacitat visual quan navega per una web mal dissenyada. Aquests són els problemes més habituals que reporten:
- Zones de la pàgina que el lector de pantalla no pot llegir perquè no estan marcades correctament a l’HTML.
- Contingut sense estructura d’encapçalaments, cosa que fa impossible orientar-se dins la pàgina.
- Imatges sense text alternatiu: el lector de pantalla les ignora o anuncia “imatge” sense més context.
- Camps de formulari sense etiquetes associades: l’usuari no sap què se li està demanant.
- Enllaços que diuen “fes clic aquí” sense més descripció, inútils quan es llisten fora de context.
- Botons sense nom accessible: el lector de pantalla no els pot descriure.
- Elements interactius que no es poden navegar amb el teclat.
El més cridaner és que molts d’aquests problemes no requereixen solucions complexes. Són errors de base que s’eviten amb bones pràctiques d’HTML semàntic i una mica més d’atenció durant el disseny.
quantes persones tenen discapacitat visual al món i a Espanya
De vegades ajuda posar xifres sobre la taula per entendre la dimensió real del problema.
A escala mundial, s’estima que uns 285 milions de persones tenen algun tipus de discapacitat visual. D’aquestes, 39 milions són cegues i 246 milions tenen baixa visió. La baixa visió inclou situacions molt diferents: visió borrosa, visió en túnel, pèrdua del camp visual central o simplement una agudesa visual molt reduïda que no arriba a considerar-se ceguesa legal.
A Espanya, segons la Fundación Retina+, prop d’un milió de persones tenen algun grau de discapacitat visual, i aproximadament 70.000 són legalment cegues.
Però hi ha una altra dada que sol sorprendre: el daltonisme. Afecta el 8% dels homes i el 0,5% de les dones a escala global. Això vol dir que, estadísticament, de cada 100 persones que visiten la teva web, unes 10 tenen alguna dificultat per distingir colors amb normalitat. El daltonisme no impedeix navegar, però un disseny que depèn exclusivament del color per transmetre informació sí que pot fer-ho molt difícil.
Com a dissenyadors, no podem ignorar aquestes xifres. No es tracta d’un públic residual: és una part significativa i real de qualsevol audiència.
9 consells per dissenyar una web accessible segons les directrius WCAG
Les Directrius d’Accessibilitat per al Contingut Web (WCAG) són l’estàndard internacional de referència en accessibilitat. El que ve a continuació no és un resum teòric d’aquestes directrius, sinó nou recomanacions concretes que pots aplicar directament al teu procés de disseny.
proporciona prou contrast utilitzant colors i textures
La ràtio de contrast entre el text i el fons és un dels factors més bàsics i més incomplerts en accessibilitat. Les WCAG 2.0 nivell AA estableixen un mínim de 4,5:1 per a text normal i de 3:1 per a text gran (a partir de 18 punts o 14 punts en negreta).
Per comprovar-ho, eines com Stark (plugin per a Figma i Sketch) o l’extensió de Chrome WAVE Evaluation Tool et permeten verificar el contrast de qualsevol combinació de colors en segons. No hi ha excusa per no fer-ho.
Una consideració addicional: el contrast no depèn només del color. Les textures i els patrons poden ajudar a diferenciar elements quan el color per si sol no és suficient, especialment en gràfics i visualitzacions de dades.
limita i prioritza el color a la interfície
Com més colors introdueixes en una interfície, més difícil és per a qualsevol usuari identificar ràpidament quins elements són accionables i quins són decoratius. Per a algú amb daltonisme, aquest problema es multiplica.
La solució no és eliminar el color, sinó utilitzar-lo amb criteri. Defineix una paleta reduïda amb rols clars: un color per a accions primàries, un altre per a secundàries, i utilitza la resta amb moderació. Eines com Color Safe t’ajuden a construir paletes que compleixin els estàndards de contrast des del principi.
Una dada útil: Photoshop CC inclou una funció per simular diferents tipus de daltonisme. Activar-la durant la fase de revisió pot revelar problemes que d’una altra manera passarien desapercebuts.
permet l’ajust manual de la mida de la lletra
Moltes persones amb baixa visió, especialment gent gran, no fan servir programari d’ampliació ni coneixen les dreceres de teclat del navegador per augmentar la mida del text. Si el teu disseny ofereix un control clar i visible per ajustar la mida de la lletra, els estàs donant autonomia sense demanar-los que busquin la solució pel seu compte.
Pot ser un control simple: un botó amb la lletra “A” en tres mides, un lliscador, un menú desplegable. El que importa és que sigui visible i funcioni bé. Especialment en llocs amb molt contingut de lectura, això marca una diferència real.
no et basis només en el color per comunicar informació important
Aquest és un dels errors més freqüents i també un dels més fàcils d’evitar. Si utilitzes únicament el color per indicar que alguna cosa és un enllaç, que un camp té un error o que una alerta és important, estàs deixant fora tots els usuaris que no perceben aquests colors amb normalitat.
La regla és simple: cada element significatiu ha de tenir més d’un senyal visual. Un enllaç pot tenir color i subratllat. Un missatge d’error pot tenir color vermell i una icona i un text descriptiu. Una alerta pot tenir una vora diferenciada a més del canvi de color.
Quan treus el color de l’equació, la informació important ha de continuar sent comprensible.
dona accessibilitat per teclat
Per als usuaris que són cecs o tenen baixa visió severa, el ratolí no és una opció viable. Navegar amb ell requereix una coordinació visual que simplement no tenen. La seva eina de navegació és el teclat, combinat amb un lector de pantalla.
Això vol dir que tots els elements interactius de la teva web, menús, botons, formularis, modals, desplegables, han de ser accessibles i operables únicament amb el teclat. L’ordre de tabulació ha de ser lògic i coherent amb l’estructura visual de la pàgina. I el focus del teclat ha de ser sempre visible: si no es veu on és el focus, l’usuari està navegant a cegues.
utilitza etiquetes explícites i descriptives per a enllaços i botons
Els lectors de pantalla tenen una funció molt útil: poden llistar tots els enllaços d’una pàgina perquè l’usuari hi navegui sense haver d’escoltar tot el contingut. El problema és que, en aquesta llista, els enllaços apareixen sense el text que els envolta. Sense context.
Si els teus enllaços diuen “fes clic aquí”, “més informació” o “veure”, aquesta llista és completament inútil. L’usuari no sap on porten ni per què els hauria de seguir.
La solució és escriure etiquetes d’enllaç que tinguin sentit per si soles: “descarregar la guia d’accessibilitat WCAG 2.1”, “veure el portfoli de projectes de disseny web”, “llegir l’article sobre contrast de color”. Això no només millora l’accessibilitat, també millora el SEO i l’escanejabilitat per a tots els usuaris.
Una nota sobre els lectors de pantalla més utilitzats: Microsoft Narrator a Windows i VoiceOver a Mac i iOS són els més estesos. Provar la teva web amb qualsevol d’ells, encara que sigui breument, canvia completament la perspectiva sobre el que significa una bona experiència d’usuari.
proporciona text alternatiu per a imatges i contingut no textual
Quan un lector de pantalla arriba a una imatge sense text alternatiu, anuncia “imatge” i passa al següent element. O, en el pitjor dels casos, llegeix el nom del fitxer: “IMG_20240315_084532.jpg”. Cap de les dues opcions és útil.
L’atribut alt en HTML existeix precisament per a això. Ha de descriure el que mostra la imatge de manera concisa i rellevant per al context en què apareix. No cal començar amb “imatge de” o “foto de”, el lector ja anuncia que és una imatge. N’hi ha prou amb descriure el contingut: “gràfic de barres comparant taxes de conversió per sector” o “exemple de formulari amb baix contrast de color”.
Per a imatges purament decoratives que no aporten informació, l’atribut alt ha d’estar buit (alt="") perquè el lector de pantalla les ignori.
utilitza encapçalaments per organitzar el contingut de la pàgina
Els encapçalaments no són només una eina de disseny. Són l’estructura de navegació que fan servir els lectors de pantalla per moure’s per una pàgina. Molts usuaris cecs naveguen saltant d’encapçalament en encapçalament per fer-se una idea general del contingut abans de decidir quines seccions els interessen, exactament igual que un usuari vident escaneja la pàgina visualment.
Si la teva pàgina no té encapçalaments, o els utilitza de manera decorativa sense respectar la jerarquia (H1, H2, H3), aquest mètode de navegació desapareix. L’usuari ha d’escoltar tota la pàgina de manera lineal per trobar el que busca.
La regla és senzilla: un sol H1 per pàgina, H2 per a les seccions principals, H3 per a les subseccions. I que el text de cada encapçalament descrigui amb precisió el que ve després.
utilitza títols descriptius per a cada pàgina
L’element <title> de l’HTML és el primer que anuncia un lector de pantalla quan es carrega una pàgina. Per a un usuari cec que té diverses pestanyes obertes, el títol de la pàgina és l’única pista sobre què hi ha en cadascuna.
Un títol com “Inici” o “Pàgina 1” no diu res. Un títol com “consells d’accessibilitat web per a dissenyadors | nom del blog” sí. Descriu el tema, identifica el lloc i permet a l’usuari orientar-se sense haver d’escoltar el contingut.
A més, com ja saps, el títol de la pàgina és també el meta title: el text que apareix als resultats de cerca de Google. Optimitzar-lo per a accessibilitat i per a SEO alhora no és una contradicció, és exactament el mateix.
com integrar l’accessibilitat web en el teu procés de disseny
L’accessibilitat funciona quan es tracta com una part del procés, no com una revisió al final. Integrar-la des del principi, en la fase de wireframing i definició de la paleta de color, costa molt menys que corregir-la en producció.
Per començar, aquestes són les eines gratuïtes més útils:
- WAVE (wave.webaim.org): analitza qualsevol URL i assenyala els problemes d’accessibilitat directament sobre la pàgina.
- Microsoft Clarity: a més de heatmaps, permet detectar problemes d’usabilitat que afecten tots els usuaris.
- Stark: plugin per a Figma i Sketch que comprova el contrast, simula daltonisme i verifica l’ordre de tabulació.
- EvalAccess 2.0: avaluador online de conformitat amb WCAG.
I si vols anar més enllà de les eines automàtiques, la prova més valuosa que pots fer és activar VoiceOver o Narrator i navegar per la teva pròpia web sense mirar la pantalla. Cinc minuts d’aquesta experiència ensenyen més que qualsevol checklist.
Fer la web accessible no és afegir feina extra al procés de disseny. És dissenyar bé. I, com acostuma a passar quan es dissenya bé, el resultat acaba sent millor per a tothom.
