Qu'est-ce que sr-only dans Bootstrap 3?
À quoi sert la classe sr-only? Est-ce important ou puis-je l'enlever? 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 documentation de bootstrap , la classe est utilisée pour masquer des informations destinées uniquement à lecteurs d'écran à partir de la mise en page de la page rendue.
Les lecteurs d'écran auront des problèmes avec vos formulaires si vous n'incluez pas d'étiquette pour chaque entrée. Pour ces formulaires en ligne, vous pouvez masquer les étiquettes à l'aide de la classe .sr-only.
Voici un style exemple 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 l'enlever? Fonctionne bien sans.
C'est important, ne l'enlevez pas.
Vous devriez toujours considérer les lecteurs d'écran à des fins d'accessibilité. De toute façon, l'utilisation de la classe masquera l'élément. Par conséquent, vous ne devriez pas voir de différence visuelle.
Si vous souhaitez en savoir plus sur l'accessibilité:
Comme JoshC l’a dit, la classe est utilisée pour masquer les informations utilisées par les lecteurs d’écran. Mais non seulement pour masquer les étiquettes, vous pouvez également masquer aux utilisateurs malentendants un lien interne "passer au contenu principal", ce qui est souhaitable pour les utilisateurs aveugles si la navigation est complexe ou si l’ajout de l’en-tête de la page est précédant le contenu. Ils auraient besoin d'appuyer trop souvent sur la flèche vers le bas pour y accéder par lecteur d'écran.
Si vous souhaitez que votre site interagisse encore plus avec les lecteurs d'écran, utilisez les attributs ARIA standardisés du W3C et je vous recommande vivement de visiter le cours en ligne de Google , qui ne vous prendra que 1 à 2 heures ou au moins regarder un vidéo de Google de 40min .
Selon l'Organisation mondiale de la santé, 285 millions de personnes ont une déficience visuelle. Il est donc important de rendre un site Web accessible.
J'ai trouvé cela dans le exemple de barre de navigation 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 laquelle est sélectionnée (la partie sr-only est masquée):
- Default
- Top statique
- Sommet du haut
Vous entendez lequel est sélectionné si vous utilisez un lecteur d'écran:
- Default
- Top statique
- Tête fixe (actuelle)
Grâce à cette technique, les aveugles sont supposés naviguer plus facilement sur votre site Web.
.sr-only est un nom de classe spécifiquement utilisé pour les lecteurs d'écran. Vous pouvez utiliser n'importe quel nom de classe, mais .sr-only est généralement utilisé. Si vous ne vous souciez pas de développer en gardant à l'esprit la conformité, vous pouvez la supprimer. Cela n'aura aucune incidence sur l'interface utilisateur s'il est supprimé, car le CSS de cette classe n'est pas visible pour les navigateurs de bureau et de périphérique mobile.
Il semble y avoir quelques informations manquantes à propos de l'utilisation de .sr-only pour expliquer son objectif et son utilité pour les lecteurs d'écran. Avant tout, il est très important de toujours garder à l'esprit les utilisateurs avec facultés affaiblies. La dépréciation est le but de la conformité 508: https://www.section508.gov/ , et il est bon que bootstrap prenne cela en considération. Cependant, l'utilisation de .sr-only n'est pas tout ce qui doit être pris en compte pour la conformité 508. Vous avez l’utilisation de la couleur, de la taille des polices, de l’accessibilité via la navigation, des descripteurs, de l’utilisation de aria et bien plus encore.
Mais comme pour .sr-only - que fait réellement le CSS? Il existe plusieurs variantes légèrement différentes du CSS utilisé pour .sr-only. L'un des rares que j'utilise est ci-dessous:
.sr-only {
position: absolute;
margin: -1px 0 0 -1px;
padding: 0;
display: block;
width: 1px;
height: 1px;
font-size: 1px;
line-height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
outline: 0;
}
Le code CSS ci-dessus masque le contenu des navigateurs de bureau et mobiles entourés de cette classe, mais est visualisé par un lecteur d'écran tel que JAWS: http://www.freedomscientific.com/Products/Blindness/JAWS . Exemple de balisage est la suivante:
<a href="#" target="_blank">
Click to Open Site
<span class="sr-only">This is an external link</span>
</a>
De plus, si un élément DOM a une largeur et une hauteur de 0, l'élément n'est pas vu par le DOM. C'est pourquoi le CSS ci-dessus utilise width: 1px; height: 1px;. En utilisant display: none et en réglant votre CSS sur height: 0 et width: 0, l'élément n'est pas vu par le DOM et pose donc problème. Le CSS ci-dessus utilisant width: 1px; height: 1px; n'est pas tout ce que vous faites pour rendre le contenu invisible aux navigateurs de bureau et mobiles (sans overflow: hidden, votre contenu serait toujours affiché à l'écran) et visible pour les lecteurs d'écran. Pour masquer le contenu des navigateurs de bureau et mobiles, vous devez ajouter un décalage par rapport à width: 1px et height: 1px mentionnés précédemment à l'aide de:
position: absolute;
margin: -1px 0 0 -1px;
overflow: hidden;
Enfin, pour avoir une très bonne idée de ce qu’un lecteur d’écran voit et transmet à son utilisateur malvoyant, désactivez le style de page pour votre navigateur. Pour Firefox, vous pouvez le faire en allant à:
View > Page Style > No Style
J'espère que les informations que j'ai fournies ici seront utiles à quelqu'un en plus des autres réponses.
Garantit que l'objet est affiché (ou devrait être) uniquement pour les lecteurs et périphériques similaires. Cela donne plus de sens dans le contexte d'un autre élément avec l'attribut aria-hidden = "true" .
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
Glyphicon sera affiché sur tous les autres appareils, Word Erreur: sur les lecteurs de texte.
La classe .sr-only masque un élément à tous les périphériques sauf screen readers:
Passer au contenu principal Combinez .sr-only avec .sr-only-focusable pour afficher à nouveau l'élément lorsqu'il est activé