Anar al contingut principal
Pautes d'Accessibilitat digital

Accessibilitat per a dissenyadors

Tothom es beneficia dels dissenys que són més fàcils de veure. Les persones amb diferents habilitats visuals veuen els vostres dissenys de diferents maneres: la naturalesa diversa de les deficiències crea una gran variació en la manera com es perceben els vostres dissenys. Una presentació visual neta i clara ajuda a tothom a donar sentit a la informació i la funcionalitat d'un lloc web.

Disseny inclusiu

Adopta una mentalitat de disseny inclusiva.

Passos a fer

  • Considereu els requisits d'accessibilitat com un conjunt de restriccions de disseny que us ajuden a crear un producte millor per a tots els usuaris.
  • Aconseguiu una comprensió bàsica de les principals categories de discapacitats, limitacions o barreres que afecten la manera com les persones utilitzen els serveis digitals.
    • Discapacitats visuals, com ara ceguesa i baixa visió, daltonisme,
    • Discapacitats auditives, com ara sordesa i baixa audició, tinnitus
    • Problemes motors, com ara tremolors de mans, deformitats físiques o amputacions
    • Trastorns cognitius, com ara la dislèxia, la demència o la privació de son
  • Entendre que gairebé tothom pateix algun tipus de discapacitat, ja sigui de manera permanent, temporal o situacional. Per exemple: tenir només un braç és una condició permanent, tenir un braç en un guix és temporal i sostenir un nadó amb un braç és una situació, però en cada cas estàs limitat a completar les tasques amb un braç.
  • Buscar maneres de fer que el vostre producte sigui més fàcil d'utilitzar per a persones amb discapacitat també millora l'experiència per a tothom.
  • Dissenyeu per a una millora progressiva assegurant-vos que cada persona pugui utilitzar el vostre producte utilitzant les tecnologies més bàsiques, alhora que ofereix millors experiències per a aquells que les poden utilitzar.
  • Quan feu recerca d'usuaris, assegureu-vos que la diversitat dels vostres participants reflecteixi les diferents habilitats, circumstàncies i antecedents dels vostres usuaris reals.

Referències WCAG 2.1

Tecnologia d'assistència

Familiaritzeu-vos amb les maneres bàsiques en què les persones utilitzen la tecnologia d'assistència.

Passos a fer

  • Feu un curs bàsic d'accessibilitat web, per obtenir un coneixement bàsic de l'accessibilitat.
  • Apreneu a navegar per una pàgina web només amb el teclat i apreneu a utilitzar un lector de pantalla, com ara VoiceOver al vostre Mac, perquè pugueu comprovar les noves funcions quan sigui necessari. Això us pot ajudar a entendre la tecnologia en si, però tingueu en compte que les persones que l'utilitzen cada dia solen tenir les seves pròpies estratègies per utilitzar aquestes eines.
  • Observeu les persones que utilitzen tecnologia d'assistència (AT) al vostre producte o a altres. En alguns casos, és possible que trobis vídeos que demostrin com la gent utilitza diferents estratègies per interactuar amb productes digitals.
  • Conegueu les diferents tecnologies d'assistència. Aquests inclouen lectors de pantalla, dispositius de commutació, lupes de pantalla i altres. Altres tipus de tecnologies d'assistència us poden ser més familiars i inclouen el control de veu al vostre telèfon mòbil, teclats ergonòmics o la funció de zoom nativa d'un navegador. Les persones tenen diferents nivells d'habilitat en com utilitzen aquestes tecnologies i és probable que algunes només seran utilitzades per persones amb discapacitats específiques a llarg termini.

Referències WCAG 2.1

Color i contrast

Hi ha prou contrast entre el text i el seu color de fons?

Per a qui és important: L'Esther té poca visió i necessita contingut que tingui prou contrast per llegir-lo.

Passos a fer

  • Proporcioneu un bon contrast. Assegureu-vos que el contrast entre el text i el fons sigui superior o igual a 4,5:1 per a text petit i 3:1 per a text gran.
  • Excepcions:
    • Els requisits de relació de contrast de color s'apliquen al text i als gràfics que són essencials per entendre el contingut o la funcionalitat. No cal que compliu els requisits de contrast de color per a logotips o elements gràfics no rellevants.
    • El text que forma part de l'estat d'un control desactivat o dels botons desactivats no ha de complir la relació de contrast mínima.
    • El text que forma part d'un logotip no té un requisit mínim de contrast.
  • Atenuar lleugerament el contrast entre el text i el color de fons. Per exemple: no utilitzeu text negre pur sobre un fons blanc pur. El fort contrast pot provocar un text borrós o en moviment per a les persones amb síndrome d'Irlen.
  • Per utilitzar text sobre imatges, afegiu un fons sòlid darrere del text o una superposició fosca a la imatge.

Recursos

Video tutorial: Meeting contrast requirements
Video tutorial: How I do an accessibility check (contrast)

Referències WCAG 2.1

Pots entendre tot el que comunica el disseny sense dependre del color?

Per a qui és important: En Joel és daltònic vermell-verd i no pot donar sentit de manera fiable a la informació que es transmet només amb el color.

Passos a fer

  • No utilitzeu només el color per transmetre significat. Utilitzeu icones, contingut escrit i altres elements visuals per reforçar la comunicació clara del contingut.
  • Comprova com és veure els teus dissenys mitjançant un simulador de daltonisme.

Referències WCAG 2.1

1.4.1 Ús del color

Maquetació i jerarquia

Pots entendre ràpidament el significat de la pàgina i completar la teva tasca?

Per a qui és important: En Marc està distret i ha d'omplir un formulari web important.

Passos a fer

  • Assegureu-vos que la informació clau es pot distingir d'un cop d'ull. Dissenyar de manera mínima i intencionada perquè l'usuari pugui obtenir tanta informació el més ràpidament possible.
  • Creeu una jerarquia clara d'importància col·locant elements a la pantalla segons el seu nivell relatiu d'importància. Per exemple, col·loqueu accions importants a la part superior o inferior de la pantalla (s'hi pot accedir amb dreceres).
  • Planifique l'estructura d'encapçalaments previament. Assegureu-vos que tot el contingut i el disseny s'ajustin a una estructura d'encapçalaments lògic.
  • Considereu l'ordre de lectura. L'ordre de lectura ha de ser el mateix que l'ordre visual.
  • Agrupeu els elements relacionats a prop els uns dels altres per ajudar aquells que tenen poca visió o problemes per centrar-se en la pantalla.

Recursos

Accessibilitat - Disseny de materials
WebAIM: Accessibilitat web per a dissenyadors

Referències WCAG 2.1

Tipografia

Pots llegir i comprendre fàcilment la informació textual de la pàgina??

Per a qui és important: En Jordi té poca visió i té problemes per llegir textos petits.

Els ulls de la Marta estan tensos després d'un llarg dia treballant amb un ordinador.

Passos a fer

  • Utilitzeu una mida de lletra prou gran per al text del cos perquè la gent pugui llegir còmodament. Utilitzeu almenys una mida efectiva de 16 píxels, però això pot variar segons el disseny del tipus de lletra.
  • Mantenir una longitud de línia que afavoreixi una lectura còmoda. No feu les línies massa llargues ni massa curtes: s'admeten 45-75 caràcters per línia i aproximadament 66 caràcters per línia són còmodes. Els fragments de text més curts estan bé per a subtítols, text marginal i formularis.
  • Trieu un tipus de lletra que faci èmfasi en la claredat i la llegibilitat.
    • Factors a considerar:
      • Funciona bé quan és petit o gran.
      • Té una gran alçada x.
      • El personatge és gran per la seva mida de punts.
      • Les mètriques (com ara l'alçada x) són coherents entre les formes de lletra.
      • Les formes de lletres individuals tenen una forma diferent i no es poden confondre amb altres. Per exemple: I, l i 1 són diferents. 0 i O són diferents.
      • El tipus de lletra admet tots els caràcters i estils de lletra que es necessiten.
    • Alguns dissenyadors recomanen fonts sense serif per a les interfícies d'usuari i fonts serif per a una lectura llarga, però aquestes no són regles estrictes.
  • Utilitzeu els encapçalaments per comunicar la jerarquia. Assegureu-vos que els estils dels títols difereixen del text del paràgraf per alguna combinació de font, mida, pes o color. Això garanteix que siguin diferents del text del paràgraf, però que estiguin relacionats entre si amb certa coherència.
  • Utilitzeu la mida i l'amplada de la vostra línia per determinar una alçada de línia que la gent pugui llegir còmodament. Com més gran sigui la mida del tipus i l'amplada de la línia, més gran hauria de ser l'alçada de la línia. Per el cos de text, això sol ser al voltant de 1,4-1,65, els encapçalaments al voltant de l'1-1,3 i els subtítols o les línies curtes al voltant de l'1,3. Les línies que estan espaiades massa o massa poc poden disminuir la llegibilitat, ja que dificulten a l'ull saber on tornar quan es trenqui la línia.

Recursos

Referències WCAG 2.1

1.4.8 Presentació visual

Imatges

Heu identificat quines imatges són significatives i quines són decoratives?

Per a qui és important:La web que visita la Carme no s'ha carregat del tot i no ha pogut descarregar les imatges.

L'Amanda és cega i utilitza un lector braille per entendre el contingut de les imatges.

En Martí està buscant informació amb un motor de cerca i necessita ajuda per ser dirigit al contingut adequat (les etiquetes alternatives descriptives milloraran la cerca).

Passos a fer

  • Les imatges que siguin purament decoratives no les hauria d'anunciar el lector de pantalla, treballeu amb el vostre desenvolupador frontal per assegurar-vos que estiguin codificades correctament.
  • Les imatges que tinguin significat haurien d'incloure text alternatiu i possiblement una descripció més llarga, treballeu amb el dissenyador de contingut del vostre equip per crear-les.
  • Assegureu-vos que qualsevol text dins d'una imatge tingui almenys 14 punts i un bon contrast.

Referències WCAG 2.1

Gràfics i icones

Podeu entendre fàcilment el contingut associat a gràfics, icones i imatges?

Per a qui és important: La Marisa utilitza principalment el seu dispositiu mòbil per navegar per llocs web i té problemes per interpretar visualitzacions amb text petit.

Passos a fer

  • Assegureu-vos que tots els gràfics tinguin subtítols descriptius escrits en llenguatge senzill.
  • Eviteu utilitzar gràfics quan el contingut escrit pugui comunicar el mateix.
  • Utilitzeu icones com a indicis visuals útils per connectar-vos als conceptes. Utilitzeu només les icones amb propòsit i no per a la decoració. Utilitzeu icones conegudes que la gent està acostumada a associar amb accions habituals, com ara una paperera per representar la supressió d'alguna cosa.
  • Per utilitzar text sobre imatges, afegiu un fons sòlid darrere del text o una superposició fosca a la imatge.

Referències WCAG 2.1

Visualitzacions de dades

Pots entendre la tendència general del gràfic? Pots entendre ràpidament la relació entre parts de les dades?

Per a qui és important: En Manel té problemes per llegir gràfics amb text petit.

Passos a fer

  • Seguiu les millors pràctiques de visualització de dades: permeteu que les dades i els vostres objectius de comunicació per a la visualització dictin el format i l'estil visual, en lloc de la darrera tendència estètica.
  • Doneu suport a les imatges amb una breu descripció de la tendència general que genera el gràfic per donar context.
  • Assegureu-vos que les dades i les variables estiguin clarament etiquetades.
  • Assegureu-vos que hi hagi prou contrast entre els colors del gràfic perquè les persones amb daltonisme puguin distingir els colors.
  • Penseu en complementar el gràfic amb una taula d'informació perquè els usuaris de lectors de pantalla puguin llegir-lo més fàcilment i quan es comprimeixi al mòbil.

Referències WCAG 2.1

Formularis

Els formularis són el més senzills possible i només demanen el que es necessita per completar la tasca? Pots completar el formulari amb èxit?

Per a qui és important:En Mateo té pressa per omplir un formulari d'assegurança mèdica per a la seva filla malalta.

La Janet comença a mostrar signes de demència i té problemes amb la pèrdua de memòria a curt termini, necessita validar la seva identificació per sol·licitar una nova targeta de la seguretat social.

En Jordi utilitza una lupa de pantalla i quan els missatges de validació es mostren al costat, pot perdre'ls fàcilment.

Passos a fer

  • Presenta els camps en un disseny d'una sola columna. Això fa que l'impuls visual es mogui cap avall per la pàgina perquè els usuaris no hagin de reorientar-se amb diverses columnes. (Les excepcions a aquesta regla són camps curts i lògics que es poden presentar a la mateixa fila, com ara Ciutat, Estat i codi postal).
  • Assegureu-vos que els camps del formulari tinguin etiquetes descriptives que romanguin visibles fins i tot després d'omplir un camp.
  • Assegureu-vos que els camps del formulari tinguin límits o contorns clarament definits perquè les persones amb discapacitats cognitives coneguin la mida i la ubicació de l'objectiu del clic.
  • No utilitzeu placeholder als camps del formulari com a substitut de les etiquetes. El placeholder causa problemes d'usabilitat perquè desapareix quan s'introdueix contingut al camp del formulari. Els consells i instruccions han de ser persistents i col·locar-se fora del camp.
  • Proporcioneu estats d'error molt visibles i específics. Utilitzeu diverses indicacions com el color, les icones, el pes de la lletra en negreta, la vora o el contorn gruixuts i el text útil per assegurar-vos que els usuaris no passin per alt aquesta informació crítica.

Recursos

Referències WCAG 2.1

Mòbil

Pots entendre informació clau i realitzar tasques crítiques en un dispositiu mòbil?

Per a qui és important:La Miyako acaba de perdre la feina i va cancel·lar la seva connexió a Internet per reduir gastos. Només té el seu mòbil per navegar per Internet.

L'Hipòlit s'està recuperant d'un ictus i lentament torna a aprendre a utilitzar el braç. Fa servir el seu telèfon per ajudar-lo a trobar informació a la xarxa.

En Pep té gegantisme a causa d'un tumor a la seva glàndula pituïtària durant la infància. Té unes mans molt grans, cosa que fa que els enllaços petits o massa propers siguin difícils de tocar al seu telèfon.

La Rosa consulta les últimes notícies al seu telèfon durant el seu desplaçament matinal en un autobús ple de gom a gom, sovint mentre beu de la tassa de cafè que té a l'altra mà.

Passos a fer

  • Assegureu-vos que podeu accedir fàcilment a les accions principals amb el polze dret o esquerre, fins i tot en telèfons més grans. Els elements de la part inferior de la pantalla solen ser més fàcils d'arribar.
  • Feu objectius tàctils com a mínim de 48 píxels. Això permetrà que l'objectiu sigui colpejat per un dit d'adult, que de mitjana mesura 10 mm. Les icones poden ser més petites i podeu treballar amb el vostre desenvolupador per estendre el farciment (padding) més enllà de la icona.
  • En la majoria dels casos, els objectius tàctils estan separats per 8 píxels d'espai o més per garantir que els usuaris no seleccionen l'acció incorrecta.

Recursos

Accés amb teclat

Podeu arribar a qualsevol cosa que sigui interactiva amb la tecla de tabulació?

Per a qui és important:La Maria té tendinitis i no pot utilitzar el ratolí; en canvi, fa servir el teclat per navegar per la web. Quan el focus salta aleatòriament per la pàgina, es confon.

L'Alfred és cec i fa servir un lector de pantalla per navegar per la web; quan apareix un modal i no se centra, potser ni tan sols sàpiga que hi és.

Passos a fer

  • Assegureu-vos que un usuari pugui utilitzar la tecla de tabulació per navegar per tots els elements interactius d'una pàgina.
  • Assegureu-vos que podeu arribar a tots els elements interactius i activar-los amb la barra espaiadora, la tecla Intro o les tecles de fletxa.
  • Comproveu que cada element interactiu tingui un estat d'enfocament visible. Assegureu-vos que hàgiu dissenyat estils intencionats per a aquests estats: enfocar, passar el cursor, actiu i visitat.
  • Comproveu que el focus és sempre visible i que els elements interactius de la pàgina apareixen en ordre lògic. Assegureu-vos que cap contingut es centra fora de la pantalla o s'amaga a la vista.
  • Treballeu amb el vostre dissenyador de front-end per identificar qualsevol interacció a la pàgina que requereixi JavaScript o que no es pugui crear amb elements HTML predeterminats. Hauríeu de dissenyar intencionadament com flueix el focus a través d'aquestes interaccions.

Recursos

Referències WCAG 2.1

Dreceres de navegació

Heu inclòs dreceres de navegació per als usuaris de lectors de pantalla i teclat?

Per a qui és important:L'Octavi és cec i utilitza un lector de pantalla per navegar per la web; utilitza elements de referència per navegar ràpidament per seccions d'una pàgina web.

La visió de la Judith és correcte, però té problemes per utilitzar el ratolí, de manera que navega per la web només utilitzant el seu teclat; odia haver de fer tabulació a través de tots els enllaços de la navegació de la capçalera per arribar al contingut principal d'una pàgina.

Passos a fer

  • Treballeu amb el vostre programador front-end per identificar els elements bàsics de referència a les vostres estructures, especialment per a dissenys complexos. Els elements emblemàtics s'identifiquen mitjançant marcadors semàntics HTML5 o mitjançant rols ARIA quan HTML no pot identificar alguna cosa. No cal ser un expert en HTML o ARIA, sempre que en conegueu els fonaments bàsics.
    • header
    • nav
    • main
    • footer
    • search
    • form
  • Incloeu un enllaç "Vés al contingut principal" abans de la capçalera per als usuaris del teclat. Els usuaris del teclat no poden aprofitar la navegació de referència, de manera que un enllaç de salt els ajuda a navegar més ràpidament. Aquest enllaç es pot ocultar visualment, però s'ha de fer visible quan estigui enfocat.

Referències WCAG 2.1

Lector de pantalla

Podeu utilitzar un lector de pantalla per accedir al contingut de la pàgina?

Per a qui és important:L'Aisha és cega i utilitza un lector de pantalla per navegar per la web.

Passos a fer

  • Utilitzeu un lector de pantalla per assegurar-vos que podeu utilitzar als controls i que anuncien contingut en l'ordre i el context adequats (és a dir, etiquetes abans dels camps del formulari, capçaleres abans del contingut, etc.).
  • Si hi ha formularis, assegureu-vos que el lector de pantalla llegeix les etiquetes i les instruccions.
  • Assegureu-vos que tots els enllaços siguin correctament descriptius. Per exemple, el text de l'enllaç "Llegir més" no proporciona context sobre on anirà l'usuari si hi fa clic, mentre que "Llegir més sobre subvencions nominatives" descriu què hi ha a l'altre costat de l'enllaç.

Recursos

Referències WCAG 2.1