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


Quelle est la classe sr-only utilisé pour? 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>

622
2017-11-03 21:51


origine


Réponses:


Selon documentation de bootstrap, la classe est utilisée pour cacher des informations destinées uniquement à lecteurs d'écran à partir 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-only.

Voici un Exemple 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 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é. L'utilisation de la classe va cacher l'élément de toute façon, donc vous ne devriez pas voir une différence visuelle.

Si vous êtes intéressé par la lecture sur l'accessibilité:


654
2017-11-27 12:47



Comme l'a dit JoshC, la classe est utilisée pour cacher les informations utilisées pour les lecteurs d'écran. Mais non seulement pour cacher les étiquettes, vous pouvez envisager de cacher à l'utilisateur voyant un lien interne "passer au contenu principal" qui est souhaitable pour les utilisateurs aveugles si vous avez une navigation complexe ou ajoute dans l'en-tête de la page avant le contenu. Ils auraient besoin d'appuyer sur la touche fléchée vers le bas trop souvent pour l'atteindre par un lecteur d'écran.

Si vous voulez que votre site interagisse encore plus avec les lecteurs d'écran, utilisez   Les attributs ARIA standardisés du W3C et je recommande vivement de visiter   la Cours en ligne Google, qui ne prendra que jusqu'à 1-2h ou à   moins regarder un La vidéo de 40 minutes de Google.

Selon l'Organisation mondiale de la santé, 285 millions de personnes ont une déficience visuelle. Donc, rendre un site Web accessible est important.


25
2018-01-03 14:07



J'ai trouvé ça dans le exemple navbaret 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 la partie est cachée):

  • Défaut
  • Haut statique
  • Haut fixe

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

  • Défaut
  • Haut statique
  • Haut fixe (courant)

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


21
2018-01-24 11:17



S'assure que l'objet est affiché (ou devrait l'être) uniquement aux lecteurs et périphériques similaires. Il donne plus de sens dans le contexte avec d'autres éléments 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>

Glyphicon sera affiché sur tous les autres appareils, word Erreur: sur les lecteurs de texte.


4
2018-01-04 16:11



.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 avec la conformité à l'esprit, alors il peut être supprimé. Cela n'affectera en aucune façon l'interface utilisateur si elle est supprimée car le CSS de cette classe n'est pas visible pour les navigateurs de bureau et de périphérique mobile.

Il semble qu'il manque des informations sur l'utilisation de .sr-only pour 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 avec facultés affaiblies. La dépréciation est l'objectif de la conformité 508: https://www.section508.gov/, et c'est génial que bootstrap prenne ceci en considération. Cependant, l'utilisation de .sr-only ce n'est pas tout ce qui doit être pris en compte pour la conformité 508. Vous avez l'utilisation de la couleur, la taille des polices, l'accessibilité par la navigation, des descripteurs, l'utilisation de l'air et bien plus encore.

Mais comme pour .sr-only - Que fait 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 cache le contenu dans les navigateurs de bureau et mobiles enveloppés avec cette classe, mais est vu par un lecteur d'écran comme 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 définissant votre CSS à height: 0 et width: 0, l'élément n'est pas vu par le DOM et est donc problématique. Le CSS ci-dessus en 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 apparaîtra toujours sur l'écran), et visible pour les lecteurs d'écran. Le masquage du contenu des navigateurs de bureau et mobiles s'effectue en ajoutant un décalage de width: 1px et height: 1px précédemment mentionné 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 relaie à son utilisateur altéré, désactivez le style de page pour votre navigateur. Pour Firefox, vous pouvez le faire en allant sur:

View > Page Style > No Style

J'espère que l'information que j'ai fournie ici sera utile à quelqu'un en plus des autres réponses.


4
2018-03-08 07:34



le .sr-only classe masque un élément à tous les périphériques sauf screen readers:

Passer au contenu principal Combiner .sr-only avec .sr-only-focusable pour montrer à nouveau l'élément quand il est focalisé


1