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.
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
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.
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>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>aria-hidden avec parcimonie, en veillant à cacher uniquement les éléments décoratifs.aria-label pour les icônes sans texte contextuel évident.aria-labelledby et aria-describedby pour des descriptions détaillées et des libellés explicites.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.
Préparez efficacement votre entretien commercial avec 140 questions clés et 12 mises en situation concrètes…
Un entretien d’embauche crée souvent une impression particulière. Quelques minutes avant d’entrer dans la salle…
Dans le bâtiment, un devis représente souvent le premier véritable contact entre une entreprise et…
Dans un EHPAD, chaque candidature révèle une manière d’être autant qu’un savoir-faire. Derrière la lettre…
Télécharger des modèles et exemples Word de lettres de motivation pour mutation interne ⬇️ Au…
Télécharger des modèles et exemples de lettres de motivation pour promotion interne ⬇️ Rédiger une…
This website uses cookies.