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+.
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.
Exemple d'una pàgina web que mostra l'alternativa de la imatge, que sí està informada.
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:
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.
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:
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
Disseny de la tipografia, els colors, les icones, els botons, els textos i títols, el catàleg de les peces...
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:
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.
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:
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.
Pautes per fer subtítols i descripcions accessibles (pàg.
Els elements 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 per explicar el contingut.
Recomanació sobre l'atribut als iframes.