Notes de bas de page accessibles avec CSS

Les plats clés

• Les compteurs CSS peuvent être utilisés pour automatiser la numérotation des notes de bas de page, réduisant le besoin de renumérotation manuelle lorsque des modifications sont apportées au document. L'ordre des notes de bas de page dans le pied de page doit correspondre à l'ordre des références dans le texte.
• Pour rendre les notes de bas de page accessibles aux lecteurs d'écran, un titre peut être ajouté au pied de page pour décrire les références de note de bas de page. L'attribut «aria-descripdby» peut être utilisé pour relier les références à ce titre.
• Le pseudo-élément CSS ‘:: After’ peut être utilisé pour afficher le compteur pour chaque référence de note de bas de page. La pseudo-classe «cible» peut être utilisée pour mettre en évidence la note de bas de page lorsqu'elle est mentionnée.
• Pour rendre les liens entièrement accessibles entièrement accessibles, peut être ajouté. Cela implique d'ajouter un attribut d'ID unique à chaque référence du contenu, à qui peut être lié en ajoutant un lien dans chaque élément de liste du pied de page. L'attribut «aria-label» peut être utilisé pour décrire ces liens.

Je jouais avec les compteurs CSS l'autre jour et j'ai pensé à les utiliser pour gérer les notes de bas de page. Selon le plagiat qui a une entrée étonnamment longue sur la question, les notes de bas de page sont:

[…] Remarques placées au bas d'une page. Ils citent des références ou des commentaires sur une partie désignée du texte au-dessus.

Vous les voyez souvent dans des articles lorsque l'auteur souhaite ajouter une information ou citer une référence sans le faire au milieu du contenu ou en utilisant des parenthèses. Habituellement, les notes de bas de page sont représentées avec un nombre en fonction de la position de la note de bas de page dans le document, puis les mêmes nombres sont présents au bas du document, ajoutant du contenu supplémentaire.

Le problème avec les notes de bas de page sur le Web est qu'ils peuvent être pénibles à entretenir. Si vous travaillez souvent sur le même document, en modifiant l'ordre des sections, en ajoutant des références en cours de route, il pourrait être fastidieux de devoir ré-numériser toutes les notes de bas de page existantes. Par exemple, si vous avez 3 références existantes aux notes de bas de page dans un document, et que vous souhaitez en ajouter une autre, mais sur un contenu qui se produit avant tous les autres, vous devez tous les ré-numéroter. Pas génial…

Nous pourrions utiliser les compteurs CSS pour rendre tout cela beaucoup plus facile. Et si nous n'avions pas à maintenir la numérotation à la main et que cela pourrait être fait automatiquement? La seule chose à laquelle nous devrions prêter attention, c'est que l'ordre des notes réelles dans le pied de page respecte l'ordre de l'apparence des références dans le texte.

Création d'un exemple de document

Créons un exemple de document afin que nous puissions commencer.

<span><span><span><article</span>></span>
</span>  <span><span><span><h1</span>></span>CSS-Powered Footnotes<span><span></h1</span>></span>
</span>
  <span><span><span><p</span>></span>Maintaining <span><span><a</span> href<span>="#footnotes"</span>></span>footnotes<span><span></a</span>></span> manually can be a pain. 
</span>  By using <span><span><span><a</span> href<span>="#css"</span>></span>CSS<span><span></a</span>></span> <span><span><a</span> href<span>="#css-counters"</span>></span>counters<span><span></a</span>></span> to add 
</span>  the numbered references in the text and an ordered list to display the actual 
  footnotes in the footer, it becomes extremely easy.<span><span><span></p</span>></span>
</span>
  <span><span><span><footer</span>></span>
</span>    <span><span><span><ol</span>></span>
</span>      <span><span><span><li</span> id<span>="footnotes"</span>></span>Footnotes are notes placed at the bottom of a page. They 
</span>      cite references or comment on a designated part of the text above it.<span><span><span></li</span>></span>
</span>
      <span><span><span><li</span> id<span>="css"</span>></span>Cascading Style Sheets<span><span></li</span>></span>
</span>
      <span><span><span><li</span> id<span>="css-counters"</span>></span>CSS counters are, in essence, variables maintained by 
</span>      CSS whose values may be incremented by CSS rules to track how many times 
      they're used.<span><span><span></li</span>></span>
</span>    <span><span><span></ol</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></article</span>></span></span>

Notre exemple est léger: nous avons un certain contenu dans un élément

, qui contient des liens () pointés sur les identifiants à document, mappés aux notes du de l'article.

Avec quelques styles, cela pourrait ressembler à ceci:

le rendre accessible

Avant de monter sur les compteurs, nous devons nous assurer que notre balisage est entièrement accessible pour les lecteurs d'écran. La première chose que nous voulons faire est d'ajouter un titre à notre pied de page qui servira de description ou de références de notes de bas de page. Nous allons masquer ce titre avec CSS pour qu'il n'apparaît pas visuellement.

<span><span><span><article</span>></span>
</span>  <span><span><span><h1</span>></span>CSS-Powered Footnotes<span><span></h1</span>></span>
</span>
  <span><span><span><p</span>></span>Maintaining <span><span><a</span> href<span>="#footnotes"</span>></span>footnotes<span><span></a</span>></span> manually can be a pain. 
</span>  By using <span><span><span><a</span> href<span>="#css"</span>></span>CSS<span><span></a</span>></span> <span><span><a</span> href<span>="#css-counters"</span>></span>counters<span><span></a</span>></span> to add 
</span>  the numbered references in the text and an ordered list to display the actual 
  footnotes in the footer, it becomes extremely easy.<span><span><span></p</span>></span>
</span>
  <span><span><span><footer</span>></span>
</span>    <span><span><span><ol</span>></span>
</span>      <span><span><span><li</span> id<span>="footnotes"</span>></span>Footnotes are notes placed at the bottom of a page. They 
</span>      cite references or comment on a designated part of the text above it.<span><span><span></li</span>></span>
</span>
      <span><span><span><li</span> id<span>="css"</span>></span>Cascading Style Sheets<span><span></li</span>></span>
</span>
      <span><span><span><li</span> id<span>="css-counters"</span>></span>CSS counters are, in essence, variables maintained by 
</span>      CSS whose values may be incremented by CSS rules to track how many times 
      they're used.<span><span><span></li</span>></span>
</span>    <span><span><span></ol</span>></span>
</span>  <span><span><span></footer</span>></span>
</span><span><span><span></article</span>></span></span>

Ensuite, nous voulons décrire toutes nos références avec ce titre, en utilisant l'attribut Aria-DescripdBy:

<span><span><span><footer</span>></span>
</span>  <span><span><span><h2</span> id<span>="footnote-label"</span>></span>Footnotes<span><span></h2</span>></span>
</span>  <span><span><span><ol</span>></span>
</span>    ...
  <span><span><span></ol</span>></span>
</span><span><span><span></footer</span>></span></span>

Les utilisateurs du lecteur d'écran désormais comprendront quand les liens sont des références aux notes de bas de page.

ajoutant les références

Je sais ce que vous pensez: Il a dit qu'il y aurait des compteurs CSS. Où sont les compteurs CSS? Bien s'inquiéter non, mon ami, ils arrivent.

Ce que nous allons faire, c'est incrémenter un compteur pour chaque lien du document qui a un attribut Aria-DescriptedBy défini sur la note de bas de page. Ensuite, nous afficherons le compteur à l'aide du :: après pseudo-élément. De là, il s'agit d'appliquer les styles CSS.

<span><span><span><p</span>></span>Maintaining <span><span><a</span> aria-describedby<span>="footnote-label"</span> href<span>="#footnotes"</span>></span>footnotes<span><span></a</span>></span> 
</span>manually can be a pain. By using <span><span><span><a</span> aria-describedby<span>="footnote-label"</span> href<span>="#css"</span>></span>CSS<span><span></a</span>></span> 
</span><span><span><span><a</span> aria-describedby<span>="footnote-label"</span> href<span>="#css-counters"</span>></span>counters<span><span></a</span>></span> to add the 
</span>numbered references in the text and an ordered list to display the actual footnotes 
in the footer, it becomes extremely easy.<span><span><span></p</span>></span></span>

Maintenant, il ressemble à ceci:

assez sympa, hein? En tant que touche finale, lorsque nous nous dirigeons vers une note de bas de page à partir d'une référence, nous voulons mettre en évidence la note dans le pied de page afin que nous voyons réellement à quoi est référé la note, ce que nous pouvons faire en utilisant: la pseudo-classe cible:

<span>/**
</span><span> * Initialiazing a `footnotes` counter on the wrapper
</span><span> */
</span><span>article {
</span>  <span>counter-reset: footnotes;
</span><span>}
</span>
<span>/**
</span><span> * Inline footnotes references
</span><span> * 1. Increment the counter at each new reference
</span><span> * 2. Reset link styles to make it appear like regular text
</span><span> */
</span><span>a<span><span>[aria-describedby="footnote-label"]</span></span> {
</span>  <span>counter-increment: footnotes; /* 1 */
</span>  <span>text-decoration: none; /* 2 */
</span>  <span>color: inherit; /* 2 */
</span>  <span>cursor: default; /* 2 */
</span>  <span>outline: none; /* 2 */
</span><span>}
</span>
<span>/**
</span><span> * Actual numbered references
</span><span> * 1. Display the current state of the counter (e.g. `[1]`)
</span><span> * 2. Align text as superscript
</span><span> * 3. Make the number smaller (since it's superscript)
</span><span> * 4. Slightly offset the number from the text
</span><span> * 5. Reset link styles on the number to show it's usable
</span><span> */
</span><span>a<span><span>[aria-describedby="footnote-label"]</span>::after</span> {
</span>  <span>content: '[' counter(footnotes) ']'; /* 1 */
</span>  <span>vertical-align: super; /* 2 */
</span>  <span>font-size: 0.5em; /* 3 */
</span>  <span>margin-left: 2px; /* 4 */
</span>  <span>color: blue; /* 5 */
</span>  <span>text-decoration: underline; /* 5 */
</span>  <span>cursor: pointer; /* 5 */
</span><span>}
</span>
<span>/**
</span><span> * Resetting the default focused styles on the number
</span><span> */
</span><span>a<span><span>[aria-describedby="footnote-label"]</span>:focus::after</span> {
</span>  <span>outline: thin dotted;
</span>  <span>outline-offset: 2px;
</span><span>}</span>

C'est un peu brut, alors n'hésitez pas à personnaliser. Bien que je dois dire que j'aime le jaune pur pour un point culminant - il a l'air si authentique:

Fournir des liens de retour

Notre démo a besoin d'un dernier élément pour être entièrement accessible (ainsi que assez cool): des liens de retour à l'autre. Pensez-y: vous concentrez une référence, dirigez-vous vers la note pertinente dans le pied de page, lisez-la et puis… rien. Vous avez besoin d'un moyen de retourner là où vous êtes parti!

Fournir ces liens n'est pas si difficile: nous devons seulement ajouter un attribut d'ID unique à chaque référence du contenu afin qu'ils puissent être liés. J'ai décidé d'aller simples et de prendre l'ID à laquelle ils se réfèrent, et simplement ajouter -ref.

<span>footer <span>:target</span> {
</span>  <span>background: yellow;
</span><span>}</span>

Ensuite, chaque élément de la liste du pied de page a son propre lien en direction de l'ID pertinent que nous venons d'ajouter. Le contenu du lien est l'icône

backlink Unicode (↩), et il a un attribut aria-label avec une valeur de «Retour au contenu».

<span><span><span><p</span>></span>Maintaining <span><span><a</span> aria-describedby<span>="footnote-label"</span> href<span>="#footnotes"</span> id<span>="footnotes-ref"</span>></span>footnotes<span><span></a</span>></span> 
</span>manually can be a pain. By using <span><span><span><a</span> aria-describedby<span>="footnote-label"</span> href<span>="#css"</span> id<span>="css-ref"</span>></span>CSS<span><span></a</span>></span> 
</span><span><span><span><a</span> aria-describedby<span>="footnote-label"</span> href<span>="#css-counters"</span> id<span>="css-counters-ref"</span>></span>counters<span><span></a</span>></span> 
</span>to add the numbered references in the text and an ordered list to display the actual 
footnotes in the footer, it becomes extremely easy.<span><span><span></p</span>></span></span>

Pour cibler ces liens dans CSS, nous pouvons compter sur l'attribut aria-label de la même manière que nous avons fait pour Aria-DescripdBy:

<span><span><span><ol</span>></span>
</span>  <span><span><span><li</span> id<span>="footnotes"</span>></span>Footnotes are notes placed at the bottom of a page. 
</span>  They cite references or comment on a designated part of the text above it. 
  <span><span><span><a</span> href<span>="#footnotes-ref"</span> aria-label<span>="Back to content"</span>></span>↵<span><span></a</span>></span><span><span></li</span>></span>
</span>  <span><span><span><li</span> id<span>="css"</span>></span>Cascading Style Sheets 
</span>  <span><span><span><a</span> href<span>="#css-ref"</span> aria-label<span>="Back to content"</span>></span>↵<span><span></a</span>></span><span><span></li</span>></span>
</span>  <span><span><span><li</span> id<span>="css-counters"</span>></span>CSS counters are, in essence, variables maintained 
</span>  by CSS whose values may be incremented by CSS rules to track how many 
  times they're used. <span><span><span><a</span> href<span>="#css-counters-ref"</span> aria-label<span>="Back to content"</span>></span>↵<span><span></a</span>></span><span><span></li</span>></span>
</span><span><span><span></ol</span>></span></span>

Voici à quoi ressemble la démo finale:

Voir les notes de bas de page accessibles au stylo avec CSS par SitePoint (@SitePoint) sur Codepen.

Réflexions finales

Avec rien d'autre que quelques lignes de CSS et quelques attributs ARIA, nous avons réussi à créer des notes de bas de page alimentées par CSS qui sont accessibles et n'ont pas besoin de JavaScript. À quel point est-ce cool?

Sur le sujet, je recommande fortement le CSS sémantique avec des sélecteurs intelligents de Heydon Pickering. Assurez-vous également de consulter A11y.css de Gaël Poupard pour vérifier l'accessibilité de vos pages.

Énorme merci à Heydon Pickering pour sa précieuse aide concernant l'accessibilité dans cette démo.

Questions fréquemment posées (FAQ) sur les notes de bas de page accessibles dans CSS

Quelle est la signification de l'utilisation de notes de bas de page dans le contenu Web?

Les notes de bas de page jouent un rôle crucial dans l'amélioration de la lisibilité et de la crédibilité du contenu Web. Ils fournissent des informations, des explications ou des références supplémentaires sans perturber le flux du contenu principal. Ils sont particulièrement utiles dans le contenu académique, de recherche ou technique où des explications ou des sources détaillées sont nécessaires. En utilisant des notes de bas de page, les lecteurs peuvent choisir de approfondir le sujet à leur discrétion, ce qui rend le contenu plus convivial et accessible.

Comment puis-je créer des notes de bas de page accessibles à l'aide de CSS?

Création accessible Les notes de bas de page utilisant CSS implique quelques étapes. Tout d'abord, vous devez marquer vos notes de bas de page en HTML en utilisant les balises appropriées. Ensuite, vous pouvez utiliser CSS pour coiffer et positionner vos notes de bas de page. CSS vous permet de contrôler l'apparence de vos notes de bas de page, y compris leur taille de police, leur couleur et leur position sur la page. Vous pouvez également utiliser CSS pour créer un lien vers le texte principal à partir de la note de bas de page, ce qui permet aux lecteurs de naviguer plus facilement. , CSS peut être utilisé pour créer des notes de bas de page dynamiques. Cela signifie que les notes de bas de page peuvent être faites pour apparaître ou disparaître en fonction de l'interaction utilisateur, telles que planant sur un mot ou une phrase particulier. Cela peut être réalisé en utilisant des pseudo-classes CSS et des transitions. Cependant, il est important de s'assurer que ces notes de bas de page dynamiques sont toujours accessibles à tous les utilisateurs, y compris ceux qui utilisent des technologies d'assistance.

Quelles sont les meilleures pratiques pour créer des notes de bas de page accessibles?

Lors de la création de notes de bas de page accessibles, Il est important de s'assurer qu'ils se distinguent clairement du texte principal, faciles à naviguer et fournissent des informations utiles. Cela peut être réalisé en utilisant une taille ou une couleur de police différente pour les notes de bas de page, en fournissant un lien vers le texte principal et en s'assurant que les notes de bas de page sont pertinentes et concises. De plus, il est important de tester vos notes de bas de page avec diverses technologies d'assistance pour s'assurer qu'elles sont vraiment accessibles.

Comment puis-je styliser mes notes de bas de page en utilisant CSS?

CSS offre une large gamme de propriétés que vous pouvez utiliser pour styliser vos notes de bas de page. Par exemple, vous pouvez utiliser la propriété «-Size» pour ajuster la taille du texte de la note de bas de page, la propriété «couleur» pour modifier sa couleur et la propriété «position» pour contrôler sa position sur la page. Vous pouvez également utiliser CSS pour créer une bordure autour de vos notes de bas de page, ajouter une couleur d'arrière-plan ou appliquer d'autres effets stylistiques.

Comment puis-je m'assurer que mes notes de bas Assurez-vous que vos notes de bas de page sont accessibles aux lecteurs d'écran, vous devez utiliser le balisage HTML sémantique pour indiquer clairement le début et la fin de chaque note de bas de page. Vous pouvez également utiliser des rôles et des propriétés ARIA pour fournir des informations supplémentaires sur les notes de bas de page aux technologies d'assistance. De plus, il est important de fournir un lien vers le texte principal de chaque note de bas de page, afin que les utilisateurs du lecteur d'écran puissent facilement naviguer dans votre contenu.

Puis-je utiliser CSS pour créer des notes de bas de page qui sont réactives sur différents appareils?

Oui, vous pouvez utiliser CSS pour créer des notes de bas de page réactives sur différents appareils. Cela peut être réalisé en utilisant des requêtes multimédias pour ajuster le style et la position des notes de bas de page en fonction de la taille de l'écran. Cela garantit que vos notes de bas de page sont faciles à lire et à naviguer sur tous les appareils, des ordinateurs de bureau vers les téléphones mobiles.

Quelles sont les erreurs courantes à éviter lors de la création de notes de bas Lors de la création de notes de bas de page incluent les rendre trop longs ou complexes, ne pas fournir de lien vers le texte principal et ne pas les tester avec des technologies d'assistance. Il est également important d'éviter d'utiliser les notes de bas de page comme substitut à l'écriture claire et concise. Les notes de bas de page doivent compléter le texte principal, et non le remplacer.

Comment puis-je utiliser CSS pour créer un effet de survol pour mes notes de bas en utilisant la pseudo-classe ': Hover'. Cela vous permet de modifier le style de la note de bas de page lorsque l'utilisateur plane dessus avec sa souris. Par exemple, vous pouvez modifier la couleur d'arrière-plan de la note de bas de page, ou la faire apparaître dans une boîte contextuelle. Cependant, il est important de s'assurer que cet effet de survol est également accessible aux utilisateurs du clavier et aux utilisateurs des technologies d'assistance.

Puis-je utiliser CSS pour créer des notes de bas de page dans différentes langues?

Oui, vous pouvez utiliser CSS pour créer des notes de bas de page dans différentes langues. Cela peut être réalisé en utilisant la pseudo-classe «:: Lang ()» pour appliquer différents styles aux notes de bas de page en fonction de la langue. Cela vous permet de répondre à un public diversifié et de vous assurer que votre contenu est accessible à tous les utilisateurs, quelle que soit leur langue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!