Programació web

Com crear enllaços accessibles?

Els links al nostre projecte web seran essencials i ens ajudaran a nivell de SEO, però què cal tenir en compte perquè siguin accessibles?

Drauta agencia digitalDrauta

Com crear enllaços accessibles?

Quines pautes haig de seguir per tenir enllaços accessibles per a tots els usuaris?

Crear un link amb un text de 'Clic aquí' és molt senzill i ho aprenem a la primera classe de programació, però cada vegada més hem de tenir en compte que hem d'adaptar-nos als usuaris amb tot tipus d'habilitats. Les normes de la comunitat W3C emfatitzen a contextualitzar el link perquè sigui entendible per usuaris amb discapacitats.

Les aplicacions de lectura de pantalla ofereixen només maneres limitades per interpretar una pàgina. És per aquest motiu que la W3C insisteix a identificar i descriure el target del link.

A continuació, us presentem alguns punts a tenir en compte:

  • No utilitzar la paraula 'link' als nostres links. Els lectors de pantalla ja li indiquen a l'usuari que ho han trobat.
  • No utilitzar lletres en majúscules, ja que hi ha lectors de pantalla que no les reconeixen com a paraules senceres i és més difícil de llegir per persones amb problemes de visió. A més a més, algunes cultures interpreten que les frases escrites en majúscules són un signe d'empipament.
  • Evitar caràcters ASCII.
  • Evitar utilitzar URLs com a text del link: hi ha lectors de pantalla que llegeixen lletra per lletra si troben una url. 
  • Utilitzar un text curt al link: 100 caràcters és la longitud acceptable.
  • Restringir el número de links de text a una pàgina. Hi ha tipus d'informació que requereixen molts, però són casos que es tenen en compte com a links de descàrrega, links que obren una nova finestra o paginació.
  • No crear links directes a descàrregues: és essencial indicar que aquest link activa una descàrrega. Si utilitzes una icona assegura't d'utilitzar ALT informatius.
  • Indicar a l'usuari que s'obrirà una nova finestra: les persones amb problemes cognitius necessiten aquest tipus d'informació. El millor és indicar-ho en el text del link. També es pot afegir una icona amb la seva ALT corresponent.
  • Cal anar amb compte amb la paginació o els links alfabètics: fins i tot per a un usuari normal que es troba un paginador pot resultar confús. És per això que es recomana incloure un 'Anar a la pàgina' abans del paginador.
  • Cal vigilar amb la utilització de 'anchor links' i informar d'alguna manera que es tracta d'un d'ells.
  • Subratllar links: els usuaris esperen que un link sempre estigui subratllat. D'igual manera, si qualsevol altre tipus de text està subratllat per qualsevol altre motiu (per destacar-ho) esperaran que sigui un link. És per això, que el millor és evitar l'ús de text subratllat per a altres finalitats. Això sí, si tenim un link hem de destacar-ho d'alguna manera (utilitzant a:focus o a:hover).
  • Dissenyar pensant en usuaris que només utilitzen el teclat per navegar: hem d'utilitzar un indicador focus de teclat.
  • Cal anar amb compte amb la utilització d'imatges com a links: l'atribut ALT tindrà la mateixa funció que el text del link. Aquest atribut li indicarà a l'usuari la descripció de la imatge i què passarà si activen la imatge.
  • Eliminar links trencats o buits: a més de ser un acte necessari per al bon posicionament SEO, ajudarà als usuaris a no accedir a links que els porten a cap lloc.
  • Utilitza un mateix estil únic per a tots els links: no utilitzis un mateix disseny (subratllat de color blau, per exemple) amb dues finalitats diferents en una mateixa pàgina web.
  • Fes un test de contrast de colors: has d'assegurar-te que el color del link té suficient contrast amb el color de background. També hauràs de comprovar-ho quan s'apliqui el hover o el focus. Dos bons tests de contrast de colors són Check My Colors i Luminosity Colour Contrast Radio Analyser.

Vols començar un nou projecte amb nosaltres?

Necessites un servei per a la teva web? Descobreix com et podem ajudar i no dubtis en contactar amb nosaltres.