Qu'est-ce que sr-only dans Bootstrap 3?

À quoi sert la classe sr-only? Est-ce important ou puis-je le supprimer? 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 , la classe est utilisée pour masquer les informations destinées uniquement aux lecteurs d'écran de la disposition 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 uniquement.

Voici un exemple 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? Fonctionne bien sans.

C'est important, ne le supprimez pas.

Vous devriez toujours considérer les lecteurs d'écran à des fins d'accessibilité. L'utilisation de la classe masquera de toute façon l'élément, donc vous ne devriez pas voir de différence visuelle.

Si vous êtes intéressé à lire sur l'accessibilité:

• Initiative d'accessibilité Web (WAI)

• Documentation d'accessibilité MDN

Comme l'a dit JoshC, la classe est utilisée pour masquer les informations utilisées pour les lecteurs d'écran. Mais non seulement pour masquer les étiquettes, vous pouvez envisager de cacher aux utilisateurs voyants un lien interne "passer au contenu principal" qui est souhaitable pour les utilisateurs aveugles si vous avez une navigation complexe ou des annonces avant le contenu principal.

Si vous souhaitez que votre site interagisse encore plus avec les lecteurs d'écran, utilisez les attributs ARIA normalisés W3C et je recommande vivement de visiter le cours en ligne de Google , qui ne prendra que 1 à 2 heures ou au moins regarder une vidéo de 40 minutes de Google .

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.

MISE À JOUR 2019:

En tant que développeurs, nous devons rendre le contenu accessible qui fonctionne simplement pour tous les lecteurs d'écran prêts à l'emploi et non spécifiquement pour les lecteurs d'écran. Ce n'est pas toujours possible, mais soyez prudent en utilisant les réglages ARIA et «lecteur d'écran uniquement» . Ne le faites pas si vous ne le comprenez pas complètement. Une mise en œuvre incorrecte pourrait être bien pire que de ne pas l'utiliser du tout. Veuillez lire le guide d'accessibilité-développeur sur les mauvais exemples ARIA . Vous y trouverez également des composants / widgets entièrement accessibles qui ne nécessitent aucune intervention "lecteur d'écran uniquement".

J'ai trouvé cela dans l' exemple navbar 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 sr-onlypartie est masquée):

• Défaut
• Dessus statique
• Dessus fixe

Vous entendez lequel est sélectionné si vous utilisez un lecteur d'écran:

• Défaut
• Dessus statique
• Dessus fixe (actuel)

À la suite de cette technique, les aveugles sont censés naviguer plus facilement sur votre site Web.

.sr-onlyest un nom de classe spécifiquement utilisé pour les lecteurs d'écran. Vous pouvez utiliser n'importe quel nom de classe, mais il .sr-onlyest assez couramment utilisé. Si vous ne vous souciez pas de développer dans le respect de la conformité, vous pouvez le supprimer. Il n'affectera en aucun cas l'interface utilisateur s'il est supprimé car le CSS de cette classe n'est pas visible pour les navigateurs de bureau et d'appareils mobiles.

Il semble y avoir quelques informations manquantes ici sur l'utilisation de .sr-onlypour expliquer son but et être pour les lecteurs d'écran. Tout d'abord, il est très important de toujours garder à l'esprit les utilisateurs handicapés. La dépréciation est le but de la conformité 508: https://www.section508.gov/ , et il est formidable que le bootstrap en tienne compte. Cependant, l'utilisation de .sr-onlyn'est pas tout ce qui doit être pris en considération 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 d'Aria et bien plus encore.

Mais quant à .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 CSS ci-dessus masque le contenu des navigateurs de bureau et mobiles inclus dans cette classe, mais est vu par un lecteur d'écran comme JAWS: http://www.freedomscientific.com/Products/Blindness/JAWS . Voici un exemple de balisage:

<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: noneet en définissant votre CSS sur height: 0et width: 0, l'élément n'est pas vu par le DOM et est donc problématique. L'utilisation de CSS ci-dessus width: 1px; height: 1px;n'est pas tout ce que vous faites pour rendre le contenu invisible pour les navigateurs de bureau et mobiles (sans overflow: hidden, votre contenu serait toujours affiché à l'écran) et visible pour les lecteurs d'écran. Masquer le contenu des navigateurs de bureau et mobiles se fait en ajoutant un décalage à partir de width: 1pxet height: 1pxmentionné précédemment en utilisant:

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 altéré, désactivez le style de page de votre navigateur. Pour Firefox, vous pouvez le faire en allant sur:

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 les appareils similaires. Cela donne plus de sens dans le contexte d'un autre élément avec 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>

Le glyphicon sera affiché sur tous les autres appareils, mot Erreur: sur les lecteurs de texte.

La .sr-onlyclasse cache un élément à tous les appareils saufscreen readers:

Passer au contenu principal Combinez .sr-only avec .sr-only-focusable pour afficher à nouveau l'élément lorsqu'il est focalisé