Kam naudojama sr-only
klasė? Ar ji svarbi, ar galiu ją pašalinti? Be jos veikia gerai.
Štai mano pavyzdys:
<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>
Pagal bootstrap's dokumentaciją, ši klasė naudojama tik ekrano skaitytuvams skirtai informacijai paslėpti nuo atvaizduojamo puslapio maketo.
Ekrano skaitytuvai turės problemų su jūsų formomis, jei prie kiekvienos įvesties nepridėsite etiketės. Tokiose įvestinėse formose etiketes galite paslėpti naudodami .sr-only klasę.
Čia pateikiamas [pavyzdys][2] naudojamas stilius:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
Ar tai svarbu, ar galiu jį pašalinti? Veikia puikiai be jos.
Jis's svarbus, nepašalinkite jo.
Visada turėtumėte atsižvelgti į ekrano skaitytuvus prieinamumo tikslais. Naudojant klasę elementas vis tiek bus paslėptas, todėl vizualinio skirtumo neturėtumėte pastebėti.
Jei norite paskaityti apie prieinamumą:
Kaip sakė JoshC, ši klasė naudojama ekrano skaitytuvams naudojamai informacijai paslėpti. Tačiau ne tik paslėpti etiketes, bet ir vidinę nuorodą "pereiti prie pagrindinio turinio", kuri yra pageidautina akliesiems vartotojams, jei prieš pagrindinį turinį yra sudėtinga navigacija arba reklamos.
Jei norite, kad jūsų svetainė dar labiau sąveikautų su ekrano skaitytuvais, naudokite W3C standartizuotus ARIA atributus ir tikrai rekomenduoju apsilankyti Google internetinį kursą, kuris užtruks tik iki 1-2 val. bent jau pažiūrėkite [Google's 40 min. trukmės vaizdo įrašą][2].
Pasaulio sveikatos organizacijos duomenimis, 285 mln. žmonių turi regėjimo sutrikimų. Taigi svarbu užtikrinti svetainės prieinamumą.
NAUJIENOS 2019 M:
Kaip kūrėjai turėtume kurti prieinamą turinį, kuris paprasčiausiai veiktų visiems iš karto, o ne specialiai orientuotis į ekrano skaitytuvus. Tai'ne visada įmanoma, tačiau būkite atsargūs naudodami ARIA ir "tik ekrano skaitytuvams" pritaikymus. Nedarykite to, jei iki galo to nesuprantate. Neteisingas įgyvendinimas gali būti daug blogesnis nei apskritai jo nenaudojimas. Perskaitykite accessibility-developer-guide apie ARIA blogus pavyzdžius. Ten taip pat rasite visiškai prieinamų komponentų / valdiklių, kuriems nereikia jokių "tik ekrano skaitytuvo" intervencijų.
Radau tai navbar pavyzdys ir supaprastinau.
<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>
Matote, kuris iš jų pasirinktas (sr-only
dalis yra paslėpta):
Girdite, kuris iš jų pasirinktas, jei naudojate ekrano skaitytuvą:
Dėl šio metodo aklieji turėtų lengviau naršyti jūsų svetainėje.