Pautes d'Accessibilitat digital

Accessibilitat per a desenvolupadors front-end

El desenvolupament de front-end accessible garanteix que les persones amb diferents habilitats puguin accedir, entendre i navegar per contingut web, independentment de com hi accedeixin. Els desenvolupadors front-end col·laboren amb altres membres d'un equip multifuncional per implementar una experiència d'usuari sòlida.

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.

Passos a fer

  • Utilitzeu el teclat per navegar per la pàgina amb la tecla de tabulació.
  • 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.
    • Utilitzeu elements HTML semàntics accessibles per defecte (per exemple: botons, entrades etiquetades, etc.). Si heu d'utilitzar divs per a les interaccions, assegureu-vos que es puguin enfocar i que estiguin etiquetats adequadament.
  • Comproveu que el focus sempre és visible i apareix en ordre lògic.
  • Assegureu-vos que cap contingut es centra fora de la pantalla o s'amaga a la vista.
  • Comproveu que la pàgina inclogui un enllaç de navegació per saltar (si la navegació està present abans del contingut principal). Això permetrà als usuaris saltar la navegació anterior per arribar al contingut principal de la pàgina.

Recursos

Vídeo tutorial: Com faig una comprovació d'accessibilitat

Referències WCAG 2.1

Lectors de pantalla

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

Per a qui és important: En David és cec i utilitza un lector de pantalla per navegar per la web.

Passos a fer

  • Utilitzeu un lector de pantalla per assegurar-vos que podeu controlar la pàgina i que anuncien les coses com haurien de ser.
  • Determineu si el document HTML té un atribut d'idioma perquè els lectors de pantalla el llegeixin amb l'accent i la pronunciació correctes.
  • 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 dinosaures" descriu què hi ha a l'altre costat de l'enllaç.

Referències WCAG 2.1

1.3.1 Informació i relacions

Encapçalaments

Esteu utilitzant encapçalaments precisos a la vostra pàgina?

Per a qui és important:En Julià és cec i utilitza un lector de pantalla per navegar per la web. Escolta un esquema de les idees principals de la pàgina i després fa marxa enrere per llegir les parts que li interessen més.

Passos a fer

  • Els encapçalaments descriuen breument la secció que introdueix.
  • Els encapçalaments representen un esquema del contingut.
  • Utilitzeu h1–h6 per definir els encapçalaments de les seccions, on h1 és el nivell de secció més alt i h6 és el més baix.
  • Eviteu saltar-vos els nivells d'encapçalament: comenceu sempre amb h1, feu servir h2 a continuació, etc.
  • Utilitzeu només un h1 per pàgina, per al títol de la pàgina.

*Si bé HTML5 us permet restablir els encapçalaments a h1 en elements de secció nous, alguns usuaris de lectors de pantalla tindran dificultats per discernir l'estructura de pàgines amb múltiples h1. Per aquest motiu, el millor és incloure només un h1 per pàgina.

Referències WCAG 2.1

2.4.6 Encapçalaments i etiquetes

Estructura de la pàgina

Esteu utilitzant elements semàntics i rols?

Per a qui és important:En Carles és miop i navega per les pàgines saltant a la secció de la pàgina a la qual vol arribar.

Passos a fer

  • Utilitzeu elements de secció per crear un esquema ampli del contingut de la vostra pàgina: exemples d'aquests elements inclouen header, nav, main i footer. Utilitzeu elements de secció de contingut com ara section, article i aside per organitzar el contingut del document en peces lògiques.

Referències WCAG 2.1

Imatges

Les imatges tenen un bon text alternatiu?

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

L'Amanda és cega i ha de llegir el text alternatiu per entendre el contingut de la imatge.

En Joan 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

  • Incloeu informació significativa que descrigui cada imatge al text alternatiu.
  • Utilitzeu text alternatiu nul (buit) quan el text que descriu la imatge ja es troba a la pàgina (alt="").
  • No inicieu el text alternatiu amb Imatge de o Foto de: el lector de pantalla ja anuncia que les imatges són imatges.
  • Si la imatge és decorativa feu servir text alt nul (buit) (alt=""), el lector de pantalla no l'anunciarà.

Recursos

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:En Pere té poca visió i necessita contingut per tenir prou contrast per llegir-lo.

L'Oscar és daltònic vermell-verd i no pot donar sentit a la informació que es transmet només amb el color.

Passos a fer

  • Utilitzeu una eina de contrast de color i comproveu que el contrast entre el text i el fons sigui superior o igual a 4,5:1.
  • Utilitzeu una eina automatitzada per buscar ràpidament problemes de contrast de color.
  • No utilitzeu només el color per transmetre significat. Utilitzeu icones, text i altres elements visuals per reforçar el significat del contingut.

Referències WCAG 2.1

Proves d'accessibilitat

Les vostres eines d'avaluació d'accessibilitat han proporcionat resultats precisos?

Per a qui és important:incloure proves d'accessibilitat automatitzades al llarg del procés de desenvolupament pot ajudar a detectar ràpidament molts errors d'accessibilitat, però no pot garantir que el vostre lloc sigui accessible. Combineu sempre les proves automatitzades amb les proves manuals en curs.

Passos a fer

  • Procés de creació: integreu una eina com axe-core, jsx-a11y, Lighthouse Audits o AccessLint.js al vostre projecte per afegir proves d'accessibilitat de manera programàtica i detectar errors mentre creeu el vostre lloc web.
  • Comprovació ràpida: utilitzeu una eina per comprovar ràpidament si hi ha errors habituals al vostre navegador. Podeu utilitzar HTML CodeSniffer, aXe, Lighthouse Accessibility Audit, Accessibility Insights, WAVE, etc.
  • Simuleu deficiències: utilitzeu eines per simular el daltonisme, la baixa visió, el zoom, el baix contrast, el contrast alt i molt més.
  • Comprovació manual: combineu sempre les proves automatitzades amb les proves manuals. Les proves manuals són el mètode més fiable per avaluar l'accessibilitat.

Recursos