Aller au contenu principal

Élément <abbr> en HTML accessible

Principes généraux​

Pour rendre un élément <abbr> accessible, il faut respecter ces principes :

  • Fournir la signification complète de l'abréviation
  • Assurer la compréhension du contenu pour tous les utilisateurs
  • Maintenir la cohérence dans l'utilisation des abréviations

Exemple typique​

<p>Le langage <abbr title="HyperText Markup Language">HTML</abbr> est utilisé pour structurer le contenu web.</p>

Utilisation avancée​

Abréviation avec style personnalisé​

<p>Le <abbr title="World Wide Web Consortium" class="org">W3C</abbr> développe des standards web.</p>
abbr.org {
  font-variant: small-caps;
  text-decoration: underline dotted;
}

Abréviation dans un contexte spécifique​

<p>Le protocole <abbr title="Hypertext Transfer Protocol Secure" lang="en">HTTPS</abbr> sécurise les communications web.</p>

Bonnes pratiques​

  • Utiliser l'attribut title pour fournir la forme complète de l'abréviation
  • Éviter d'utiliser <abbr> pour des termes couramment connus
  • Expliciter la signification de l'abréviation lors de sa première occurrence dans le texte
  • Assurer la cohérence dans l'utilisation des abréviations sur l'ensemble du site

Accessibilité avancée​

Utilisation de WAI-ARIA pour améliorer la compréhension​

<p>
  <abbr title="Organisation des Nations Unies" aria-label="ONU - Organisation des Nations Unies">ONU</abbr>
</p>

Fournir un glossaire pour les abréviations fréquentes​

<abbr title="Organisation du traité de l'Atlantique nord" id="otan">OTAN</abbr>
...
<section aria-labelledby="glossaire-titre">
  <h2 id="glossaire-titre">Glossaire</h2>
  <dl>
    <dt id="def-otan">OTAN</dt>
    <dd>Organisation du traité de l'Atlantique nord</dd>
  </dl>
</section>

La balise <abbr> n'a pas d'impact direct sur la navigation au clavier. Cependant, si des liens ou des interactions sont ajoutés aux abréviations, il faut s'assurer qu'ils sont accessibles au clavier.

Explications supplémentaires​

L'élément <abbr> est utilisé pour marquer les abréviations et les acronymes dans le contenu HTML. Son utilisation améliore la compréhension du texte pour tous les utilisateurs, y compris ceux utilisant des technologies d'assistance.

Checklist pour l'audit d'accessibilité​

  1. Vérifier que toutes les abréviations importantes sont balisées avec <abbr>
  2. S'assurer que l'attribut title est présent et contient la forme complète de l'abréviation
  3. Contrôler la cohérence des abréviations utilisées dans tout le document
  4. Vérifier que la première occurrence de chaque abréviation est explicitée dans le texte
  5. Tester la lisibilité et la compréhension du contenu avec les technologies d'assistance

Conformité RGAA​

  1. Vérification de la conformité avec les critères du RGAA relatifs aux abréviations
  2. Respect des niveaux de conformité visés (A, AA, AAA)
  3. Documentation des non-conformités éventuelles et des solutions proposées

Outils et méthodes​

  1. Inspection visuelle du code HTML pour vérifier l'utilisation correcte de <abbr>
  2. Utilisation d'outils de validation d'accessibilité automatisés
  3. Test avec différents lecteurs d'écran pour vérifier la restitution des abréviations
  4. Vérification de l'affichage et du comportement sur différents navigateurs et appareils

En suivant ces recommandations, vous vous assurez que vos éléments <abbr> sont accessibles et conformes aux normes WCAG et RGAA, offrant ainsi une expérience inclusive pour tous les utilisateurs.