A quoi sert la classe sr-only
? Est-elle importante ou puis-je la supprimer ? Cela fonctionne bien sans.
Voici mon exemple :
<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>
Selon la documentation de [bootstrap][1], cette classe est utilisée pour masquer les informations destinées uniquement aux lecteurs d'écran dans la mise en page de la page rendue.
Les lecteurs d'écran auront des difficultés avec vos formulaires si vous n'incluez pas une étiquette pour chaque entrée. Pour ces formulaires en ligne, vous pouvez masquer les étiquettes à l'aide de la classe .sr-only.
Voici un [exemple][2] de style utilisé :
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
Est-ce important ou puis-je le supprimer ? Il fonctionne bien sans.
C’est important, ne le supprimez pas.
Vous devez toujours tenir compte des lecteurs d'écran à des fins d'accessibilité. L'utilisation de la classe masquera l'élément de toute façon, vous ne devriez donc pas voir de différence visuelle.
Si vous souhaitez en savoir plus sur l'accessibilité :
Initiative pour l'accessibilité du Web (WAI)] [3].
[Documentation sur l'accessibilité de MDN][4].
[1] : http://getbootstrap.com/css/#helper-classes-screen-readers [2] :
[3] : http://www.w3.org/WAI/ [4] : https://developer.mozilla.org/en-US/docs/Web/Accessibility?redirectlocale=en-US&redirectslug=AccessibilitéComme l'a dit JoshC, la classe est utilisée pour masquer les informations utilisées par les lecteurs d'écran. Mais pas seulement pour cacher les étiquettes, vous pouvez envisager de cacher aux utilisateurs voyants un lien interne "skip to main content" ; qui est souhaitable pour les utilisateurs aveugles si vous avez une navigation complexe ou des publicités avant le contenu principal.
Si vous souhaitez que votre site interagisse encore plus avec les lecteurs d'écran, utilisez les éléments suivants
les attributs ARIA normalisés par le W3C et je vous recommande vivement de visiter Je vous recommande vivement de visiter le [cours en ligne de Google][1], qui ne vous prendra qu'une ou deux heures, ou au moins de regarder un [cours en ligne de Google][2]. au moins regarder une [vidéo de 40 minutes de Google][2].
Selon l'Organisation mondiale de la santé, 285 millions de personnes souffrent de déficiences visuelles. Il est donc important de rendre un site web accessible.
MISE À JOUR 2019 :
En tant que développeurs, nous devrions créer des contenus accessibles qui fonctionnent simplement pour tous, prêts à l'emploi, et ne pas cibler spécifiquement les lecteurs d'écran. Ce n'est pas toujours possible, mais soyez prudent en utilisant ARIA et les ajustements pour les lecteurs d'écran seulement. Ne le faites pas si vous ne le comprenez pas parfaitement. Une mise en œuvre incorrecte pourrait être bien pire que de ne pas l'utiliser du tout. Veuillez lire le [guide du développeur de l'accessibilité sur les mauvais exemples d'ARIA][3]. Vous y trouverez également des composants/widgets entièrement accessibles qui ne nécessitent aucune intervention de type "lecteur d'écran uniquement".
[1] : https://webaccessibility.withgoogle.com/course [2] :
[3] : https://www.accessibility-developer-guide.com/knowledge/aria/bad-practices/J'ai trouvé cela dans l'[exemple de barre de navigation][1], et je l'ai simplifié.
<ul class="nav">
<li><a>Default</a></li>
<li><a>Static top</a></li>
<li><b><a>Fixed top <span class="sr-only">(current)</span></a></b></li>
</ul>
Vous voyez lequel est sélectionné (la partie sr-only
est cachée) :
Vous entendez lequel est sélectionné si vous utilisez un lecteur d'écran :
Grâce à cette technique, les personnes aveugles sont censées pouvoir naviguer plus facilement sur votre site Web.