Kādam nolūkam tiek izmantota klase sr-only
? Vai tā ir svarīga, vai es varu to noņemt? Darbojas labi bez tās.
Lūk, mans piemērs:
<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>
Saskaņā ar bootstrap's dokumentāciju klasi izmanto, lai no atveidotās lapas izkārtojuma paslēptu informāciju, kas paredzēta tikai ekrāna lasītājiem.
Ekrānlasītājiem būs problēmas ar jūsu veidlapām, ja jūs neiekļausiet etiķeti katram ievades elementam. Šīm iebūvētajām veidlapām jūs varat paslēpt etiķetes, izmantojot .sr-only klasi.
Šeit ir [piemērs][2] izmantotajam stilam:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
Vai tas ir svarīgi, vai es to varu noņemt? Darbojas labi bez tā.
Tas ir svarīgi, neizņemiet to.
Vienmēr jāņem vērā ekrānlasītāji pieejamības nolūkos. Izmantojot šo klasi, elements tik un tā tiks paslēpts, tāpēc nevajadzētu redzēt vizuālu atšķirību.
Ja jūs interesē lasīt par pieejamību:
Kā teica JoshC, šī klase tiek izmantota, lai paslēptu ekrāna lasītājiem izmantoto informāciju. Bet ne tikai, lai paslēptu uzlīmes, jūs varētu apsvērt iespēju paslēpt no redzoša lietotāja iekšējo saiti "pāriet uz galveno saturu", kas ir vēlama neredzīgiem lietotājiem, ja jums ir sarežģīta navigācija vai reklāmas pirms galvenā satura.
Ja vēlaties, lai jūsu vietne vēl vairāk mijiedarbotos ar ekrāna lasītājiem, izmantojiet W3C standartizētos ARIA atribūtus un noteikti iesaku apmeklēt Google tiešsaistes kursu, kas aizņems tikai līdz 1-2 stundām vai pie vismaz noskatīties [Google's 40 min video][2].
Saskaņā ar Pasaules Veselības organizācijas datiem 285 miljoniem cilvēku ir redzes traucējumi. Tāpēc ir svarīgi nodrošināt tīmekļa vietnes pieejamību.
UPDATE 2019:
Mums kā izstrādātājiem būtu jāveido pieejams saturs, kas vienkārši darbojas visiem, nevis īpaši vērsts uz ekrānlasītājiem. Tas'ne vienmēr ir iespējams, bet jābūt uzmanīgiem, izmantojot ARIA un "screen reader only" pielāgojumus. Nedariet to, ja to pilnībā neizprotat. Nepareiza īstenošana var būt daudz sliktāka nekā tās neizmantošana vispār. Lūdzu, izlasiet accessibility-developer-guide on ARIA bad examples. Tur jūs atradīsiet arī pilnībā pieejamus komponentus/vidžetus, kas neprasa nekādu "screen reader only" iejaukšanos.
Es to atradu navigācijas joslas piemērā un vienkāršoju.
<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>
Jūs redzat, kurš no tiem ir izvēlēts (sr-only
daļa ir paslēpta):
Jūs dzirdat, kurš no tiem ir izvēlēts, ja izmantojat ekrāna lasītāju:
Izmantojot šo metodi, neredzīgajiem cilvēkiem ir vieglāk pārvietoties jūsu tīmekļa vietnē.