Comment intégrer des notes de bas de page accessibles en HTML ?

Impact des notes de bas de page pour l’accessibilité

Bien qu’il ne s’agisse pas de non-conformités au RGAA, les notes de bas de page posent deux problématiques pour l’accessibilité numérique :

• l’accès à l’information : puis-je identifier et consulter facilement la note de bas de page, avec un lecteur d’écran ou une loupe vocalisée notamment ?
• le retour à la position initiale dans le contenu : une fois que j’ai lu la note de bas de page, est-il facile de reprendre ma lecture initiale ?

Ces difficultés touchent principalement les personnes aveugles et les personnes qui naviguent au clavier (sans souris).

Comment structurer des notes de bas de page HTML pour l’accessibilité ?

C’est pourquoi une note de bas de page devrait toujours se composer de la façon suivante :

• un lien de renvoi à une note dans une liste en bas de page ;
• sur ce lien, un attribut title ou une propriété aria-describedby qui reprend le contenu de la note ;
• un lien de retour au contenu depuis la note de bas de page.

Grâce à l’attribut title ou à la propriété aria-describedby qui référence l’attribut ID de la note, le texte de la note sera restitué. Les éléments sémantiques éventuels (listes, liens, etc.) de la note ne seront pas restitués, mais il existe toujours la possibilité d’aller consulter la note et de revenir.

Exemple d’implémentation de notes de bas de page

Par convention, on indique la présence d’une note de bas de page au moyen d’un lien qui contient un numéro entre crochets, par exemple « [1] » pour la première note.

<p>Pour une bonne tarte à la rhubarbe, 
	prévoir une abaisse de pâte brisée<a id="nh1" href="#nb1" aria-describedby="nb1">[1]</a>, 
	environ 1 kg de rhubarbe épluchée, 
	100 g de sucre, 3 œufs, 25 cl de crème fraîche liquide 
	et de la cannelle <a id="nh2" href="#nb2" aria-describedby="nb2">[2]</a>.
</p>

<footer> 
  <h2>Notes</h2> 
  <ul> 
    <li id="nb1" tabindex="-1"> 
	 <p>
	  <a href="#nh1" title="retour au texte 1">[1]</a> 
	   Pour la pâte brisée, mélanger 110 g de beurre froid coupé en morceau à 330 g de farine. 
	   Incorporer ensuite 110 g d’eau froide.
	 </p>
    </li> 
    <li id="nb2" tabindex="-1" > 
     <p>
      <a href="#nh2" title="retour au texte 2">[2]</a> à votre convenance.
	 </p>
    </li> 
  </ul> 
</footer>  

L’ajout d’un attribut tabindex="-1" sur les cibles des ancres (ici les éléments ul li) permet d’assurer le déplacement du focus avec les différents lecteurs d’écran étant donné qu’il s’agit d’éléments non interactifs. Nous avons également ajouté des attributs title="retour au texte [numéro]" aux liens de retour afin de les rendre plus explicites.

Restitution de la note de bas de page

Par exemple, voici comment est restituée la deuxième note par les lecteurs d’écran de la base de référence du RGAA 4.

• Avec JAWS 2021 et Firefox 104 : « Lien [2], puce [2] à votre convenance. »
• Avec NVDA 2021 et Firefox 104 : « [2] lien puce [2] à votre convenance. »
• Avec VoiceOver (macOS Monterey, version 12.5) et Safari 15.6 : « lien, [2], [2] à votre convenance. »

Pour des tests complets, consulter la page dédiée sur notre site tests.a11y.fr.

À retenir

Pour résumer, deux ingrédients sont nécessaires pour rendre des notes de bas de page HTML accessibles  :

• un lien menant à la note de bas de page : ce lien doit posséder une propriété aria-describedby référençant l’attribut ID de la note ;
• un lien de retour au contenu depuis la note de bas de page, situé dans l’idéal au début de la note pour permettre à l’utilisatrice de reprendre tout de suite sa lecture initiale en cas d’erreur de manipulation.

Pour compléter, nous vous recommandons l’article Accessible Footnotes with CSS de Kitty Giraudel qui propose des idées intéressantes pour personnaliser les styles de vos notes de bas de page, notamment la mise en exergue des contenus concernés.

Ressources

• Recommandations du W3C pour la contribution éditoriale
• Accessible footnotes and a bit of React