Notes de bas de page

Aperçu

Responsable de projet : Eric Dunsworth (@EricDunsworth)

Ce composant permet aux développeurs d’intégrer facilement des notes de bas de page dans leurs pages Web et facilite la conformité à WCAG 2.0 lors de l’intégration de ces notes de bas de page.

Objet

Ce composant vise à assurer que les notes de bas de page sont conformes aux exigences de WCAG 2.0. L’objet principal est de mettre les notes de bas de page dans une liste de définitions dans une section qui leur est réservée. Un plugiciel d’appui est utilisé pour améliorer la navigation, l’accessibilité et assurer une compatibilité descendante aux anciens navigateurs pris en charge.

Justification

Beaucoup de sites Web affichent des notes de bas de page de façon incohérente et inaccessible. Ce composant vise à remédier aux problèmes rencontrés dans des sites Web qui offrent la BOEW.

Mise en œuvre

Prière de se reporter à la présente section pour des directives sur la mise en œuvre de ce composant.

Les pages suivantes contiennent des exemples pratiques de mise en œuvre (que l’on trouve dans la présente section sur les directives).

Footnote Indicators

Footnotes are generally denoted by numbers, but may also be represented by other kinds of indicators, such as single letters or symbols.

The numbers used throughout this documentation's footnote examples (including numbers within IDs) can be safely subsituted with alternate kinds of indicators.

Lien vers les notes de bas de page

Cette section montre comment rechercher le lien vers les notes de bas de page.

Lien vers la section des notes de bas de page

Utiliser le code suivant pour rechercher le lien vers la section des notes de bas de page.

<a href="#fnb">Notes de bas de page</a>

Lien vers une note de bas de page

Utiliser le code suivant pour rechercher le lien vers une note de bas de page particulière.

<sup id="fnb1-ref"><a class="footnote-link" href="#fnb1"><span class="wb-invisible">Note de bas de page </span>1</a></sup>

Remarque : Les attributs ID des liens vers une note de bas de page multiréférentielle devraient contenir une lettre classée par ordre alphabétique placée juste après le nombre (par exemple : id="fnb2a-ref", id="fnb2b-ref", id="fnb2c-ref", etc.) afin de pouvoir faire, à l’aide d’un programme, la distinction entre les liens de référence.

Link to Multiple Footnotes

Use the following code as a basis to consecutively link to multiple footnotes.

<sup id="fnb2-ref"><a class="footnote-link" href="#fnb2"><span class="wb-invisible">Note de bas de page </span>2</a></sup> <sup id="fnb3-ref"><a class="footnote-link" href="#fnb3"><span class="wb-invisible">Note de bas de page </span>3</a></sup>

Note: Non-breaking spaces (i.e. &#160;) should be used to separate each link.

Section des notes de bas de page

Cette section explique comment créer une section réservée aux notes de bas de page.

Utiliser le code suivant pour créer la section:

<div class="wet-boew-footnotes" role="note">
	<section>
		<h2 id="fnb" class="wb-invisible">Notes de bas de page</h2>
		<dl>
			<!--INSÉRER LES NOTES DE BAS DE PAGE ICI-->
		</dl>
	</section>
</div>

Types de notes de bas de page

Cette section explique comment créer différents types de notes de bas de page censées être intégrées dans la section.

Notes de bas de page normales

Il s’agit d’une note de bas de page mentionnée qu’une seule fois dans une page donnée.

Utiliser le code suivant pour créer une note de bas de page normale :

<dt>Note de bas de page 1</dt>
<dd id="fnb1">
	<p>Exemple de note de bas de page standard.</p>
	<p class="footnote-return"><a href="#fnb1-ref"><span class="wb-invisible">Retour à la référence de la note de bas de page </span>1</a></p>
</dd>

Note de bas de page multiréférentielle

Il s’agit d’une note de bas de page mentionnée deux fois ou plus dans une page donnée. Par défaut, son lien retour devrait indiquer (et identifier explicitement) le premier renvoi à la note de bas de page. Si la prise en charge de JavaScript est disponible, un plugiciel d’appui supprimera automatiquement l’identificateur explicite dans le texte du lien retour, en plus de gérer la destination du lien retour lorsque l’accès à la note de bas de page se fait par une référence différente à partir du contenu.

Utiliser le code suivant pour créer une note de bas de page qui peut être mentionnée par plusieurs éléments du contenu:

<dt>Note de bas de page 2</dt>
<dd id="fnb2">
	<p>Exemple de note de bas de page qui comporte de nombreux liens.</p>
	<p class="footnote-return"><a href="#fnb2a-ref"><span class="wb-invisible">Retour à la <span>première</span> référence de la note de bas de page </span>2</a></p>
</dd>

Remarque : Les attributs href des liens retour dans des notes de bas de page multiréférentielles devraient toujours contenir un « a » après le numéro de la note de bas de page (p. ex. href="#fnb2a-ref").

Remarque 2 : Le texte du lien retour de notes de bas de page multiréférentielles devrait toujours contenir, pour désigner spécifiquement leurs destinations par défaut quand il n’y a pas de prise en charge de JavaScript.

Note de bas de page de plusieurs paragraphes

Les notes de bas de page contenant deux ou plusieurs paragraphes sont prises en charge. Elles peuvent se présenter sous forme de notes de bas de page normale ou multiréférentielle.

Utiliser le code suivant pour créer une note de bas de page contenant plusieurs paragraphes :

<dt>Note de bas de page 3</dt>
<dd id="fnb3">
	<p>Exemple de note de bas de page qui compte plusieurs paragraphes (premier paragraphe).</p>
	<p>Exemple de note de bas de page qui compte plusieurs paragraphes (deuxième paragraphe).</p>
	<p>Exemple de note de bas de page qui compte plusieurs paragraphes (troisième paragraphe).</p>
	<p class="footnote-return"><a href="#fnb3-ref"><span class="wb-invisible">Retour à la référence de la note de bas de page </span>3</a></p>
</dd>

Migration de la BOEW 2.x à la BOEW 3.x

En cas de migration de la mise en œuvre de ce composant de la BOEW 2.x à la BOEW 3.x, les changements suivants de balisage HTML devraient être apportés :

  • Les attribut ID des liens vers la note de bas de page ne sont plus placés sur des éléments, ils doivent maintenant être placés sur des éléments <a> (à partir de la version 1.01 dans la BOEW 2.3)
  • Le nom de classe de la section des notes de bas de page a été modifiée de footnotes-container à wet-boew-footnotes
  • La section des notes de bas de page (ou son conteneur <div>) devrait être intégrée dans un élément <section>
  • Les ID de notes de bas de page sont maintenant déclarés directement sur des éléments <dd> (au lieu d’éléments <dt>)
  • Paragraph class name for footnote return links has changed from float-left to footnote-return
  • Les notes de bas de page multiréférentielles utilisent maintenant des intervalles imbriqués additionnels autour du « première » texte dans leurs liens retour cachés (soit première devient maintenant <span>première</span>)
  • Les notes de bas de page de plusieurs paragraphes ne nécessitent plus de conteneur <div> pour s’afficher correctement.

Développement

This component's source code can be found within the following files under the WET repository:

Problèmes connus

Les problèmes suivants existent dans ce composant :

  • L’impression des CSS peut être défaillante dans le navigateur Opera (il semblerait que ce soit un problème général lié à ce navigateur)
  • Le balisage HTML peut changer d’une version à l’autre, la compatibilité descendante et des stratégies d’entretien à long terme devraient être envisagées

À venir

Les améliorations suivantes doivent être mises en œuvre dans les prochaines versions de ce composant :

  • Mise à jour du contenu factice des pages d’exemples pratiques
  • Sélecteurs de signet dans les SCSS (il faut SASS 2.3.0 ou une version ultérieure; non-disponible dans la BOEW 3.0)
  • « Réinitialiser » correctement les liens retour dynamiques dans les notes de bas de page multiréférentielles en cliquant dessus
  • Fondu enchaîné des notes de bas de page mises en surbrillance au moyen des attributs transition CSS3 (et jQuery pour les anciens navigateurs pris en charge)
  • Option de fenêtre flash des notes de bas de page (tentative)

Historique des versions