Accessibilitat web: disseny inclusiu i user experience (UX) per a persones amb discapacitat
L’accessibilitat web no només és vital per a persones amb necessitats especials, sinó que també ha de tenir-se en compte en qualsevol tipus de disseny perquè usuaris de qualsevol lloc, edat o condició siguin capaços de fer les seves tasques amb èxit.
En aquest post t’expliquem com dissenyar una web accessible, fins i tot per a aquelles persones amb discapacitats visuals o motrius. Continua llegint si vols saber-ne més!
Quins tipus de discapacitat existeixen i com afecten la interacció
Solem pensar que no és necessari preocupar-se per l’accessibilitat perquè el percentatge de persones discapacitades que naveguen per internet no ens sembla rellevant. La veritat és que és molt difícil conèixer les dades sobre discapacitat d’un determinat territori i, fins i tot, precisar quants usuaris voldran accedir a una web. No obstant això, el que sí que és possible, és fer-nos una idea de l’amplitud de persones afectades si tenim en compte les malalties que poden minvar les seves capacitats de navegació:
- Ceguesa, en qualsevol dels seus graus
- Daltonisme o problemes amb el processament del color
- Sordesa o audició disminuïda
- Discapacitat motriu que afecta a la utilització de pantalles o dispositius
- Problemes relacionats amb la compressió o el processament de la informació
Les persones amb discapacitats visuals severes utilitzen un sistema de braille per navegar per internet.
A més, en les dades oficials no trobem l’enorme varietat d’afeccions temporals o trastorns no diagnosticats que poden disminuir les capacitats d’un usuari, com, per exemple: lesions eventuals que afectin la mobilitat de les mans, cataractes, dèficit d’atenció, problemes de memòria…
I, finalment, també hi ha certs elements relacionats amb la tecnologia que afecten negativament l’accessibilitat, una espècie de “discapacitat tecnològica”: mala qualitat de la connexió a internet, eines i sistemes operatius desactualizats o dispositius de grandària i prestacions reduïts, entre d’altres. La falta dels recursos necessaris per a navegar de forma adequada afectarà negativament el temps d’espera i a la càrrega i descàrrega d’arxius multimèdia, provocant problemes de compatibilitat i de visualització.
Per tant, si tenim en compte que una bona part dels nostres usuaris tindran alguna discapacitat física o tecnològica que afectarà la seva experiència com podem millorar l’accessibilitat i, per tant, disminuir les possibilitats que tinguin problemes durant la navegació?
Els usuaris d’edat avançada tenen més problemes d’accessibilitat a causa de la pèrdua progressiva de capacitats i a tenir destresa més limitada amb l’ús dels dispositius.
Quines són les claus per dissenyar i desenvolupar una web accessible
· Estructurar correctament els continguts, pensant en el lectors de pantalla.
La jerarquia del contingut és vital en la creació de qualsevol pàgina web, ja que facilita la comprensió del contingut, manté una estructura coherent i millora l’escaneig dels motors de cerca. Però té una altra funció primordial i és ajudar les persones amb problemes de visió a interpretar el contingut mitjançant lectors de pantalla que necessiten certes condicions per funcionar correctament:
o els títols h1, h2… han d’estar ben indicats i en base a la seva importància, per exemple: nom de secció i nom de subsecció o títol i subtítol.
o els noms de les seccions o blocs han de ser descriptius i indicar correctament el seu contingut. És a dir, per exemple, que una pàgina de Notícies enllaci a articles d’actualitat i no a un altre tipus de contingut que no tingui res que veure.
o els enllaços o referències a pàgines han de mantenir-se durant la navegació, això vol dir que si tenim un link que es diu Home en un punt, no podem anomenar-lo Inici en un altre.
-
Posar text alternatiu en les imatges i subtítols en els vídeos
Les imatges també han de poder-se rastrejar pels cercadors i interpretades pels lectors de pantalla, però, a més, el text alternatiu és necessari per a aquelles situacions en les quals a causa d’un error o a problemes de connexió la imatge no es mostra.
Quant als subtítols dels vídeos, són importants perquè tant les persones amb dificultats auditives com aquelles que tenen dificultats amb l’idioma puguin seguir el contingut. De manera addicional també s’ha de tenir en compte l’àudio descripció per a persones amb discapacitat visual, per disposar d’una narració en àudio que descrigui el que està ocorrent en el vídeo. -
Utilitzar un bon contrast de color i dissenyar pensant en blanc i negre
Hem de posar-nos en la pell dels nostres usuaris i tenir en compte que poden tenir problemes visuals que els impedeixin veure amb claredat o que els afectin en la detecció de totes o alguna gamma de color. Per això, prevaler el contrast dels colors respecte a l’estètica és imprescindible, ja que un contrast deficient també dificulta la lectura i la detecció dels elements en pantalles amb mala resolució o molta lluentor, com per exemple les pantalles de dispositius mòbils en entorns amb molta llum.
I què passa quan un disseny és preciós i colorit, però no funciona en blanc i negre? Potser no t’ho has plantejat amb anterioritat, però en els casos en què un usuari no és capaç de distingir els colors és probable que no pugui diferenciar els elements i li resulti difícil navegar la teva web. Posa especial atenció en el disseny de formularis, la comunicació d’errors i els missatges que requereixen l’acció de l’usuari, ja que, si aquest tipus de comunicació només es basa en l’ús del color, pot passar desapercebuda.
Comparativa de visualització de la pàgina d’inici d’Amazon tal com ho veurien usuaris amb diferents problemes de codificació del color
Quines són les millors eines per revisar l’accessibilitat de la teva pàgina web
Vols comprovar l’estat actual de l’accessibilitat del teu web? T’expliquem quines són les millors eines per aconseguir llocs web accessibles que tinguin en compte les necessitats especials de les persones amb discapacitat
- Validadors d’estàndars HTML/CSS: tant el validador de HTML de W3C com el validador de CSS de W3C et permetran analitzar el codi de la teva pàgina web per a saber si presenta errors, si s’ajusta als estàndards i si és compatible amb els navegadors. Com més net, eficient i adaptable sigui, major serà la seva accessibilitat.
- Evaluador del grau d’accessibilitat: l’analitzador Taw permet comprovar els quatre pilars de l’accessibilitat; que sigui perceptible, operable, comprensible i robusta. També existeix una opció en forma d’extensió per al navegador anomenada Siteimprove que medeix el nivell d’accessibilitat(que va de A a AAA)i una altra, ChromeLens, que permet provar la visualització de la web amb problemes de visió o amb l’ús exclusiu del teclat.
- Lectors web: encara que existeixen diverses opcions de pagament que pots provar amb el període de prova, també hi ha altres gratuïtes que et permetran navegar des de la perspectiva d’una persona amb discapacitat visual, com pot ser NVDA.
- Simuladors responsive: a més dels propis simuladors incorporats en els navegadors habituals en fer clic en l’acció “Inspeccionar” en el botó dret del ratolí, també és possible utilitzar l’eina Responsinator que permet veure la url que indiquem en les pantalles de diversos dispositius simultàniament.
Com veus, l’accessibilitat web per a discapacitats és un repte que moltes marques encara han de plantejar-se. Pensa en els teus usuaris i en les seves necessitats, i desenvolupa la teva pàgina web utilitzant un disseny inclusiu que tingui en compte la multitud de particularitats que poden dificultar la navegació. Els llocs webs accessibles, a més, responen millor als estàndards i tenen millor temps de càrrega, per la qual cosa tots els teus visitants ho agrairan!
I si necessites ajuda amb l’ux design, accessibilitat o desenvolupament web no dubtis a contactar-nos, t’assessorarem en el que necessitis.