Els 4 principis d’accessibilitat en el disseny de prototips

L’accessibilitat és el disseny de productes o serveis, ja siguin digitals o no, perquè siguin usats per la major quantitat de persones possible independentment de les seves capacitats i sense fer adaptacions específiques per a diversitats existents.

Per exemple, aplicant disseny accessible, un producte digital podrà ser utilitzat per una persona daltònica i una persona no daltònica per igual.

Una bona part de l’accessibilitat parteix del disseny, però una altra part molt important és exclusiva del desenvolupament i depèn que se segueixin bones pràctiques en el codi i es facin servir les etiquetes adequades. En aquest article ens centrarem només en les parts que apliquen al disseny.

La WCAG, l’organització que regula els estàndards d’accessibilitat, defineix quatre principis d’una interfície d’usuari accessible: perceptible, operable, comprensible i robusta.

Principi 1 d’accessibilitat: Perceptible

La informació i els components de la interfície d’usuari han d’estar presentats a l’usuari de manera que els pugui percebre.

En aquest principi s’engloben tots els elements visuals de la interfície. Posarem alguns exemples dels més rellevants.

Colors

Pel que fa als colors, cal fer revisions per assegurar-se que tots els elements siguin visibles per usuaris daltònics, o amb altres diversitats de la visió que tinguin a veure amb els colors.

És especialment important anar amb compte amb els colors verd i vermell quan van junts. 

 

 

Accesibilidad-diseño-prototipos-Verde-Rojo-Itequia-Design-cat

 

També és important no utilitzar el color com a indicador únic duna informació, per exemple, en gràfics on es visualitzin dades.

 

Accesibilidad-diseño-prototipos-Graficos-Datos-Itequia-Design

 

El problema que es presenta en aquesta gràfica és que un usuari daltònic tindrà dificultats per identificar a quina barra correspon cada any. Una solució podria ser, en comptes d’indicar l’any per separat mitjançant requadres de color, posar a prop de cada barra a quin any correspon.

 

Accesibilidad-diseño-prototipos-Graficos-años-Itequia-Design

 

Una altra solució interessant és la de superposar textures o patrons als colors per a una millor identificació:

 

Accesibilidad-diseño-prototipos-Texturas-Itequia-Design

 

Contrast

Un altre punt important que també té a veure amb el color és el contrast. Consisteix que els textos puguin llegir-se correctament quan van sobre un fons de color. En aquest exemple, veiem que el primer botó es llegeix bé, però el segon no.

 

Accesibilidad-diseño-prototipos-Contrast-Itequia-Design-cat

 

Per comprovar si el contrast és l’adequat, podem seguir les pautes de la WCAG, on indiquen que el mínim de contrast perquè els textos es puguin llegir correctament és de 4,5:1 (o 3:1 en titulars grans i elements similars). Aquesta és una mesura que ve donada per uns paràmetres de la luminància dels colors i no hem de saber com calcular-la; per fer la verificació podem fer servir eines que fan la revisió. Per exemple, amb connectors de Figma. 

Mida del text

Per assegurar una bona lectura, també cal que el text tingui una mida adequada. Si és massa petit, hi haurà moltes persones a qui li costi llegir-lo, especialment persones grans o amb problemes de visió. Molts autors recomanen que la mida mínima per al text de paràgraf sigui 16px, i que aquesta mida augmenti si l’usuari fa zoom de la pàgina.

 

Accesibilidad-diseño-prototipos-Tamaño-Texto-Itequia-Design

 

Principi 2 d’accessibilitat: Operable

Els components de la interfície d’usuari i la navegació han de ser operables.

Aquest principi fa referència al fet que s’ha de poder interactuar amb els components de manera correcta. Per exemple, els usuaris han de saber què fa el botó o enllaç abans de fer clic, o els formularis s’han de poder navegar només amb el teclat.

Navegació

La pàgina web ha de ser fàcil de navegar i identificar a quina secció estem. Cal tenir en compte que l’usuari no sempre arribarà a la web a través de la home o la pàgina d’inici, per la qual cosa és important indicar sempre a quina secció s’està (amb un títol clar), i una manera extra d’orientar-se i canviar de secció en cas de necessitar-ho (per exemple, mitjançant breadcrumbs o un menú de navegació). Els enllaços a les diferents seccions han de ser curts i descriptius, perquè l’usuari sàpiga què es trobarà en fer clic.

 

Accesibilidad-diseño-prototipos-Navegació-Itequia-Design-cat

 

Temps i animacions

En el cas que la interfície tingui interaccions basades en moviment, hem de considerar si són necessàries, si tenen prou temps perquè l’usuari prengui acció sobre elles, i donar l’opció de desactivar el moviment en cas de no ser necessàries. Per exemple, que en esborrar un element aparegui un missatge indicant que s’ha esborrat i l’opció per desfer l’acció, i que aquest missatge no desaparegui fins que l’usuari l’hagi llegit i hagi considerat si voleu prendre accions.

 

Accesibilidad-diseño-prototipos-Desfer-Itequia-Design-cat

 

Principi 3 d’accessibilitat: Comprensible

La informació i operació de la interfície d’usuari han de ser comprensibles.

En aquest principi parlem de tot allò que influeix en la comprensió de la interfície per part de l’usuari, ja sigui l’idioma, l’ús de paraules senzilles o complexes, una identificació clara dels elements, missatges d’error i ajuda, etc.

Formularis 

Els formularis tenen les pròpies consideracions d’accessibilitat a banda dels principis perceptibles que ja hem vist (color, contrast, mida del text). Moltes pàgines i productes opten per dissenyar formularis moderns i originals, o treure l’etiqueta dels camps i posar-la dins del propi camp (com placeholder) per estalviar espai o que quedi visualment més compacte. Però això pot provocar problemes.

En formularis petits (per exemple, un inici de sessió amb correu i contrasenya), no és tan problemàtic, però en formularis més llargs, en emplenar els camps l’usuari pot sentir-se perdut si ha de tornar enrere i el camp no està clarament identificat .

Els placeholders també presenten diversos problemes, sent el primer el baix contrast, ja que normalment s’utilitza un color més clar. L’altre problema és que hi ha alguns casos en què els usuaris puguin pensar que els camps ja estan emplenats.

 

Accesibilidad-diseño-prototipos-Label-Itequia-Design-cat

 

Missatges d’error

La indicació dels errors s’hauria de fer de manera clara i, si és possible, indicant la solució o on poden trobar ajuda. També és òptim posar el codi d’error per a una possible identificació de l’error exacte.

 

Accesibilidad-diseño-prototipos-Error2-Itequia-Design-cat

 

En el cas específic dels formularis, el que és òptim és que l’avís estigui al costat del camp que està donant l’error. Es pot fer servir el color com a suport per indicar l’error, però sempre amb altres elements que ajudin a la identificació (com ara icones i el propi text de l’alerta).

 

Accesibilidad-diseño-prototipos-Error-Itequia-Design-cat

 

Principi 4 d’accessibilitat: Robust

El contingut ha de ser prou robust per poder ser interpretat per una gran quantitat de dispositius, incloent tecnologies d’assistència.

Aquest principi té més a veure amb el desenvolupament que amb el disseny, i fa referència a la creació de codi de qualitat seguint pautes i estàndards. La interfície ha de veure’s correctament independentment del navegador (Chrome, Firefox, Safari…) i el dispositiu (ordinador, tablet, mòbil…).

A més, les interfícies han de ser compatibles amb tecnologies dassistència com a lectors de pantalla.

Per saber-ne més sobre els estàndards d’accessibilitat podeu consultar la Guía d’Accessibilitat de la WCAG. 

Registra't a la nostra newsletter​

    En què et podem ajudar?