Accessibilité et les liens externes

Tags

Il existe plusieurs normes en accessibilité du web qui demande des choses qu'on ne prend pas nécessairement le temps de faire.

Soit que c'est pas manque de temps, trop de choses à penser, ou on n'y pense simplement pas.

Dans cet article j'exprime mon opinion sur l'importance (du point de vue utilisabilité) des icones de liens extérieurs. Plus tard je montrerai une méthode pour automatiser [EDIT 2009-08-23] J'ai documenté comment faire dans Manipulation des liens extérieurs et les popup pour améliorer l'Accessibilité.

Le problème que j'ai voulu me pencher consiste avec la règle qui suit :

2.4.4 (niveau A) Destination d'un lien : La destination d'un lien peut Être déterminée à partir du libellé (label="") du lien ou du libellé et du contexte de ce lien déterminable par programmation, sauf pour un lien dont la destination serait ambigüe pour l'ensemble des utilisateur.

Ce qui implique qu'on doit ajouter à la main une icône qui annonce le «popup» et si c'est un lien extérieur.

 

Pourquoi ne pas automatiser ce qui est automatisable?

Lorsqu'on doit manuellement, faire l'option popup quand on édite un site et le faire à bras pour chacun.

Parfois, en programmant on finit par se demander... "L'informatique au service de l'homme" (ou le contraire?)

 

L'objectif

Alors, j'ai décidé de trouver une manière d'automatiser?

  • de prendre une balise standard 
    <a
  href="https://example.org/action/handler"
>
  Texte du lien
</a>
  • d'ajouter de l'image icône qui annonce que c'est un (lien externe + popup)
  • d'instaurer le alt="" de l'image
  • de transformer le lien en popup... 
    <a
  href="https://example.org/action/handler"
>
  Texte du lien
  <img
    src="/icons/external_link.png"
    alt="Avertissement: Ce lien ouvre dans une fenêtre externe car il ne fait pas partie du présent site"
    width="10"
    height="10"
    class="popuphreficon"
  />
</a>

... tout ça en Javascript qui manipule le DOM d'une manière valide... et qui suit les normes d'Accessibilité du web !!