Waar wordt de klasse sr-only
voor gebruikt? Is het belangrijk of kan ik het verwijderen? Werkt prima zonder.
Hier's mijn voorbeeld:
<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>
Volgens bootstrap's documentatie wordt de klasse gebruikt om informatie die alleen bedoeld is voor schermlezers te verbergen uit de lay-out van de gerenderde pagina.
Schermlezers zullen problemen hebben met je formulieren als je niet'voor elke invoer een label opneemt. Voor deze inline formulieren kunt u de labels verbergen met de .sr-only klasse.
Hier is een [voorbeeld][2] gebruikte styling:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
Is het belangrijk of kan ik het verwijderen? Werkt prima zonder.
Het is belangrijk, verwijder het niet.
Je moet altijd rekening houden met schermlezers voor toegankelijkheidsdoeleinden. Het gebruik van de klasse zal het element hoe dan ook verbergen, daarom zou je'geen visueel verschil moeten zien.
Als je'geïnteresseerd bent in het lezen over toegankelijkheid:
Zoals JoshC zei, de klasse wordt gebruikt om informatie te verbergen voor schermlezers. Maar niet alleen om labels te verbergen, je zou kunnen overwegen om een interne link "skip to main content" te verbergen voor ziende gebruikers, wat wenselijk is voor blinde gebruikers als je een complexe navigatie of advertenties voor de hoofdinhoud hebt.
Als u wilt dat uw site nog meer interactie heeft met schermlezers, gebruik dan W3C gestandaardiseerde ARIA attributen en ik raad zeker aan om de Google online cursus, die slechts tot 1-2u zal duren of op tenminste een [Google's 40min video][2] te bekijken.
Volgens de Wereldgezondheidsorganisatie hebben 285 miljoen mensen een visuele handicap. Een website toegankelijk maken is dus belangrijk.
UPDATE 2019:
Als ontwikkelaars moeten we toegankelijke content maken die gewoon out-of-the-box voor iedereen werkt en niet specifiek gericht is op screenreaders. Dat's niet altijd mogelijk maar voorzichtig zijn met ARIA en "screen reader only" aanpassingen. Doe het niet als je het niet helemaal begrijpt. Een verkeerde implementatie kan veel erger zijn dan het helemaal niet gebruiken. Lees accessibility-developer-guide on ARIA bad examples. Daar zul je ook volledig toegankelijke componenten/widgets vinden die geen "screen reader only" interventies vereisen.
Ik vond dit in het navbar voorbeeld, en vereenvoudigde het.
<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>
Je ziet welke geselecteerd is (sr-only
gedeelte is verborgen):
U hoort welke geselecteerd is als u schermlezer gebruikt:
Als gevolg van deze techniek worden blinden verondersteld gemakkelijker te navigeren op uw website.