Tot el que cal consultar abans de dir que un producte digital és accessible.
L’accessibilitat no és un extra, ni un “nice to have”. És una responsabilitat professional. Dissenyar productes digitals accessibles significa garantir que tothom —independentment de les seves capacitats físiques, sensorials o cognitives— pugui utilitzar-los amb autonomia.
Aquí tens 5 pilars clau de l’accessibilitat digital que has de conèixer, entendre i aplicar des del disseny.
1. Accessibilitat no és només disseny visual: és estructura
Un dels errors més habituals és pensar que l’accessibilitat s’acaba amb colors contrastats i textos grans. No. El que no es veu és sovint el més important.
Aquí entra el marcatge accessible:
- Ús correcte d’elements HTML semàntics
- Estructura clara del contingut
- Rols i etiquetes accessibles per a tecnologies d’assistència
Per a una persona que utilitza lector de pantalla, una web no és una pantalla: és una estructura navegable. Si tot són divs sense sentit, l’experiència és un caos.
Clau: el disseny ha d’estar pensat perquè es pugui entendre sense veure’l.
2. L’ordre de navegació pot fer o desfer l’experiència
L’ordre de navegació és la seqüència en què una persona recorre els elements d’una interfície utilitzant:
- Teclat
- Lector de pantalla
- Dispositius d’assistència
L’ordre lògic acostuma a anar de dalt a baix i d’esquerra a dreta, però molts dissenys el trenquen:
- Modals mal gestionats
- Focus que salta elements
- Accions importants fora de l’ordre natural
En disseny UX, anotar l’ordre de navegació no és opcional: és part de la feina. Aquestes anotacions ajuden desenvolupadors i eviten errors crítics més endavant.
Pregunta clau: si no puc usar el ratolí, puc completar la tasca sense perdre’m?
3. La jerarquia de contingut no és decoració
Els encapçalaments jeràrquics (H1, H2, H3…) no són estils visuals. Són una eina de navegació fonamental.
Per a un lector de pantalla:
- L’H1 defineix de què va la pàgina
- Els H2 estructuren els blocs principals
- Els H3 afinen el contingut
Errors típics:
- Saltar d’H1 a H4
- Usar encapçalaments només per fer el text gran
- Tenir múltiples H1 sense criteri
Regla d’or: És important per a l’accessibilitat i és excel·lent per al SEO recordar que una pàgina només ha de tenir un sol H1. L’H1 defineix el tema principal del contingut i ajuda els lectors de pantalla a entendre de què tracta la pàgina des del primer moment. Els principals cercadors també utilitzen l’H1 per interpretar la rellevància del contingut. Tenir-ne més d’un genera confusió, trenca la jerarquia semàntica i dificulta tant la navegació accessible com el posicionament correcte als resultats de cerca, i millora clarament l’experiència global d’usuari en general.
4. El color i el contrast no són negociables
El contrast insuficient és una de les barreres d’accessibilitat més freqüents. I també una de les més fàcils d’evitar.
Aspectes clau:
- Relació de contrast mínima segons WCAG
- No confiar només en el color per transmetre informació
- Evitar combinacions problemàtiques (vermell/verd, gris clar/blanc)
Això no afecta només persones amb discapacitat visual:
- Afecta persones grans
- Afecta ús en pantalles amb mala qualitat
- Afecta ús en exteriors
Si no es llegeix bé, no funciona. Punt.
5. Accessibilitat també és responsive (i documentació)
Disseny responsive accessible
Un producte no és accessible si només funciona en una mida de pantalla o amb una configuració concreta.
Cal garantir que:
- El contingut es reorganitza amb zoom
- El text pot créixer sense trencar el layout
- Els elements no se sobreposen
És bona pràctica dissenyar i documentar versions amb zoom o text ampliat abans de desenvolupar.
I sí: els documents també han de ser accessibles
PDFs, documents descarregables, formularis… també són productes digitals.
Quan és obligatori que siguin accessibles?
- Administracions públiques
- Empreses que ofereixen serveis essencials
- Organitzacions subjectes a normatives com l’Acta Europea d’Accessibilitat
Un PDF accessible ha de tenir:
- Estructura semàntica
- Ordre de lectura correcte
- Text seleccionable
- Alternatives textuals
Si publiques un PDF inaccessible, estàs creant una barrera.
Webs de referència imprescindibles sobre accessibilitat digital
Si treballes en UX, producte, desenvolupament o contingut digital, hi ha una veritat incòmoda: no pots saber-ho tot de memòria. L’accessibilitat digital evoluciona, les normatives canvien i les interpretacions milloren amb el temps.
Per això, més que recordar regles concretes, el més important és tenir ben localitzades les fonts oficials i les bones guies pràctiques. Aquest llistat està pensat perquè el guardis, el consultis sovint i el comparteixis amb el teu equip. Aquí hi ha el que realment importa.
Normativa i estàndards oficials
Web Content Accessibility Guidelines (WCAG) – W3C
https://www.w3.org/WAI/standards-guidelines/wcag/
És la base de l’accessibilitat web. Defineix els criteris d’èxit i els nivells A, AA i AAA que serveixen de referència legal i tècnica a nivell internacional. Si només consultes una font normativa, hauria de ser aquesta.
Web Accessibility Initiative (WAI) – W3C
https://www.w3.org/WAI/
El punt de trobada del W3C sobre accessibilitat. Ofereix explicacions, guies per rols (disseny, desenvolupament, contingut) i documentació sobre ARIA, UX i accessibilitat cognitiva.
European Accessibility Act (EAA)
https://ec.europa.eu/social/main.jsp?catId=1202
Clau per entendre què és obligatori a Europa. Afecta webs, apps, e-commerce, banca, serveis digitals i documentació. Imprescindible si treballes en productes digitals per al mercat europeu.
BOE – Normativa d’accessibilitat a l’Estat espanyol
https://www.boe.es
Especialment rellevant el Reial decret 1112/2018. Defineix obligacions per a webs, apps i documents digitals del sector públic, i és sovint el marc de referència legal.
Bones pràctiques i guies aplicades (molt útils per UX)
WebAIM
https://webaim.org/
Una de les millors fonts pràctiques. Explica accessibilitat amb claredat, ofereix eines com el contrast checker i ajuda a traduir les WCAG a decisions reals de disseny.
The A11Y Project
https://www.a11yproject.com/
Recull comunitari de bones pràctiques, checklists i recursos. Molt orientat a la pràctica i ideal per integrar accessibilitat en el dia a dia dels equips.
ARIA Authoring Practices – W3C
https://www.w3.org/WAI/ARIA/apg/
Guia oficial per crear components interactius accessibles. Especialment important per modals, menús, formularis complexos i components personalitzats.
Design systems amb criteri d’accessibilitat
Material Design – Accessibility
https://m3.material.io/foundations/accessibility
Excel·lent referència per connectar disseny visual, interacció i accessibilitat. Inclou criteris sobre color, tipografia, moviment i components.
GOV.UK Design System – Accessibility
https://design-system.service.gov.uk/accessibility/
Un dels millors exemples reals de com documentar, provar i implementar accessibilitat dins d’un sistema de disseny.
Documentació digital i PDFs accessibles
Adobe – Accessible PDFs
https://www.adobe.com/accessibility/pdf.html
Referència pràctica per crear PDFs accessibles. Molt útil si publiques informes, formularis o documents descarregables que formen part del producte digital.
Testing i eines d’avaluació
WAVE – WebAIM
https://wave.webaim.org/
Eina ràpida per detectar errors d’accessibilitat a una pàgina web.
axe DevTools – Deque
https://www.deque.com/axe/
Eina professional per testing automàtic i manual.
Deque University
https://dequeuniversity.com/
Formació avançada en accessibilitat digital, molt recomanada per aprofundir.