Com crear un disseny accessible d'una pàgina web

pantalla portàtil

Botigues en línia, aplicacions bancàries, reserves d'hotel o treballs freelance, cada vegada són més les tasques que es manegen a través d'l'internet i que han reemplaçat en alguns casos, als mitjans convencionals.

Aquest ràpid creixement de les operacions digitals ens ha facilitat en molts aspectes la vida. Ens estalvia temps ja que les transaccions són més ràpides i no cal desplaçar-se a cap establiment físic, i per descomptat, s'han creat nous mitjans que abans no existien i que ara la major part de la gent fa servir, com les xarxes socials, l'streaming de pel·lícules i sèries en plataformes com Netflix, o sistemes de pagaments en línia com Paypal.

Amb aquest auge de l'món digital és indispensable invertir en el desenvolupament d'interfícies accessibles i ben dissenyades per als usuaris. No obstant això, no podem oblidar que hi ha usuaris que pateixen de discapacitats físiques o psicològiques que limiten considerablement la seva experiència i la seva capacitat de maneig d'ordinadors i mòbils.

Encara que hi ha algunes discapacitats, com les persones que fan servir cadires de roda, que no interfereixen amb l'ús de l'internet, altres, com problemes de la vista o ceguesa, problemes de coordinació motora, sordesa, o l'autisme, poden dificultar greument la capacitat de navegar a la web. Per a aquests casos, ja s'han creat alguns Dispositius com els lectors de pantalla, que assisteixen i donen suport als usuaris en les àrees on tenen impediments.

Però aquesta és només la primera part de la resolució de el problema. Pensant en aquests usuaris, hem de dissenyar interfícies de pàgines web que facilitin la seva experiència i s'adaptin a les seves necessitats. Hi ha alguns principis a l'hora de dissenyar que podem aplicar.

Contingut i fonts

Començant pel més bàsic, cal establir prioritats en el disseny de l'contingut. La capçalera i la barra de menú han de poder localitzar fàcilment a nivell visual i han de ser el primer que l'usuari vegi. Els elements en la pàgina d'inici, les imatges i la informació rellevant serà el segon a situar.

En moltes pàgines apareixen ads o banners publicitaris. Si de per si això és molest per a tots els usuaris, per als que tenen impediments visuals resulta un problema ja que causa molta confusió, i interfereix amb la lectura de l'esquema de la web. Per això és indispensable que creïs un disseny editorial general de la pàgina que estigui organitzat de manera lògica i entenedora, i que els elements tinguin la mida adequada, de manera que encara hi hagi altres distraccions, els usuaris puguin enfocar-se en el contingut important.

Les tipografies que utilitzis preferiblement han de ser grans i llegibles. Les de tipus Sans serif i bold li faciliten molt la lectura a persones que puguin patir de dislèxia. Altres fonts recomanades són: Arial, Times New Roman, Helvetica, Tahoma, Calibri i Verdana.

I per descomptat, sempre has de tenir cura que hi hagi una diferenciació clara entre el text i el fons. No utilitzis colors similars, tria més aviat colors que contrastin entre si.

Tipus de lletra Sans Serif Bold

Utilitzar tipografies Sans Serif Bold permeten una millor visualització de el text.

text alternatiu

El Text Alternatiu o l'Alt Tag, són les descripcions que se li col·loquen a les imatges a les pàgines web. Encara que aquest text no està disponible perquè el llegeixin els usuaris, un descripció ben redactada és una eina que ens ajuda a aconseguir un millor posicionament SEO.

Però la utilitat de l'Alt Tag no només es redueix a això. per a aquells usuaris que utilitzen lectors de pantalla per discapacitats visuals, les descripcions de les imatges són l'única referència que tenen per saber quina és l'aparença del que està exposat a la pàgina. De manera que si anem a col·locar per exemple, una fotografia d'unes suculentes, un bon text alternatiu seria: Tres plantes suculentes en testos color rosa. Un text molt curt com: Plantes en testos, no és una descripció que de detalls rellevants i per tant no serveix.

Suculentes en test color rosa

Tres plantes suculentes en testos color rosa. Exemple de text alternatiu.

adaptabilitat

A l'hora de dissenyar també hem de tenir en compte totes les presentacions en què va mostrar-se la nostra interfície, Ja sigui en versió web o mòbil. L'experiència sempre serà diferent depenent de l'mitjà en on ho estiguem visualitzant.

Quan utilitzem el mòbil, podem estar exposats a diferents entorns que dificulten la lectura de l'contingut de la pantalla. Si estem en exteriors per exemple, la brillantor de el sol farà que la pantalla es vegi molt fosca, i el soroll no permetrà que escoltem bé els àudios. Per això és important pensar bé aquests detalls, de manera que la versió mòbil tingui lletres grans i colors foscos, i els vídeos han de portar subtítols en cas que sigui difícil escoltar-los.

Pantalla de mòbil

Adaptar el disseny de la interfície perquè sigui llegible tant en mòbils com a ordinadors.

Consistència en el disseny

El disseny editorial que fem de la nostra pàgina web ha de ser el mateix independentment de la secció en on et trobis. Els mateixos icones de la barra d'menú han d'aparèixer a la secció d'Inici com a la secció de Contactes. No hem de canviar l'estil ni la ubicació dels botons claus del web.

Tampoc és convenient que col·loquem vídeos que es reprodueixin automàticament a l'obrir la pàgina. Per als usuaris que fan servir lectors de pantalla, és difícil saber com pausarlos.

Pàgina web starbucks

La barra de menú de la pàgina de Starbucks és igual en totes les seccions.

Navegació per teclat

Finalment, a alguns usuaris amb problemes de coordinació motora se'ls dificulta agafar el ratolí de l'ordinador o utilitzar el ratolí tàctil d'una portàtil, i depenen únicament de el teclat. assegura't que la teva pàgina web estigui dissenyada de manera que pugui ser completament funcional només amb els botons de el teclat.


Deixa el teu comentari

La seva adreça de correu electrònic no es publicarà. Els camps obligatoris estan marcats amb *

*

*

  1. Responsable de les dades: Miguel Ángel Gatón
  2. Finalitat de les dades: Controlar l'SPAM, gestió de comentaris.
  3. Legitimació: El teu consentiment
  4. Comunicació de les dades: No es comunicaran les dades a tercers excepte per obligació legal.
  5. Emmagatzematge de les dades: Base de dades allotjada en Occentus Networks (UE)
  6. Drets: En qualsevol moment pots limitar, recuperar i esborrar la teva informació.