6. LIENS ET BOUTONS

Owned by ANNICK LALIBERTE
Last updated: May 16, 2023 by MATHIEU Côté
10 min read

Table des matières

6.1 Intitulés des liens et des boutons

6.1.1 Rédiger des intitulés explicites pour les liens et les boutons

Autant que possible, l’intitulé des liens et des boutons doit être explicite. C’est-à-dire que la fonction du lien ou du bouton doit être parfaitement compréhensible à la lecture du seul intitulé.

Cet intitulé correspond au texte contenu :

  • Entre les balises <a>  et </a> .

  • Entre les balises <button>  et </button> .

  • Dans l’attribut « alt » dans le cas d’un <input type="image" /> .

  • Dans l’attribut « value » dans le cas des <input type="button" />  ou <input type="submit" /> .

Ainsi, plutôt que des boutons « OK » ou des liens « Retour », privilégier :

<input type="submit" value="S'inscrire" />
<a href="panier.html">Retour à l'étape 1 : "Votre panier"</a>

REMARQUES

Dans le cas où du texte et de l’image sont présents simultanément dans l’intitulé du lien ou du bouton, le texte de remplacement de l’image est à considérer comme faisant partie intégrante de l’intitulé.

Ainsi, l’intitulé du lien suivant sera considéré comme explicite :

<a href="/derniers-changements/">
   <img src="images/pictogramme-attention.png" alt="Attention ! " title="Attention !" />
   Veillez à prendre en considération les derniers changements apportés à Canelis avant 
   toute utilisation.
</a>


ASTUCES

Pour rédiger des intitulés explicites, il faut imaginer que les intitulés sont extraits de la page et lus en dehors de tout contexte. Restent-ils compréhensibles? Permettent-ils de se faire une idée du contenu de la page de destination ou de l’action à effectuer?

ATTENTION

Les liens et les boutons ne doivent jamais être vides et doivent donc toujours posséder un intitulé, même dans le cas où une icône représente le bouton. Ex. le bouton d'un champ de recherche :

<style>
   .icon-search{ /* Contenu pour rajouter l'icône de recherche */ }
   .hidden-tag{ /* On cache cette parti du contenu (sans utiliser display: none ou visibility: hidden) */ }
</style>
 
<button class="icon-search">
   <span class="hidden-tag">Rechercher</span>
</button>


RESSOURCES

Voir aussi : 

6.1.2 Compléter les liens et les boutons non explicites

Un lien ou un bouton considéré comme explicite est un lien ou un bouton dont l’intitulé seul permet de comprendre sa destination ou sa fonction.

Certains intitulés de liens ou de boutons ne peuvent pas être rendus explicites (manque d’espace disponible à l’écran, choix éditorial, etc.). C’est souvent le cas, par exemple, pour les liens du type « Voir la suite » ou « Consulter le site » et des icônes cliquables sans intitulé visible.

Dans ces situations, ce sont les attributs « title » et « aria-label » qui doivent alors être utilisés pour préciser la fonction du lien ou du bouton. Leur valeur doit successivement :

  • Reprendre une information identique ou équivalente à celle véhiculée par l’intitulé.

  • Compléter l’information fournie par l’intitulé.

Par exemple, dans le cas d’un lien « Juillet 2016 » :

<a href="archives/2016/07/" 
   aria-label="Juillet 2016 (lire les articles du mois)" 
   title="Juillet 2016 (lire les articles du mois)"> 
   Juillet 2016
</a>


La valeur de l’attribut « title » doit être strictement identique au contenu de l’attribut « aria-label » sous peine que certains lecteurs d’écran vocalisent les deux, ce qui ne serait pas optimal.

Ici l’utilisation de l’attribut « title » en plus de « aria-label » est notamment intéressante pour les personnes malvoyantes naviguant avec une loupe d’écran type « ZoomText » qui, au survol souris du lien « Voir la suite », dispose visuellement de l’infobulle.

LE LIEN OU LE BOUTON EST UNE IMAGE INFORMATIVE

Dans le cas où le lien ou le bouton est une image informative, c’est l’attribut « alt » de l’image qui est lu comme intitulé du lien. Nul besoin d’ajouter les attributs «title» et « aria-label » si le texte alternatif de l’image est explicite.

<a href="http://ici.radio-canada.ca">
   <img src="logo.png" alt="ICI Radio-canada.ca" />
</a>

LE LIEN OU LE BOUTON EST UN SVG INFORMATIF

Lorsqu’un <svg> seul (sans intitulé) servant de lien ou de bouton est intégré dans le code HTML :

  • Intégrer aria-hidden="true" dans ses balises enfants <g> et <path>.

  • Ajouter une balise <text> dans le <svg> et la renseigner avec les informations permettant de rendre le lien ou le bouton explicite.

  • Cacher ce texte de remplacement en intégrant opacity="0" dans la balise <text>.

  • Intégrer role="link" dans la balise <svg> si celle-ci sert de lien.

  • Intégrer role="button" dans la balise <svg> si celle-ci sert de bouton.

  • Intégrer l’attribut « title » sur le lien pour améliorer la compréhension (notamment pour les personnes voyantes).

Dans l’exemple de code HTML ci-après, le <svg> pointe vers la page d’accueil d’un site :

<a …
   title="Accueil">
   <svg role="link" …> 
      <text opacity="0" …>Accueil</text> 
      <g aria-hidden="true"> 
         <path aria-hidden="true" …></path> 
      </g> 
   </svg> 
</a>

LE LIEN OU LE BOUTON EST UNE ICÔNE

Lorsque le lien ou le bouton affiche une icône (ex. réseaux sociaux), et que l’intitulé caché est explicite, l’attribut « title » devra tout de même être ajouté pour améliorer la compréhension (notamment pour les personnes voyantes).

<a href="http://www.facebook.com" 
 
   title="Facebook">
   <span>Facebook</span>
</a>


REMARQUES

Les attributs « title » et « aria-label » doivent également être utilisés pour distinguer les liens ou boutons dont les intitulés pourraient être considérés comme explicites, mais qui pointent vers des pages ou déclenchent des actions différentes.

Exemple, dans le cas où un lien pointe vers une vidéo en lecture automatique, les attributs « title » et « aria-label » devront être ajoutés sur le lien et contenir une information supplémentaire sur l'action (Ex. Écouter la vidéo). 

<a 
   href="http://ici.radio-canada.ca/regions/montreal/2015/09/08/006-toilettes-publiques-centre-ville-montreal.shtml" 
   title="Le retour des « vespasiennes » à Montréal (Écouter la vidéo)"
   aria-label="Le retour des « vespasiennes » à Montréal (Écouter la vidéo)"> 
   <img 
    src="http://img.src.ca/2015/09/08/635x357/150908_c19v3_toilettes-emilie-gamelin_sn635.jpg" 
    alt="Le retour des « vespasiennes » à Montréal" /> 
</a>

ASTUCES

Dans le cas de liens du type « Voir la suite » ou « Consulter le site », une bonne pratique d’accessibilité consiste à reléguer cette information en dernier dans le contenu des attributs « title » et « aria-label » afin de faciliter l’accès à l’information importante :

<a href="entree-en-bourse.html" 
    title="Entrée en bourse de la société Boursicota (voir la suite)"
    aria-label="Entrée en bourse de la société Boursicota (voir la suite)"> 
Voir la suite </a>

Les points de suspension, utilisés lorsque le lead est trop long, ne sont pas cliquables. Un chevron cliquable devrait suivre.

Texte du lead du document ... 
<a href="entree-en-bourse.html" 
   title="Entrée en bourse de la société Boursicota (voir la suite)"
   aria-label="Entrée en bourse de la société Boursicota (voir la suite)">
» </a>

ASTUCES - BONIFICATION

Prévoir des intitulés de liens explicites hors contexte et sans l'utilisation des attributs « title » et « aria-label ». Exemple : Le survenant, offert en :

  • pdf [23 Ko]

  • mp3 [3 h 45 - 400 ko]

  • HTML

Aurait comme code :

<p>Le survenant, offert en</p>
<ul>
   <li>
      <button ...>
         <span class="hidden-tag">Le survenant, </span>
         pdf [23 Ko]
      </button>
   </li>
   <li>
      <button ...>
         <span class="hidden-tag">Le survenant, </span>
         mp3 [3 h 45 - 400 Ko]
      </button>
   </li>
   [...]
</ul>

ATTENTION

L'attribut « aria-label » restitue l'intitulé du lien. Il ne faut donc pas l'utiliser comme complément de l'intitulé ou si celui-ci est déjà explicite.

Exemple à ne pas faire :

<a href="/grands-entretiens.html"
   arial-label="(Voir la suite)">
   Les grands entretiens
</a>

L’utilisation de l’attribut « title » pour expliciter un intitulé sera toujours moins accessible que l’optimisation directe de l’intitulé. Le contenu de l’attribut « title » ne s’affiche pas par défaut lors de la navigation au clavier ou sur un écran tactile, par exemple.

Ces attributs ne doivent donc être utilisés qu’en dernier recours.

CAPTURES D'ÉCRAN

Capture 1 : Exemple de l’utilisation des titles :

  • Les boutons avec icônes pour « Écouter », « Ajouter à ma liste » et « Partager » ont des attributs « title » pour améliorer la compréhension.

  • Le lien « Voir la suite », possède aussi un attribut « title » puisqu’il n’est pas explicite hors contexte.

  • Le lien vers le segment n’a pas d’attribut « title » puisque explicite.

6.2 Documents en téléchargement

6.2.1 Indiquer le poids et le format de chaque document en téléchargement

Chaque fois qu’un lien pointe sur un document à télécharger, les informations suivantes doivent être intégrées dans l’intitulé :

  • Le nom du document.

  • Le format du document.

  • Le poids du document.

  • La langue du document (si celle-ci est différente de la langue principale de la page).

Par exemple :

<a href="rapport-annuel-2011.pdf">
   Télécharger le rapport annuel 2011 (PDF, 23 Mo)
</a>
 
<a href="report-annual-2011.pdf">
   Télécharger le rapport annuel 2011 (PDF, 23 Mo, en anglais)
</a>


REMARQUES

Parfois, l’intitulé ne peut être modifié pour intégrer ces informations. Dans cette situation, pour reprendre et compléter l'intitulé sur le lien ou le bouton, ajouter l'attribut « title » et un texte visuellement caché mais lu par le lecteur d'écran (class="hidden-tag"). Les mentions de poids, format et langue devraient toujours être affichées.

Ex.

<a 
   target="_blank" 
   href="rapport-annuel-2017.pdf" 
   title=”Rapport annuel 2017 (PDF, 23 Mo)”
>
   <img 
      src="image-rapport-annuel-2017.jpg" 
      alt="Télécharger Rapport annuel 2017"
   >
   (PDF, 23 Mo)
</a>
<a 
   target="_blank"
   href="rapport-annuel-2017.pdf" 
   title=”Rapport annuel 2017 (PDF, 23 Mo)” 
> 
   <Icon /> 
   <span class="hidden-tag">Télécharger Rapport annuel 2017</span> 
   (PDF, 23 Mo) 
</a>

ASTUCES

Puisque les informations du document téléchargeable (format, poid et langue) sont écrites en dur dans le HTML, le pictogramme du format n'est pas obligatoire. Il pourrait donc être rajouter en style sur le lien.

Ex.

<style>
   .icon-pdf{ /* Appel de l'icone en image ou en police de caractère */ }
</style>
 
<a href="nom-du-fichier.pdf" target="_blank" class="icon-pdf">
   Nom du fichier (PDF, 20 Ko)
</a>


ATTENTION

Ces mentions ne doivent pas être masquées sur mobile faute d'espace. Elles sont d'autant plus pertinentes puisque l'utilisateur, à partir d'une plateforme limitée en espace, doit connaître toutes les informations associées au fichier qu'il télécharge.

CAPTURES D'ÉCRAN

Capture 1 : Exemple d’insertion d’un pdf avec ses informations sur le type et le poids du fichier

RESSOURCES

6.3 Nouvelles fenêtres

6.3.1 Signaler l'ouverture des nouvelles fenêtres

Chaque fois qu’un lien ou un bouton déclenche l’ouverture forcée d’une nouvelle fenêtre dans le navigateur, l’utilisateur doit être prévenu.

Dans ce cas, il faut ajouter les attributs « title » sur le lien et un libellé caché (class=”hidden-tag”), dont le contenu doit successivement :

  • Reprendre une information identique ou équivalente à celle véhiculée par l’intitulé.

  • Compléter l’information fournie avec la mention du type « (nouvelle fenêtre) »


<a href="cgv.html" 
   target="_blank"
   title="Conditions Générales de Vente (nouvelle fenêtre)"
> 
   Conditions Générales de Vente 
   <span class="hidden-tag">(nouvelle fenêtre)</span>
</a>


REMARQUES

Une bonne solution d'accessibilité serait d'ajouter une icône « nouvelle fenêtre », après le libellé du lien, automatiquement dès que :

  • Le lien possède l'attribut target="_blank".

  • Qu'il n'y a pas déjà une icône intégrée au lien (ex. PDF, Facebook, Twitter, etc.).

Cela permet aux contributeurs éditoriaux de ne pas avoir à l'ajouter à la main, et ainsi prévenir des erreurs humaines.

ASTUCES

Dès que l’on sort d’un site radio-canadien ou que l’on ouvre un document téléchargeable ou qui nous fait perdre la navigation principale du site (ex. PDF, RSS), il est impératif de rajouter le target=”_blank”.

ATTENTION

Dans le cas où le lien externe mène vers un site d'une autre langue que celle par défaut du site, il faut retrouver cette information dans le libellé du lien. Ex. CBC (en anglais)

<a href="http://www.cbc.ca/" 
   hreflang="en"
   target="_blank"
   title="CBC (en anglais - nouvelle fenêtre)"
>
   CBC (en anglais)
   <span class="hidden-tag"> (nouvelle fenêtre)</span>
</a>


RESSOURCES

Voir aussi Identifier les liens externes (Contributeurs éditoriaux)

6.4 Différencier les boutons des liens

Les boutons <button> / <input> permettent à l’utilisateur de déclencher des actions. Ils sont à employer pour soumettre des informations, pour afficher l’élément suivant ou précédent dans un carrousel, pour fermer une fenêtre modale, etc.

Les liens <a> permettent à l’utilisateur de naviguer. Ils sont à employer pour pointer sur une autre page ou sur une zone précise de la page courante par l’intermédiaire d’un système d’ancres.

REMARQUES

Il est recommandé d'utiliser la balise <input type="button">  à l'intérieur d'un <form>  (bouton Envoyer, etc...) et d'utiliser la balise <button>  lorsque c'est une action (flèche, bouton fermer, etc...).

RESSOURCES

Voir aussi Différencier les boutons des liens (Interfaces riches et JavaScript)

6.5 Prévoir des zones réactives suffisamment grandes et espacées

S’assurer que la zone réactive de votre élément interactif (<button>, <a>, <input>, etc.) est de grandeur adéquate, au clic et au touch, pour qu’elle soit facilement actionnable. Cette règle a pour but de limiter, voir annuler, les activations non intentionnelles, surtout lorsque celle-ci peuvent changer l’utilisateur de contexte.

Il est recommandé de prévoir les tailles suivantes : 

Desktop : minimum de 36px;
Mobile: minimum de 48px (la valeur est plus grande sur mobile puisque le doigt est plus large et moins précis qu’un curseur);


La zone réactive équivaut à = la taille de l’élément interactif + son espace de dégagement.


ATTENTION

La surface totale de la zones réactive doit toujours être inférieure à la taille de l’élément interactif. Il sera aussi toujours préférable que votre élément interactif soit de la taille recommandée (avec ou sans espace de dégagement).


ASTUCES

La taille de 48px est une recommandation qui, au toucher, représente environ l’espace d’un doigt. Si vous prévoyez un élément interactif qui sera principalement actionné par le pouce, il est plutôt recommandé de prévoir une zone réactive d’au moins 60px.


ASTUCES - BONIFICATION

Cette règle est AAA, mais a été approuvée comme faisant partie intégrante de nos normes. 


CAPTURES D'ÉCRAN

Bouton sur mobile :

 
Capture 1 : Bouton de la taille recommandé pour mobile : 48px X 48px


 
Capture 2 : La taille du bouton pour mobile est sous les 48px recommandé. Il faudra prévoir un espace de dégagement suffisant. Ici : 48px (requis) - 36px (taille du bouton) = 12px d’espace de dégagement sans action possible. (préférablement répartie équitablement à l’entour du bouton)


Bouton d’onglets sur mobile : 

Capture 1 : Avec espace réservé visible

Dans cet exemple, sur mobile, les boutons section 1 et 2 sont de bonne largeur mais ne possède pas la hauteur recommandé. Par contre l’espace en haut et en bas des boutons prévois de l’espace de dégagement supérieur à 48px. Ils sont donc en norme. 

Par contre, dans le cas de la taille du bouton étoilé, ni la hauteur, ni la largeur ne conviennent. Il faut donc prévoir de l’espace non actionnable à l’entour de celui-ci pour que la zone réactive prévue pour ce bouton représente 48px.

RESSOURCES

Voir aussi :