Comment la classe « sr-only » de Bootstrap 3 améliore-t-elle l'accessibilité du lecteur d'écran ?

Assistance au lecteur d'écran : découvrir le rôle de sr-only dans Bootstrap 3

Dans Bootstrap 3, la classe sr-only joue un rôle crucial rôle dans l’accessibilité du Web. Il masque les informations uniquement pour les lecteurs d'écran, garantissant ainsi que les utilisateurs de technologies d'assistance peuvent naviguer et comprendre efficacement les pages Web.

Selon la documentation de Bootstrap, les éléments sr uniquement sont masqués du rendu visuel et n'occupent aucun espace dans la mise en page. Cela permet aux développeurs de fournir des étiquettes et d'autres textes informatifs aux lecteurs d'écran sans encombrer l'interface utilisateur.

Considérons l'exemple suivant :

<div class="btn-group">
    <button type="button" class="btn btn-info btn-md">Departments</button>
    <button type="button" class="btn btn-info dropdown-toggle btn-md" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Sales</a></li>
        <li><a href="#">Technical</a></li>
        <li class="divider"></li>
        <li><a href="#">Show all</a></li>
    </ul>
</div>

Dans cet exemple, la classe sr-only sur l'élément span masque le texte "Toggle Dropdown" de la vue visuelle. Cependant, la technologie d'assistance lira ce texte à haute voix, informant les utilisateurs de la fonction du bouton.

Il est crucial de conserver la classe sr uniquement à des fins d'accessibilité. Le supprimer peut entraver la fonctionnalité du lecteur d'écran et rendre votre site Web moins inclusif.

La classe applique des styles CSS pour masquer l'élément, notamment :

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

Si vous donnez la priorité à l'accessibilité, envisagez des ressources telles que la documentation sur la Web Accessibility Initiative (WAI) et MDN Accessibility pour améliorer l'expérience utilisateur des personnes handicapées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!