.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.