Dia mundial del disseny: l’accessibilitat i el disseny atractiu poden anar de la mà?

El Dia Mundial del Disseny se celebra el 27 d'abril per iniciativa del Consell Internacional d'Associacions de Disseny Gràfic. L'objectiu és homenatjar a tots aquells que treballen en aquesta disciplina.

El dissenyador gràfic és un professional que treballa per rebre tota la informació necessària per després plasmar-la com a comunicació visual, sense la necessitat de paraules. D'aquesta manera transmet missatges específics mitjançant la utilització del gràfic.

La transformació del disseny gràfic ha anat de la mà del desenvolupament tecnològic. Els nous mètodes s'han imposat a l'ús de la tinta i la tipografia tradicional. A poc a poc s'han anat substituint els sistemes analògics pels digitals. Avui en dia, l'ordinador és l'eina bàsica i principal del dissenyador.

Diversos estudis han demostrat que els usuaris es creen la primera impressió d'una pàgina web
mitjançant la seva imatge, és a dir, per influència directa del disseny web. El disseny gràfic i la creativitat s'han convertit en aspectes fonamentals en la definició de la identitat visual i corporativa d'una empresa.

El disseny i la maquetació d'una pàgina web són el que permeten a l'usuari fer-se una idea de l'empresa i que aquesta li transmeti confiança i credibilitat. Un lloc web corporatiu ha d'explicar la missió, la visió, els objectius i els valors de l'empresa i ha d'impressionar els seus clients potencials des d'un primer moment. A banda de causar una bona impressió, la pàgina web ha de tenir en compte la usabilitat, estar activa i actualitzada, tenir una alta velocitat de càrrega, estar optimitzada per un bon posicionament web i funcionar correctament. A més de tot això, és imprescindible que el web sigui accessible per tothom i accessible no vol dir avorrit, simple o amb poc color i sense elements innovadors.

El disseny accessible i usable és essencial per a les persones amb discapacitat visual, les persones grans, les que pateixen autisme o discapacitats cognitives o problemes de comprensió entre altres perfils. També cal tenir-lo en compte perquè el web es visualitzi adequadament en diferents navegadors, dispositius i situacions lumíniques, etc. però tot això no significa que hàgim de crear un web poc creatiu i atractiu.

Elements a tenir en compte alhora de dissenyar un web accessible

El contrast de colors
Quan es crea un disseny una de les primeres decisions és escollir els colors. Vol dir que haurem de dissenyar en blanc i negre o sempre amb els mateixos colors?
No, en absolut.
Cal tenir en compte, especialment, el criteri 1.4.3 de les pautes d'accessibilitat al Contingut 2.1:

Contrast (mínim): la presentació visual del text i les imatges de text ha de tenir una ràtio de contrast com a mínim de 4,5:1, excepte en els casos següents: (Nivell AA).

• Text gran: el text amb caràcters tipogràfics grans i les imatges del text amb caràcters tipogràfics grans han de tenir una ràtio de contrast com a mínim de 3:1;
• Accidental: el text o les imatges de text que formen part d'un component d'interfície de l'usuari inactiu, que són simple decoració, que no són visibles per ningú o que formen part d'una imatge que conté un altre contingut visual significatiu, no tenen una ràtio mínima de contrast.
• Logotip: el text que forma part d'un logotip o del nom d'una marca no té cap requisit de contrast mínim".

Cal tenir especial cura amb els tons dels grisos, taronges i grocs, però això no vol dir que hi hagi colors prohibits.
El criteri 1.4.3 només avarca "la presentació visual de text i imatges de text" i el criteri 1.4.11 el complementa, ja que el contrast ara també és necessari per a:

• Les icones (que no van amb text)
• Els gràfics, per exemple, cada una de les seves línies
• L'indicador del focus del teclat

Les tècniques suficients per a les gràfiques són: que el contrast entre els colors sigui suficient així com el contrast de les línies entre colors adjacents.
Les tècniques suficients per als textos de les gràfiques són: que s'incloguin etiquetes i valors; que les imatges que transmeten informació i els textos de les gràfiques tinguin suficient contrast; o que hi hagi un control amb suficient contrast que permeti als usuaris canviar a una presentació que utilitzi suficient contrast.

Com es pot comprovar el contrast mínim?

Un web útil per a fer-ho és: Webaim color Contrast Checker entre d'altres.

• No dependre només del color

Hi ha persones que no poden veure o distingir els colors. Per aquest motiu cal tenir en compte que no només es podrà transmetre informació a través d'aquest. Exemple: un calendari que compti amb dies en vermell i verd segons si un establiment és obert o tancat també haurà de tenir algun símbol (asterisc o qualsevol altre) que permeti distingir la diferència.

• Orientació, navegació consistent i col·locació dels elements

Cal parar atenció a l'hora de dissenyar les pàgines perquè els elements segueixin una col·locació similar i facilitin una navegació consistent. També una lectura lògica i una estructura d'encapçalaments, etc. Que permeti comprendre la jerarquia dels continguts.

• Text, mida i tipus de la font

Tot i que després en la maquetació i programació caldrà assegurar que aquesta es pugui ampliar, la font haurà de tenir, com a mínim, 10 punts si bé això pot variar depenent del tipus de font utilitzada. Es recomana utilitzar tipografies d'estil Serif i Sans Serif. Els encapçalaments han de tenir una font, com a mínim, un 20% més gran que el text. Cal evitar l'excés de majúscules.

Les línies no han de ser ni molt curtes ni molt llargues i cal deixar espais entre paràgrafs i al voltant dels encapçalaments. Utilitzar text en lloc d'imatges ajuda a fer que la pàgina es carregui més ràpidament, a més es pot llegir sense problemes des de dispositius utilitzats per persones amb discapacitats i es pot traduir més fàcilment. El text s'ha de poder augmentar sense perdre contingut o funcionalitat almenys fins al 200%.

• Enllaços

Els enllaços han d'estar diferenciats de la resta del text, i preferiblement no només amb el color , sinó altres recursos com per exemple el subratllat. Cal pensar que és important la informació contextual dels enllaços. Evitar textos com "Aquí" o "+ info". L'usuari ha d'estar informat en tot moment d'on condueixen els enllaços als quals farà clic. Per exemple, quan un enllaç s'obre en una finestra nova es pot aconseguir mitjançant una icona adjacent a l'enllaç.

• Breadcrump i enllaç per saltar al contingut principal

És important informar a l'usuari sobre la seva ubicació dins del lloc web mitjançant un breadcrump
(també anomenat fil d'Ariadna) i hi ha d'haver sempre un enllaç al contingut principal situat a la part superior de la pàgina que pot estar ocult, però quan els usuaris de teclat passin per damunt caldrà que sigui visible.

• Controls de formulari

Els controls de formulari han de tenir etiquetes i instruccions descriptives.
Cal parar atenció al contrast del contorn o límits visuals d'un camp de formulari o botó, sempre que no estigui deshabilitat.

• Incloure animacions, vídeos i àudios amb compte

Si es decideix incloure un carrusel, per exemple, caldrà pensar que en el disseny hi ha d'haver un botó per a aturar el moviment d'aquest o de qualsevol altre element que es mogui en el cas que el moviment sigui automàtic.
El reproductor de vídeo o de so que s'inclogui ha de contenir un bon contrast en tots els seus elements, inclòs l'indicador visual del valor actual en un control lliscant.
Els controls mínims que ha de tenir són: botons per reproduir, aturar, escollir volum, avançar/retrocedir, activar subtítols i activar audiodescripció.
Els elements parpellejats han de tenir una durada màxima de 3 segons i a més s'han de poder aturar o desactivar en actualitzar la pàgina.

Us recomanem consultar la  guia de bones pràctiques per a la creació d'un disseny web accessible (Guia breu per a dissenyadors web) que vam redactar per l'ajuntament de Barcelona.  

Necessiteu ajuda per dissenyar un web accessible?

A TOTHOMweb som especialistes en accessibilitat. Dissenyem i desenvolupem pàgines web
accessibles, responsives, modernes i atractives.

Oferim un servei complet
PLANIFICACIÓ > DISSENY > DESENVOLUPAMENT > MANTENIMENT

Contacta amb nosaltres i t'ajudarem a aconseguir-ho.