Per on començar?
Us oferim un llistat de pautes per fer que els webs de la Generalitat de Catalunya siguin accessibles, seguint els requisits de les WCAG 2.1. Son un decàleg de primeres passes per iniciar-se en la gestió dels continguts accessibles, destinada específicament al l'HTML.
Aquest llistat s'ha elaborat en base als principals errors detectats a través de l'eina SiteImprove als webs de la Generalitat de Catalunya gestionat amb GECO+.
Alternativa per a les imatges
Les imatges han de ser accessibles per a persones que no les poden veure, per tant, han de tenir una alternativa textual perquè els lectors de pantalla interpretin quina informació dona la imatge. Però no totes les imatges han de tenir l'alternativa, ja que n'hi ha algunes que són decoratives i un lector de pantalla les pot ignorar.
Consells:
- No incloure “Fotografia de” o “Imatge de” perquè els lectors de pantalla ja interpreten que és una imatge. Si es posa “Imatge d’una poma” el lector llegirà “imatge, imatge d’una poma”.
Tipus d’imatges:
- Fotografies, dibuixos o pintures: Fer un text el més descriptiu possible. Per exemple, si és una fotografia del president, es posa “President de la Generalitat, Joaquim Torra”.
- Imatges decoratives: No s'ha d'incloure alternativa textual.
- Imatges amb text: Es recomana no utilitzar-les. Si és imprescindible, es recomana que el text alternatiu sigui el mateix text que hi ha a la imatge.
- Imatges funcionals (amb link): Botons, enllaços o altres elements interactius. L’alternativa textual ha d’explicar l’acció que inicia més que la descripció de la imatge. Per exemple, una icona d’una fletxa en una àncora per pujar, el text ha de ser “pujar” i no “fletxa”.
Exemple d'una pàgina web que mostra l'alternativa de la imatge, que sí està informada.
AMUNTText dels enllaços
El text dels enllaços ha de ser descriptiu i ha de tenir sentit fora del seu context, perquè hi ha navegadors i lectors de pantalla que mostren la llista d’enllaços d’un web en una pàgina apart. Si el text de l’enllaç no té sentit fora de context, l’enllaç no tindrà sentit a la llista d’enllaços.
Consells per escriure enllaços:
- Clars i curts.
- Han de tenir sentit fora de context.
- Evitar textos tipus: “Clica aquí”, “més informació” o “Continua llegint”.
No s’ha d’utilitzar un mateix text per a enllaços que porten a diferents destinacions, perquè l’usuari no nota la diferència si no se li explica. Aquest seria el cas de “Més informació” o etiquetes genèriques com “Documentació” en una mateixa pàgina.
Exemple d'una llista d'enllaços etiquetats de forma descriptiva i amb sentit fora del seu context.
Format dels continguts
El formatat del text, les imatges, vídeos, taules i altres continguts disponibles en HTML s’ha de realitzar a través dels fulls d’estil (Cascading Style Sheets, coneguts com CSS) del web i no al codi HTML del text. Per exemple, l’alineació del text, el color o la mida. Aquesta informació ve determinada pel CSS i si es modifica amb el codi HTML dificulta la lectura.
No obstant això, hi ha etiquetes que es poden utilitzar el l’edició textual, com són:
- Negreta: Utilitzar l’etiqueta <strong>, i no <b>.
- Cursiva: Utilitzar l’etiqueta <em>, i no <i>.
- Llistes no ordenades: utilitzar l’etiqueta <ul> per a la llista i <li> per als ítems.
- Llistes ordenades: utilitzar l’etiqueta <ol> per a la llista i <li> per als ítems.
- Les taules no han de tenir codi HTML per modificar les mides de les columnes, el color del text, (<center>, <font>...), etc. Ha de ser a través del CSS.
Si voleu saber més sobre els estils corporatius, podeu consultar-los a la Guia web.
Captura de pantalla de la Guia web on s'expliquen les mides de la tipografia emprada als webs
Estructurar la informació
El codi HTML permet estructurar la informació de manera que es pugui llegir. Tot i que es recomana no modificar les característiques del contingut a través de l’HTML sinó amb els fulls d’estil, es permeten algunes modificacions.
Consells per l’edició del codi HTML:
- Respectar la jerarquia de continguts: <h1>, <h2>, <h3>, <h4>, <div>, <p>...
- Si es copia text des d’un editor de text, cal enganxar-lo al gestor de continguts amb la funció “text pla” perquè sinó arrossega codi que afecta a la presentació.
- Utilitzeu llistes no ordenades <ul> o ordenades <ol> per mostrar contingut, no utilitzeu paràgrafs <p> amb un guionet al principi per simular llistes (<p>- Això no és una llista</p>).
Contrast de color
Cal garantir un contrast suficient entre el text i el fons per tal que la lectura dels webs sigui òptima. Això afecta a parts dels webs estructurals i a contingut actualitzable.
El contrast mínim dels textos per sobre del fons ha de ser de 4,5:1 per als textos normals i de 3:1 per al text gran.
El contingut estructural no requereix de revisió per part del webmàster, ja que correspon al disseny corporatiu. Es refereix als color de fons de les pàgines, menús, capçalera, peu, faldó, etc., així com al color dels botons, tipografies, icones, etc. Aquest és el cas dels usuaris de l'eina GECO+. Si s'utilitza un altre disseny o gestor de continguts, cal fer la revisió dels continguts estructurals.
En canvi, pel que fa als continguts que farceixen els webs, cal tenir en compte el contrast de color. Per exemple, si es crea un baner amb text, si es posa una imatge en un carrusel de diapositives en què el text de l’enllaç es sobreimpressiona sobre la imatge, etc. També cal tenir-ho present a l’hora de crear icones, i altres continguts textuals.
Per saber si es compleixen aquests requisits podeu consultar eines en línia com el comparador de WebAIM, les extensions de Firefox Colorzilla o WCAG 2.0 - Contrast checker, o per a Chrome Contrast Color Analyzer, entre moltes altres.
Documents PDF
Cal fer una revisió dels documents publicats per tal que segueixin els principis d’accessibilitat. Aquests són alguns dels principals errors d’accessibilitat dels documents PDF:
- Etiquetatge: cal etiquetar el contingut de les pàgines per tal que els lectors de pantalla sàpiguen com presentar la informació a l’usuari, com per exemple els encapçalaments, les llistes, les taules, les imatges, etc.
- Idioma: cal indicar l’idioma amb el qual està presentat el document per tal que els lectors puguin triar-lo.
- Títol: és necessari perquè els lectors de text l’utilitzen per identificar el tema del document.
- Alternativa de les imatges: a l’igual que als webs, cal indicar el contingut de la imatge
- Taules: Cal indicar els encapçalaments per tal que els lectors interpretin les files o columnes.
- Marcadors: Cal posar-los per tal de crear un índex de navegació del document.
- Encapçalaments: Cal seguir l’estructura (1, 2, 3...) jeràrquica i no ometre nivells.
Vídeo i àudio
Els arxius de vídeo i de so han de tenir alternatives per a la lectura de persones amb problemes de visió o d’escolta, com són la transcripció dels diàlegs i la descripció dels sons.
Què es pot fer?
- Afegir subtítols que es pugui activar o desactivar. Els subtítols han de ser arxius independents respecte dels vídeos, per tal que els programes lectors els puguin recuperar.
- Incloure transcripcions de diàlegs, veus en off i altres elements contextuals (sons de fons, etc.)
iframes
Els elements <iframe> són continguts html marc en línia, és a dir, contingut incrustat en una pàgina, generalment dinàmic, com poden ser vídeos de YouTube, infografies, aplicacions web o altres. Aquests contingut també ha de ser accessible en el seu propi codi.
Una de les principals recomanacions per tal que l’iframe sigui accessible és que contingui l’atribut <title> per explicar el contingut.