Enlaces Accessibilitat Digital

Ir a contenido Ir a Estudios, Gobernanza y organización
Logo UA
Realizar búsqueda
Menú
Altres llocs
Logo Accessibilitat Digital   Accessibilitat Digital
Accessibilitat Digital

Enlaces

 

Per tots és conegut que els enllaços són un dels elements que fan més atractives a les pàgines web. Ens permeten tenir un menú de navegació, accedir a més informació de la qual es visualitza en la pàgina actual, etc. En general, podríem dir que és l'element que ens permet interactuar i accedir a altres pàgines.

Perquè un enllaç siga útil ha de diferenciar-se dels elements que li envolten (normalment text).

Per a diferenciar-ho visualment, s'aconsella que estiga subratllat i que tinga un color diferenciador. És molt comú en pàgines amb un disseny treballat evitar el subratllat i ressaltar el color de l'enllaç quan es passa per damunt amb el ratolí. Si no és possible que estiga subratllat i amb el color blau que està definit per defecte, almenys han de ser diferenciables del text o resta d'elements que li envolten.

Hi ha dues males pràctiques que se solen aplicar quan es redacta un enllaç:

  • Posar l'enllaç, tal qual, entre parèntesi o claudàtors al costat de la frase que ho identifica. Per exemple: Sol·licitud de participació (http://ssyf.ua.es/es/accesopdi/documentos/funcionarios/impresos/02-instancia.doc)
  • Posar els enllaços amb una descripció molt general: prema ací per a descarregar la sol·licitud de participació. En moltes ocasions podem veure el mateix text (prema ací) amb enllaços diferents (per exemple a cada sol·licitud). Altres casos són més informació, llegir més, etc.

Ambdues són molt senzilles de solucionar i consisteix que el text que s'enllace siga la pròpia sol·licitud. En el cas anterior Descarregue la sol·licitud de participació com a professor funcionari.

Es recomana que el text o frase de l'enllaç no siga excessivament llarg i que no hi haja un nombre excessiu d'enllaços per paràgraf (és preferible un per paràgraf).

No ha d'haver-hi dos enllaços amb el mateix text i diferent adreça de destinació.

 

Enllaços que canvien de context i/o finestra

Quan l'acció de l'enllaç implique un canvi de pàgina, ha d'indicar-se clarament que es va a fer en la nova pàgina. Per exemple si en prémer un enllaç anem a la finestra d'inscripció es recomana indicar-ho, Inscriure's, Accés a la inscripció, etc.

No es recomana obrir els enllaços en finestres noves. Hi ha molts col·lectius d'usuaris (entre ells persones majors) que no s'adonen que se'ls ha obert una finestra o una pestanya i després no poden tornar arrere. El nostre objectiu ha de ser sempre facilitar la navegació i mai posar traves.

Només es recomana el seu ús quan són enllaços a documents no web, doc, pdf, etc.

En cas que ho usem amb enllaços a pàgines externes (ús molt comú) és molt recomanable reflectir-ho dins del propi enllaç, per exemple: pàgina web del Centre de Suport a l'Estudiant (s'obri en nova finestra).

Tenim un element addicional per a aportar més informació a l'enllaç i que no és visible, l'etiqueta title. Aquest element no ha de ser el mateix text que es visualitza en l'enllaç.

Tampoc ha de ser el propi enllaç. Sempre ha d'aportar més informació (o complementària) que la que es visualitza en el propi enllaç.

Es recomana ocultar text amb la classe ocultar-contingut2 (o sr-only en Bootstrap) millor que usar l'atribut title, ja que no tots els lectors de pantalla lligen aquest atribut.

És a dir:

<!— es mejor -->
<a href=”http://www.ua.es”>Web de la UA <span class=”sr-only”>texto adicional</span></a>
<-- que -->
<a href=http://www.ua.es” title=”texto adicional”>Web de la UA</a>

* Disposem de l'atribut tabindex per a poder indicar l'ordre de navegació pels enllaços. Aquest ordre ha de ser el mateix que es visualitza perquè en molts casos amb la tecla tab podem anar desplaçant-nos per aquests. En alguns casos en què els elements estan disposats en ordre invers (per exemple els botons superiors de les pàgines de la UA), haurem d'indicar el tabindex per a permetre la navegació lògica.

Anem a destacar el cas de “més informació” o “llegir més” que veiem en moltes pàgines web i anem a analitzar la millor forma de gestionar-ho.

En moltes web observem notícies amb enllaços com els següents:
   
Anteriorment hem comentat que hem de seguir aquestes pautes:

  • Identificar l'objectiu de l'enllaç i mostrar-ho clarament. Normalment és molt gran i no podem escriure-ho íntegrament.
  • Usar l'atribut title en el qual detallem l'objectiu i visualment escurcem el contingut. Aquesta tècnica és desaconsellada per WCAG 2.0. Molts dispositius no la interpreten.
  • Ocultar part del contingut que no volem que siga visualizable però si interpretat per lectors de pantalla o cercadors. Revisar el primer punt d'ocultació de contingut.

Per tant, l'ideal seria:

<h3>Demostración de uso de Readability</h3>
<p>Texto…</p>
<a href=http://www.ua.es”>
Más información
<span class=”ocultar-visualmente2”>
sobre demostración de uso de readability
</span>
</a>

També és important que si existeixen dos enllaços adjacents apuntant a una mateixa adreça de destinació els unifiquem.

El problema:

<div style=”float:left;”>
<a href=http://www.ua.es”><img src=”imagen.jpg” alt=””/></a>
</div>
<div style=”float:left;”>
<a href=http://www.ua.es”>Universidad de Alicante</a>
</div>

La solució:

<a href=http://www.ua.es”>
<div style=”float:left;”>
<img src=”imagen.jpg” alt=””/>
</div>
<div style=”float:left;”>
Universidad de Alicante
</div>
</a>

Enllaços i imatges

És important comentar que si el contingut de l'enllaç és una imatge caldrà utilitzar l'atribut alt de la imatge SÍ o Sí, para en el cas que, no es poguera carregar la imatge, o l'usuari té la navegació amb la descàrrega d'imatges desactivades l'enllaç seguira tenint significat, per exemple:

<a href=”noticia.html”><img src=”imagen.jpg” alt=”Noticias”/></a>

Si no posem gens en l'atribut alt de la imatge si no es pot carregar la imatge o un usuari de lector de pantalla que no la puga veure, l'enllaç no tindrà contingut.