Anar al contingut principal
Guies ràpides d'Accessibilitat digital

Guia per comprovar l'accessibilitat de pàgines web

Hi ha maneres senzilles de comprovar una web amb eines automàtiques i proves no tècniques per veure si el vostre contingut és accessible i inclusiu per a tothom.

Descobriu fins a quin punt és accessible la vostra pàgina web.

Combineu sempre les proves automatitzades amb les proves manuals. Les proves manuals són el mètode més fiable per avaluar l'accessibilitat.

Hi ha centenars d'eines automatitzades que avaluen el codi i el contingut d'un lloc web, marquen els problemes d'accessibilitat i sovint proporcionen orientació sobre com solucionar-los. Aquestes eines estalvien temps tant per als desenvolupadors com per als creadors de contingut, i sovint detecten errors que potser no són evidents.

Són un primer pas fantàstic i poden proporcionar una visió general de l'accessibilitat del vostre lloc web.

Comenceu executant una eina automatitzada i solucioneu les incidències que es detectin.

Tingueu en compte que moltes de les barreres d'accessibilitat no són detectades per cap eina automàtica. Alguns estudis han establert que les eines que més en detecten no arriben ni al 40% del total. (GOV.UK: Què vam trobar quan vam provar comprovadors d'accessibilitat a la pàgina web menys accessible del món)

Comprovadors automàtics:

  1. Eina d'avaluació d'accessibilitat WAVE (complement de Chrome, Firefox i Microsoft Edge).
  2. Verificador d'accessibilitat de Siteimprove (complement de Chrome)
  3. Accessibility Insights for Web by Microsoft (complement de Chrome i Microsoft Edge).

Tot i que les eines automatitzades són d'una gran ajuda en les proves d'accessibilitat, no poden detectar tots els errors, ja que no poden entendre el context ni avaluar la qualitat del contingut. Per tant, després d'haver fet una primera passada amb eines automatitzades, haureu de fer un seguiment amb proves manuals per assegurar-vos que el vostre lloc web sigui inclusiu i accessible.

A continuació us detallem un seguit de comprovacions que tothom pot fer. Aquestes verificacions no asseguren 100% que el contingut d'una web sigui accessible i inclusiu per a tothom, però estableixen una bona base.

Un element a provar és la capacitat de l'usuari per navegar amb el teclat.

És vital poder navegar un lloc web només amb un teclat.

Funcions estàndard de navegació amb  teclat:

  • Tecla Tab (tabulador): passar d'un element enfocable al següent
  • Tecla Majuscules + Tab: passar d'un element enfocable a l’anterior
  • Tecla Enter: activar enllaços, botons i altres elements interactius
  • Barra espaiadora: activeu els botons d'opció, les caselles de verificació i els botons
  • Fletxes: navegueu pels botons d'opció i seleccioneu opcions en un menú desplegable de selecció i desplaceu-vos cap amunt i cap avall per una pàgina

No passa positivament aquesta comprovació? No perdeu el temps passant a la següent. Solucioneu-ho.

Com comprovar la navegació via teclat:

  1. Navegueu per la pàgina només amb les tecles.
  2. Hi ha una opció de Saltar al contingut?
  3. L'ordre de tabulació segueix un ordre lògic?
  4. És visible la ubicació del focus? Podeu veure clarament on sou?
  5. Tot es pot accedir a través del tabulador?
  6. Totes les funcionalitats funcionen només amb el teclat? Comproveu formularis i elements interactius. Per exemple, si un menú o un acordió s'obre i es tanca, i si tots els controls de formulari funcionen.

Tot el contingut visual s'ha de descriure, o marcar de manera efectiva com a decoratiu.
És possible que els visitants amb discapacitat visual no puguin veure el que hi ha a una imatge. Per tant, un text alternatiu descriptiu breu (alt) pot ser útil.

Però si una imatge és purament decorativa, no necessita cap text alternatiu.

El contingut de les gravacions de vídeo o àudio ha de tenir una alternativa de text. Aquestes poden ser subtítols, una transcripció i/o una descripció de text dels punts clau.

Com comprovar el text alternatiu a les imatges:

  1. Utilitzeu un complement que detecti els textos alternatius. Per exemple WAVE .
  2. Tots els elements que necessiten text alternatiu en tenen?
  3. Tots els textos alternatius són correctes? Descriptius?

El disseny responsiu és un enfocament de disseny destinat a oferir dissenys flexibles per oferir una visualització òptima en una àmplia gamma de dispositius. Permet una lectura i navegació fàcils en una varietat de dispositius de diferents mides, des de monitors d'escriptori grans fins a pantalles de telèfons mòbils.

Un usuari amb poca visió que té dificultats per llegir lletra petita pot necessitar ampliar la pàgina. Si el lloc està dissenyat de manera responsiva, la interfície d'usuari es reorganitzarà correctament.

Assegureu-vos que tots els elements que pertanyen junts s'agrupen.

Com comprovar el disseny responsiu:

  1. Feu zoom, al navegador, fins a un 400% prement Ctrl+ .
  2. Encara podeu veure què està relacionat amb què, per exemple, una etiqueta i el camp d'entrada associat en un formulari?
  3. Podeu utilitzar menús o llistes desplegables, funcionen bé?
  4. Res es pixela, s'allunya de la vista o no es pot utilitzar?
  5. No apareix scroll horitzontal ('esquerra-dreta)?

L'últim que voleu és que els visitants del vostre lloc tinguin dificultats per llegir realment el que diu.

Comproveu que el contrast de color sigui l'adequat. Assegurar-se que hi ha prou contrast de color entre el text i el fons és una manera d'assegurar una fàcil llegibilitat.

Es requereix una relació de contrast de color de 4,5:1 per al text, 3:1 per a text gran o controls gràfics.

Podeu utilitzar el color per representar o complementar la informació, però assegureu-vos que el significat no depèn només del color. Les persones cegues, amb baixa visió o daltònics poden tenir dificultats per entendre la informació que només es representa amb el color.

Com comprovar problemes de pèrdua d’informació:

  1. Instal·leu el plugin Grayscale the Web (o un altre de similar)
  2. Activeu-lo per veure en escala de grisos la vostra pàgina.
  3. Podeu veure-ho tot clarament?
  4. Podeu interpretar correctament tota la informació que es mostra? (especial atenció a gràfics i infografies)

Com comprovar el contrast de color adequat:

  1. Accediu a: Contrast ratio (o un servei similar)
  2. Indiqueu el color del text i el color del fons.
  3. La ratio de contrast és vàlida?

Comproveu que cada pàgina tingui un títol (<TITLE>) raonable: això es mostra al text de la pestanya del vostre navegador si feu servir un ordinador portàtil/ordinador.

Els encapçalaments són la columna vertebral del vostre contingut. Un encapçalament ha de descriure el contingut que hi ha a sota.

Comproveu la jerarquia dels encapçalaments:

  • Assegureu-vos que al títol de la pàgina principal se li ha assignat un estil de nivell 1 (H1) i que només apareix una vegada per pàgina. El títol ha d'indicar de què tracta la pàgina.
  • Els altres encapçalaments s'utilitzen per estructurar la resta de la pàgina web, com la taula de continguts d'un llibre, en ordre seqüencial, imbricats correctament.
  • No hi hauria d'haver buits entre els nivells d'estil (H1 > H2 > H3...).
  • Comproveu que el contingut que hi ha a sota de cada encapçalament té sentit i que la informació s'agrupa d'una manera lògica i fàcil d'entendre.

Com comprovar una estructura d'encapçalaments adequada:

  1. Instal·leu el plugin HeadingsMap (o un altre de similar)
  2. Activeu-lo per veure l'estructura d'encapçalaments d'una pàgina web d'un cop d'ull.
  3. Només hi ha un H1?
  4. Els encapçalaments segueixen un ordre seqüencial i jeràrquic?

Assegureu-vos la coherència general en els noms d'accions, enllaços i altres funcionalitats i components
Comproveu que cada element enfocable tingui un nom accessible:

  • Per a un enllaç, aquest serà el text de l'enllaç
  • Per a un botó, el text del botó
  • Per a un camp de formulari, l'etiqueta.

 

El nom accessible és anunciat per un lector de pantalla. Això indica als visitants cecs on va l'enllaç, què passa quan prem un botó o què han d'omplir en un formulari.

El text que es mostra en un enllaç ha de ser significatiu i ha de ser comprensible fora del seu context. Textos com ara "Fes clic aquí" i "Baixa" no tenen sentit, per exemple. Un enllaç és una promesa, no una sorpresa.

Com comprovar la claredat del text que es mostra als enllaços:

  1. Observeu la pàgina web.
  2. Imagineu que no coneixeu el context al voltant dels enllaços.
  3. Llegiu només el text que es mostra.
  4. Podeu esbrinar on va l'enllaç?

No tots els visitants cerquen informació de la mateixa manera, de manera que és útil tenir més d'una manera de trobar informació al vostre lloc:

  • mitjançant la navegació principal.
  • un formulari de cerca.
  • un mapa del lloc.
  • una visió general dels enllaços al peu de pàgina.

Una estructura de navegació coherent també és clau. Fa que sigui més fàcil que els visitants trobin el que busquen.

Com comprovar la facilitat de cerca:

  1. El lloc web ofereix més d'una manera de trobar informació?
  2. El menú principal està sempre al mateix lloc? Funciona sempre de la mateixa manera?
  3. Feu el mateix amb el peu de pàgina.
  4. Realitzeu proves d'usuari als vostres dissenys. Els usuaris poden trobar la informació que necessiten de manera ràpida i senzilla?

Per una comprovació més acurada pot ser útil seguir una llista de verificació (checklist) que detalli tots els punts que s'han de tenir en compte i que ofereixin pautes per aplicar-los correctament.

A continuació detallem tres llistes de verificació amb enfocaments diferents i complementaris.

Llistes de verificació

  1. Check your WCAG compliance (A11y project)
  2. Accessibility Not-Checklist (Intopia’s).
  3. MagentaA11y - Web Accessibility Checklist (TMobile)

Si un problema impedeix als usuaris completar tasques crucials, és una prioritat.

Si fa que l'experiència de l'usuari sigui complicada, és un nivell de gravetat més baix.

Si un problema afecta una plantilla que feu servir a tot el vostre lloc, solucionar-la en un sol lloc pot tenir un impacte positiu molt més gran.

 

Proveu no només al final, sinó durant cada fase de la creació d'un projecte web: arquitectura de la informació, disseny, codificació i contingut. Provar només al final podria significar molta reelaboració: refactoritzar el codi, per exemple, o pitjor encara, començar des de zero. Per tant, provar al llarg del camí i fer ajustos a mesura que avanceu probablement us estalviarà temps i diners.

A banda d’això, els llocs web s'han de comprovar periòdicament per trobar qualsevol problema que hagi pogut sorgir amb l'accessibilitat dels nous continguts.

Per fer les comprovacions, escolliu una sèrie de pàgines que siguin representatives de tot el lloc web.

Com escollir pàgines per fer les comprovacions:

  1. Una de cada tipus de plantilla.
  2. Pàgines amb imatges.
  3. Pàgines amb multimèdia.
  4. Formularis en línia.
  5. Qualsevol altre tipus de contingut que sigui diferent d'alguna manera.

En la majoria dels casos, podeu sol·licitar una revisió manual de l'accessibilitat a l'equip d'accessibilitat de la Diputació com a mínim dues setmanes abans d'un llançament públic. Això garanteix que hi ha prou temps per dur a terme la revisió i fer els canvis necessaris. Com que heu estat provant manualment durant tot el projecte, això hauria de ser ràpid.

Depenent dels requisits del vostre projecte, també podeu optar per contractar una empresa externa per dur a terme proves com a part del vostre control de qualitat.

Com contactar amb l'equip d'accessibilitat de la Diputació:

  1. Oficina de Difusió
  2. accessibilitat@ddgi.cat
  3. 972 184 847