Balises ARIA avec Bootstrap : Une Combinaison Puissante pour l’Accessibilité

7 mars 2024 AZ

Les balises ARIA (Accessible Rich Internet Applications) jouent un rôle essentiel dans l’amélioration de l’accessibilité des sites web. Lorsqu’elles sont associées à Bootstrap, un framework CSS populaire, elles renforcent la qualité de l’expérience utilisateur pour tous. Dans cet article, découvrons comment exploiter cette combinaison puissante pour rendre les icônes accessibles dans vos projets Bootstrap.

Intégration des Balises ARIA avec Bootstrap

1. aria-hidden avec Bootstrap :

aria-hidden est un attribut utilisé pour indiquer aux technologies d’assistance si un élément doit être ignoré ou non. Avec Bootstrap, cela peut être particulièrement utile lorsque vous avez des éléments visuels qui ne sont pas nécessaires pour les utilisateurs qui utilisent des technologies d’assistance, mais qui sont toujours importants pour la mise en page ou la fonctionnalité.

Utilisez la propriété aria-hidden pour cacher des icônes décoratives dans le contexte de Bootstrap.

<!-- Icône visible avec Bootstrap -->
<span class="badge bg-primary" aria-hidden="true">5</span>

<!-- Icône décorative cachée des technologies d'assistance -->
<span class="badge bg-primary" aria-hidden="true">5</span>

Voici un exemple de cas particulier où vous pourriez utiliser aria-hidden avec Bootstrap :

Supposons que vous avez une barre de navigation Bootstrap avec un logo à côté du texte du site. Vous pouvez vouloir que le logo soit visible pour les utilisateurs réguliers, mais ignoré pour les utilisateurs de technologies d’assistance comme les lecteurs d’écran.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example using aria-hidden with Bootstrap</title>
  <!-- Link Bootstrap CSS -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="logo.png" alt="Logo" width="30" height="30" class="d-inline-block align-top" aria-hidden="true">
    Bootstrap Site
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

<!-- Link Bootstrap JS (Optional, for certain components) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>
</html>

Dans cet exemple, l’attribut aria-hidden="true" est ajouté à la balise img contenant le logo. Cela signifie que le logo sera ignoré par les technologies d’assistance, mais il sera toujours visible pour les utilisateurs ordinaires. Cela permet de maintenir l’intégrité de la mise en page sans compromettre l’accessibilité pour les utilisateurs de technologies d’assistance.
Example using aria-hidden with Bootstrap Bootstrap Sit

2. aria-label avec Bootstrap :

Associez aria-label à des icônes sans texte contextuel dans le cadre de Bootstrap.

<!-- Icône d'étoile avec Bootstrap sans libellé -->
<i class="bi bi-star" aria-label="Étoile"></i>

Un cas particulier où vous pourriez utiliser aria-label avec Bootstrap est lorsque vous avez un élément visuel qui nécessite une description textuelle pour les utilisateurs de technologies d’assistance, mais cette description n’est pas immédiatement visible pour les utilisateurs normaux.

Par exemple, supposons que vous avez un bouton d’icône dans votre interface utilisateur Bootstrap qui, lorsqu’il est cliqué, déclenche une action sans libellé visuel. Dans ce cas, vous pouvez utiliser aria-label pour fournir une description de l’action qui sera lue par les technologies d’assistance.

Voici un exemple de cas particulier utilisant aria-label avec Bootstrap :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example using aria-label with Bootstrap</title>
  <!-- Link Bootstrap CSS -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<button type="button" class="btn btn-primary" aria-label="Search">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
    <path d="M11.742 9.344a5.5 5.5 0 1 0-1.398 1.398l3.85 3.85a1 1 0 0 0 1.415-1.415l-3.85-3.85zm-.743 2.078a4.5 4.5 0 1 1-.707-.707 4.5 4.5 0 0 1 .707.707z"/>
  </svg>
</button>

<!-- Link Bootstrap JS (Optional, for certain components) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>
</html>

Dans cet exemple, le bouton utilise une icône de recherche sans aucun texte explicatif visible. Cependant, l’attribut aria-label="Search" est ajouté au bouton pour fournir une description de l’action de recherche qui sera lue par les technologies d’assistance. Cela garantit que les utilisateurs de lecteurs d’écran comprennent l’action associée au bouton même si elle n’est pas explicitement visible.

3. aria-labelledby avec Bootstrap :

Reliez une icône à un libellé externe grâce à aria-labelledby dans un contexte Bootstrap.

<!-- Libellé hors de l'icône -->
<span id="label">Menu</span>

<!-- Icône avec aria-labelledby -->
<button class="btn btn-primary" aria-labelledby="label">
  <i class="bi bi-list"></i>
</button>

4. aria-describedby avec Bootstrap :

Connectez une icône à une description externe avec aria-describedby dans un contexte Bootstrap.

<!-- Description hors de l'icône -->
<span id="description">Icône représentant un utilisateur</span>

<!-- Icône avec aria-describedby -->
<i class="bi bi-person" aria-describedby="description"></i>

Avantages de l’Utilisation de Bootstrap avec ARIA

Compatibilité Assurée : Bootstrap est conçu avec l’accessibilité à l’esprit, ce qui facilite l’intégration des balises ARIA sans heurts.
Rapidité de Développement : Les classes Bootstrap simplifient la structuration du HTML, permettant une mise en œuvre rapide des balises ARIA.
Consistance Visuelle : L’association des balises ARIA garantit une expérience visuelle et interactive cohérente, quel que soit le dispositif ou les technologies d’assistance utilisées.

Bonnes Pratiques avec Bootstrap et ARIA

Utilisez aria-hidden avec parcimonie, en veillant à cacher uniquement les éléments décoratifs.
Privilégiez aria-label pour les icônes sans texte contextuel évident.
Exploitez aria-labelledby et aria-describedby pour des descriptions détaillées et des libellés explicites.

Conclusion

En combinant les fonctionnalités de Bootstrap avec la puissance des balises ARIA, vous créez des interfaces web modernes, esthétiques et surtout, accessibles. Cette approche facilite l’inclusion et l’interaction de tous les utilisateurs, indépendamment de leurs besoins spécifiques. En adoptant ces bonnes pratiques, vous contribuez à rendre le web accessible à tous, une initiative cruciale pour le développement web responsable.