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

Question

Quelle est la classe sr-only à quoi sert-il ? Est-il important ou puis-je le supprimer ? Il 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>

Answer 1

Selon documentation de bootstrap la classe est utilisée pour dissimuler des informations destinées uniquement à l'utilisateur. les lecteurs d'écran de 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 stylisme 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 êtes intéressé par la lecture sur l'accessibilité :

• Initiative pour l'accessibilité du Web (WAI)

• Documentation sur l'accessibilité de MDN

Answer 2

Comme l'a dit JoshC, la classe .sr-only est utilisé pour masquer visuellement les informations utilisées uniquement pour les lecteurs d'écran. Mais pas seulement pour cacher les étiquettes. Vous pouvez envisager de masquer divers autres éléments tels que le lien "skip to main content", les icônes qui ont un texte alternatif, etc.

D'ailleurs, vous pouvez aussi utiliser .sr-only sr-only-focusable si vous souhaitez que l'élément devienne visible lorsqu'il est ciblé, par exemple "skip to main content".

Si vous voulez rendre votre site web encore plus accessible, je vous recommande de commencer ici :

• Accessibilité @Google - Principes fondamentaux du Web
• Guide du développeur pour l'accessibilité (mon préféré)
• Principes de WebAIM + Liste de contrôle WCAG de WebAIM
• Accessibilité @ReactJS (beaucoup de bonnes ressources et d'informations générales)

Pourquoi ?

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.

IMPORTANT : Évitez de traiter les utilisateurs handicapés différemment . D'une manière générale, il faut éviter de développer un contenu différent pour les différents groupes d'utilisateurs. Essayez plutôt de rendre accessible le contenu existant de manière à ce qu'il fonctionne tout simplement et pour tous, sans viser spécifiquement les lecteurs d'écran, par exemple. En d'autres termes, n'essayez pas de réinventer la roue. Sinon, l'accessibilité qui en résultera sera souvent pire que si rien n'avait été développé du tout. Nous, les développeurs, ne devons pas présumer de la manière dont les utilisateurs utiliseront notre site Web. Soyez donc très prudent lorsque vous devez développer de telles solutions. De toute évidence, un "lien de saut" est un bon exemple de ce type de contenu s'il est rendu visible lors de la mise au point. Mais il existe aussi de nombreux mauvais exemples. C'est le cas, par exemple, du bouton "zoom" d'un lecteur d'écran sur une carte, qui n'est pas pertinent pour les utilisateurs aveugles. Mais étonnamment, une fonction de zoom est effectivement utilisée par les utilisateurs aveugles ! Ils aiment télécharger des images comme beaucoup d'autres utilisateurs (même en haute résolution), pour les envoyer à quelqu'un d'autre ou pour les utiliser dans un autre contexte. Source - Lire la suite @ADG : Mauvaises pratiques ARIA

Answer 3

J'ai trouvé ceci dans le exemple de barre de navigation et l'a 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é ( sr-only est cachée) :

• Défaut
• Top statique
• Dessus fixe

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

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

Grâce à cette technique, les personnes aveugles sont censées pouvoir naviguer plus facilement sur votre site Web.

Answer 4

.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 assez couramment utilisé. Si vous ne vous souciez pas de développer en tenant compte de la conformité, vous pouvez le supprimer. Sa suppression n'aura aucune incidence sur l'interface utilisateur, car le CSS de cette classe n'est pas visible pour les navigateurs des ordinateurs de bureau et des appareils mobiles.

Il semble qu'il manque des informations sur l'utilisation de la technologie de l'information. .sr-only pour expliquer son but et son existence pour les lecteurs d'écran. Tout d'abord, il est très important de toujours garder à l'esprit les utilisateurs handicapés. La déficience est l'objectif de la conformité à la norme 508 : https://www.section508.gov/ et c'est formidable que bootstrap en tienne compte. Cependant, l'utilisation de .sr-only n'est pas tout ce qui doit être pris en compte pour la conformité à la norme 508. Il y a l'utilisation des couleurs, la taille des polices, l'accessibilité par la navigation, les descripteurs, l'utilisation d'aria et bien d'autres choses encore.

Mais en ce qui concerne .sr-only - Que fait réellement le CSS ? Il existe plusieurs variantes légèrement différentes de la CSS utilisée pour .sr-only . L'une 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 dans les navigateurs de bureau et mobiles enveloppés de cette classe, mais il est vu par un lecteur d'écran comme JAWS : http://www.freedomscientific.com/Products/Blindness/JAWS . L'exemple de balisage est le suivant :

<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 mettant votre CSS à height: 0 y width: 0 l'élément n'est pas vu par le DOM et est donc problématique. Le CSS ci-dessus utilisant width: 1px; height: 1px; n'est pas tout ce qu'il faut faire pour rendre le contenu invisible aux navigateurs de bureau et mobiles (sans overflow: hidden votre contenu reste affiché à l'écran), et visible pour les lecteurs d'écran. Pour masquer le contenu aux navigateurs de bureau et mobiles, il faut ajouter un décalage de width: 1px y height: 1px mentionné 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 que voit un lecteur d'écran et de ce qu'il transmet à son utilisateur handicapé, désactivez le style de page de votre navigateur. Pour Firefox, vous pouvez le faire en allant dans :

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.

Answer 5

Assure que l'objet est affiché (ou devrait l'être) uniquement pour les lecteurs et les dispositifs similaires. Il donne plus de sens dans le contexte d'un autre élément avec Attribut aria-hidden="true" (en anglais) .

<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, mot Erreur : sur les lecteurs de texte.