Bienvenue dans ce nouveau tutoriel tutoriel Bootstrap Le framework Bootstrap 4...
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.
Le contexte d'une proposition commerciale professionnelle est la base qui permet d’établir la pertinence de…
Recevoir une proposition d’embauche est toujours un moment gratifiant. C’est l’aboutissement d’un processus souvent long…
10 Modèles de lettres pour Refuser Poliment une Offre Commerciale 👇 Refuser une offre commerciale…
La feuille de route produit est un document stratégique qui guide le développement, le lancement,…
Voici un guide détaillé sur les composants constitutifs d'un budget d'entreprise, destiné aux entrepreneurs et…
Ce guide - budget d'entreprise - est destiné aux gestionnaires, responsables financiers, ou chefs d'entreprise…
This website uses cookies.