Disseny Web Accessible

És habitual que quan parlem de pàgines web accessibles el primer que ens vingui al cap sigui una persona amb una discapacitat visible davant d'un ordinador; Doncs això no és així.

Segurament, tot usuari de dispositius amb connexió a internet necessitarà almenys una vegada a la seva vida l'accés a pàgines web accessibles.

Pero com ha d'estar dissenyada una pàgina web perque sigui accessible per a tothom? En aquest post hi trobareu les pautes més importants i necessàries que ha de seguir un lloc web per aconseguir-ho.

 

A qui beneficia l'accessibilitat web?

 

- Usuaris amb discapacitat

 

- Usuaris inexperts

 

- Usuaris d’equips reduïts

 

- Usuaris amb equips antiquats

 

- Usuaris que no dominen l’idioma 

 

- Usuaris amb lesions temporals 

 

- Gent Gran

 

Pautes més importants per a un Disseny web Accessible

 

 

 

Estructura i llegibilitat del contingut de la pàgina

Per a garantir la bona llegibilitat i funcionalitat de la pàgina tots els elements han de ser accessibles mitjançant el teclat, l’ordre visual dels elements del lloc web ha de ser igual que l’ordre de lectura i la mida del text hauria de ser més gran de 10pt, tot i que això pot variar depenent del tipus de font utilitzada. Per a les llistes o seccions d'enllaços s'han d'utilitzar sempre les etiquetes ol/ul i li. És important informar a l’usuari sobre la seva ubicació dins del lloc web mitjançant un breadcump i hi ha d’haver sempre un enllaç al contingut principal situat a la part superior de la pàgina 

Quant a l’estructura dels elements, els encapçalats s’han d’utilitzar de manera correcta, respectant el número de l’encapçalat (h1,h2,h3,h4,h5,h6) i aplicar-lo en l’ordre que correspon, Títol, Subtítol, Sub-sub títol, etc. La línia de cada paràgraf no ha de ser ni massa llarga ni massa curta, ja que això dificulta molt la lectura, i per garantir-ho s’ha de fer ús de llistes i tenir una estructura consistent així com no utilitzar lletres majúscules en excés. Les marquesines, els deslliçadors, etc. Poden afectar molt la lectura de segons quins usuaris. És important assegurar-se que aquest tingui suficient temps per poder llegir correctament el contingut.

 

Contrast dels colors

Hi ha d’haver un bon contrast entre el color del fons i el color del text. Sobretot s’ha d’anar amb compte amb l’ús dels grisos més clars, el taronja i el groc.

Recomanem aquesta eina per comprovar el contrast entre el text i el fons http://webaim.org/resources/contrastchecker/

 

Utilitzar text, no imatges

Utilitzar text en lloc d’imatges ajuda a què la pàgina es carregui més ràpid, 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 alemnys fins al 200%.

 

Text Alternatiu, Subtítols i contingut parpellejant

Tots els elements visuals de la web han de contenir un Text alternatiu que ha de descriure textualment el que es veu a la imatge.

En el cas d’elements sonors o videos s’haurà de proporcionar l’opció de subtítols sincronitzats directament, Una transcripció no és suficient. A més s'ha de donar la possibilitat a l'usuari de controlar-los, amb botons de Pausa i Play així l'usuari podrà parar el contingut i tornar-lo a començar des d'allà on l'ha pausat.

Els elements parpellejants han de tenir una durada màxima de 3 segons i a més s'han de poder parar o desactivar en actualitzar la pàgina.

Exemple

Text alternatiu Correcte - "Una parella corrent per un camí"

 

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.

Els usuaris de teclats i altres dispositius amb funcions similars han de poder identificar un enllaç visualment. Es poden utilitzar línies de punts o qualsevol altre codi de color.

Evitar els tòpics en els enllaços tals com “fes click aquí”, “Continuar”, “Veure més”, ja que poden generar confusió. Els textos enllaçats han de ser una descripció de la pàgina on es dirigeix aquest enllaç.

Exemple:

X - Al blog de TOTHOMweb hi trobareu un post sobre el Disseny web accessible – Veure més

                 

V – Al blog de TOTHOMweb hi trobareu un post sobre el Disseny web accessible

 

Beneficis del Disseny Accessible

- Millora en la indexació dels cercadors degut a la correcte utilització del codi i de les normes d'accessibilitat. 

- Incrementació per tant de la quota de mercat i l'audiència

- Augment de la usabilitat per a tots els usuaris que comporta un augment del públic objectiu

- Evidència del compliment de la llei

- Reducció de costos a llarg termini

- Millora de l'accés des de diferents dispositius.

- Responsabilitat corporativa

- Simplificació del desenvolupament i el manteniment

- Compliment del estàndards web i per tant garantia d'una visibilitat correcte des de qualsevol dispositiu

- Reducció del temps de càrrega de la pàgina web i el servidor

- Reforç de la imatge empresarial i valor per diferenciar-se de la competència