Wat is de klas sr-onlygebruikt voor? Is het belangrijk of kan ik het verwijderen? Werkt prima zonder.
Hier is 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>
Antwoord 1, Autoriteit 100%
Volgens Documentatie van Bootstrap , wordt de klasse gebruikt om informatie te verbergen Alleen voor schermlezers van de lay-out van de gerenderde pagina.
Screen-lezers hebben problemen met uw formulieren als u geen label voor elke ingang opnemen. Voor deze inline-formulieren kunt u de labels verbergen met behulp van de SR-SLECHTS-klasse.
Hier is een voorbeeld styling gebruikt:
.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.
Voor toegankelijkheidsdoeleinden moet u altijd rekening houden met schermlezers. Het gebruik van de klasse zal het element hoe dan ook verbergen, daarom zou je geen visueel verschil moeten zien.
Als je meer wilt lezen over toegankelijkheid:
Antwoord 2, autoriteit 4%
Zoals JoshC al zei, wordt de klasse .sr-onlygebruikt om de informatie die alleen voor schermlezers wordt gebruikt, visueel te verbergen. Maar niet alleen om labels te verbergen. Je zou kunnen overwegen om verschillende andere elementen te verbergen, zoals de link “Ga naar hoofdinhoud”, pictogrammen met alternatieve teksten enz.
BTW. je kunt ook .sr-only sr-only-focusablegebruiken als het element zichtbaar moet worden wanneer het gefocust is, b.v. “ga naar hoofdinhoud”
Als je je website nog toegankelijker wilt maken, raad ik aan om hier te beginnen:
- Toegankelijkheid @Google – Web Fundamentals
- Accessibility Developer Guide(mijn persoonlijke favoriet)
- WebAIM-principes+ WebAIM WCAG-checklist
- Toegankelijkheid @ReactJS(veel goede bronnen en algemene dingen)
Waarom?
Volgens de Wereldgezondheidsorganisatie hebben 285 miljoen mensen een visuele beperking. Een website toegankelijk maken is dus belangrijk.
BELANGRIJK: behandel gehandicapte gebruikers niet anders. Probeer in het algemeen te voorkomen dat u verschillende inhoud voor verschillende groepen gebruikers ontwikkelt. Probeer in plaats daarvan de bestaande inhoud toegankelijk te maken, zodat deze eenvoudig out-of-the-box werkt en voor iedereen niet specifiek gericht is op b.v. schermlezers. Met andere woorden: probeer niet het wiel opnieuw uit te vinden. Anders zal de toegankelijkheid vaak slechter zijn dan wanneer er helemaal niets zou worden ontwikkeld.
Wij ontwikkelaars mogen er niet vanuit gaan hoe die gebruikers onze website zullen gebruiken. Wees dus heel voorzichtig wanneer u dergelijke oplossingen moet ontwikkelen. Het is duidelijk dat een “link overslaan” een goed voorbeeld is van dergelijke inhoud als deze zichtbaar wordt gemaakt wanneer deze wordt gefocust. Maar er zijn ook veel slechte voorbeelden. Zoiets zou voor een schermlezer een “zoom”-knop op de kaart verbergen, ervan uitgaande dat deze niet relevant is voor blinde gebruikers. Maar verrassend genoeg wordt er bij blinde gebruikers inderdaad een zoomfunctie gebruikt! Ze downloaden graag afbeeldingen zoals veel andere gebruikers doen (zelfs in hoge resolutie), om ze naar iemand anders te sturen of om ze in een andere context te gebruiken. Bron – Lees meer @ADG: Slechte ARIA-praktijken
Antwoord 3, autoriteit 4%
Ik vond dit in het navbar-voorbeelden 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>
Zie je welke is geselecteerd (sr-onlypart is verborgen):
- standaard
- statische top
- Fixed Top
u hoort welke is geselecteerd als u schermlezer gebruikt:
- standaard
- statische top
- vaste top (stroom)
Als gevolg van deze techniek die blinde mensen gemakkelijker op uw website moeten navigeren.
Antwoord 4
.sr-onlyis een klassaam die specifiek voor schermlezers wordt gebruikt. U kunt elke klasnaam gebruiken, maar .sr-onlyis behoorlijk gebruikt. Als u zich niet geeft om de ontwikkeling van de naleving in gedachten, kan het worden verwijderd. Het heeft geen invloed op UI op welke manier dan ook, indien verwijderd omdat de CSS voor deze klasse niet zichtbaar is voor de bureaublad- en mobiele-apparaatbrowsers.
Er lijkt wat informatie te zijn die hier ontbreekt over het gebruik van .sr-onlyom het doel ervan uit te leggen en voor schermlezers te zijn. Eerst en vooral is het erg belangrijk om altijd aangrijpende gebruikers in gedachten te houden. Bijzondere waardevermindering is het doel van 508 naleving: https://www.section508.gov/ , en het is geweldig dat bootstrap neemt dit in overweging. Het gebruik van .sr-onlyis echter niet alles wat in aanmerking moet worden genomen voor de naleving van 508. U hebt het gebruik van kleur, grootte van lettertypen, bereikbaarheid via navigatie, descriptoren, gebruik van ARIA en zoveel meer.
Maar als voor .sr-only– Wat doen de CSS eigenlijk? Er zijn verschillende enigszins verschillende varianten van de CSS die worden gebruikt voor .sr-only. Een van de weinige ik gebruik is hieronder:
.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;
}
De bovenstaande CSS verbergt inhoud in desktop- en mobiele browsers die met deze klasse zijn verpakt, maar wordt gezien door een schermlezer zoals JAWS: http://www.freedomscientific.com/Products/Blindness/JAWS. Voorbeeldopmaak is als volgt:
<a href="#" target="_blank">
Click to Open Site
<span class="sr-only">This is an external link</span>
</a>
Bovendien, als een DOM-element een breedte en hoogte van 0 heeft, wordt het element niet gezien door de DOM. Daarom gebruikt de bovenstaande CSS width: 1px; height: 1px;. Door display: nonete gebruiken en je CSS in te stellen op height: 0en width: 0, wordt het element niet gezien door de DOM en wordt het dus problematisch. De bovenstaande CSS gebruikt width: 1px; height: 1px;is niet alles wat u doet om de inhoud onzichtbaar te maken voor desktop- en mobiele browsers (zonder overflow: hiddenzou uw inhoud nog steeds op het scherm worden weergegeven) en zichtbaar voor het scherm lezers. Het verbergen van de inhoud van desktop- en mobiele browsers wordt gedaan door een offset toe te voegen van width: 1pxen height: 1pxeerder genoemd door gebruik te maken van:
position: absolute;
margin: -1px 0 0 -1px;
overflow: hidden;
Ten slotte, om een heel goed idee te hebben van wat een schermlezer ziet en doorgeeft aan zijn gehandicapte gebruiker, moet u de paginastijl voor uw browser uitschakelen. Voor Firefox kunt u dit doen door naar:
View > Page Style > No Style
Ik hoop dat de informatie die ik hier heb verstrekt van verder nut is voor iemand naast de andere reacties.
Antwoord 5
Zorgt ervoor dat het object alleen wordt weergegeven (of zou moeten zijn) voor lezers en soortgelijke apparaten. Het geeft meer betekenis in context met een ander element met attribuut 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 wordt weergegeven op alle andere apparaten, woord Fout:op tekstlezers.
Antwoord 6
De klasse .sr-onlyverbergt een element voor alle apparaten behalve screen readers:
Ga naar hoofdinhoud
Combineer .sr-only met .sr-only-focusable om het element opnieuw te tonen wanneer het gefocust is
.sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important; /* 2 */
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important; /* 3 */
}