Aller au contenu principal

Élément <p> en HTML accessible

Principes généraux​

Pour rendre un élément <p> accessible :

  • Utiliser l’élément <p> pour structurer le contenu textuel en paragraphes distincts.
  • Assurer un contraste suffisant entre le texte et l’arrière-plan pour garantir sa lisibilité.
  • Éviter l’utilisation d’éléments <p> pour contenir uniquement des images ou du contenu non textuel.
  • Fournir des alternatives accessibles pour tout contenu visuel ou interactif intégré dans un paragraphe.

Exemple typique​

<p>Bienvenue sur notre site web. Nous offrons une variété de services pour répondre à vos besoins.</p>

Utilisation avancée​

Paragraphe avec un lien​

<p>
  Pour plus d'informations, visitez notre <a href="https://example.com">site web officiel</a>.
</p>

Paragraphe contenant des éléments interactifs​

<p>
  Cliquez sur le bouton ci-dessous pour soumettre votre demande :
  <button>Soumettre</button>
</p>

Paragraphe avec contenu visuel descriptif​

<p>
  Voici une représentation graphique de nos résultats :
  <img src="graphique.png" alt="Graphique montrant une augmentation des ventes de 20% en 2023" />
</p>

Bonnes pratiques​

  • Utiliser <p> uniquement pour du contenu textuel et descriptif.
  • Éviter d’insérer des éléments structurants comme des titres (<h1>, <h2>) ou des listes (<ul>, <ol>) à l’intérieur d’un paragraphe.
  • Ajouter des descriptions textuelles pour tout contenu visuel ou non textuel inclus dans un paragraphe.
  • Veiller à ce que le texte respecte une taille et un contraste suffisants pour garantir sa lisibilité.

Accessibilité avancée​

Utilisation avec ARIA pour des descriptions contextuelles​

<p id="context">
  Cet article traite des meilleures pratiques pour l'accessibilité web.
</p>
<button aria-describedby="context">En savoir plus</button>

Paragraphe masqué visuellement mais accessible​

<p class="sr-only">Ce site utilise des cookies pour améliorer votre expérience.</p>

<style>
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>

Les paragraphes <p> ne sont pas interactifs par défaut et n’affectent pas directement la navigation au clavier. Cependant :

  • Tout contenu interactif (lien, bouton, etc.) inclus dans un paragraphe doit être accessible via Tab.
  • L’ordre des paragraphes doit suivre une logique de lecture naturelle.

Checklist pour l'audit d'accessibilité​

  1. Les paragraphes sont utilisés de manière sémantique pour structurer le contenu textuel.
  2. Les éléments interactifs intégrés dans un paragraphe sont accessibles via le clavier.
  3. Le contraste entre le texte et l’arrière-plan respecte les normes WCAG (minimum 4,5:1).
  4. Les paragraphes contenant des images ou des médias visuels incluent des descriptions accessibles.
  5. Les paragraphes masqués visuellement mais essentiels pour l'accessibilité sont accessibles aux technologies d'assistance.

Conformité RGAA​

  1. Vérification de la conformité avec les critères du RGAA relatifs au contenu textuel.
  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. Utiliser des outils comme Axe ou Wave pour vérifier les contrastes et la structure du contenu.
  2. Tester la lisibilité et l’ordre de navigation avec des lecteurs d’écran (NVDA, JAWS, VoiceOver).
  3. Vérifier manuellement que les descriptions alternatives sont pertinentes et complètes.

En suivant ces recommandations, vos paragraphes <p> seront accessibles et conformes aux normes WCAG et RGAA, garantissant une expérience utilisateur inclusive et agréable.