Ce este clasa `sr-doar folosit pentru? Este important sau pot elimina? Funcționează foarte bine și fără.
Aici's exemplul meu:
<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>
Potrivit bootstrap's documentatiei, clasa este folosit pentru a ascunde informații destinate numai pentru cititoare de ecran de la layout-ul paginii randate.
Ecran cititorii vor avea probleme cu formele tale, dacă tu nu't include o etichetă pentru fiecare intrare. Pentru aceste forme inline, puteți ascunde etichetele folosind .sr-singura clasă.
Aici este o [exemplu][2] styling folosite:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
Este important sau pot elimina? Funcționează foarte bine și fără.
L's important, don't scoateți-l.
Tu ar trebui să ia în considerare întotdeauna cititoare de ecran pentru accesibilitate scopuri. Utilizarea de clasa va ascunde elementul oricum, prin urmare, nu ar trebui't vedea o diferență vizuală.
Daca're interesat în a citi despre accesibilitate:
Ca JoshC spus, clasa este folosit pentru a ascunde informațiile utilizate pentru cititoarele de ecran. Dar nu numai pentru a ascunde etichetele, s-ar putea lua în considerare pentru a ascunde de la utilizator cu vedere un link intern "skip to main content" care este de dorit pentru utilizatorii nevăzători dacă aveți un complex de navigație sau de anunțuri înainte de conținutul principal.
Dacă doriți site-ul dvs. pentru a interacționa mai mult cu cititoare de ecran, utilizați W3C standardizate ARIA atribute și am recomanda cu siguranta pentru a vizita Google curs on-line, care va dura doar până la 1-2h sau la te un [Google's 40min video][2].
Potrivit Organizației Mondiale a Sănătății, 285 milioane de oameni au dizabilități de vedere. Deci, a face un site web accesibil este important.
UPDATE 2019:
Ca dezvoltatorii ar trebui să avem de a face accesibil conținutul care pur și simplu funcționează pentru toate out-of-the-box și nu vizează în mod specific cititoare de ecran. Ca's nu este întotdeauna posibil, dar fii atent folosind ARIA și "cititor de ecran doar" ajustări. Don't o facă, dacă nu't a o înțelege pe deplin. Punerea în aplicare incorectă ar putea fi mult mai rău decât să nu-l folosești deloc. Vă rugăm să citiți accesibilitate-producător-ghid pe ARIA exemple rele. Acolo veți găsi la fel de bine pe deplin accesibile componente/widget-uri care nu necesita nici o "cititor de ecran doar" intervenții.
Am găsit asta în navbar exemplu, și-a simplificat.
<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>
Vezi care este selectat (`sr-doar pentru o parte este ascuns):
Ai auzit care este selectat dacă utilizați un cititor de ecran:
Ca urmare a acestei tehnici orbii ar trebui pentru a naviga mai usor pe site-ul.
.sr-numai
este un nume de clasă folosit în special pentru cititoarele de ecran. Puteți folosi orice nume de clasă, dar .sr-numai
este destul de frecvent utilizat. Dacă tu nu't pasă în curs de dezvoltare, cu respectarea în minte, atunci acesta poate fi eliminat. Aceasta nu va afecta UI în nici un fel dacă eliminat, deoarece CSS pentru această clasă nu este vizibil pentru desktop și dispozitive mobile browsere.
Se pare că există unele informații lipsesc aici despre utilizarea .sr-doar pentru a explica scopul său și de a fi pentru cititoarele de ecran. În primul rând, este foarte important să păstrați întotdeauna utilizatorii cu deficiențe de vedere în minte. Afectarea este scopul 508 conformitate: https://www.section508.gov/, și este minunat că bootstrap ia în considerare acest lucru. Cu toate acestea, utilizarea
.sr-doar` nu este tot ceea ce trebuie să fie luate în considerare pentru 508 de conformitate. Aveți utilizarea de culoare, dimensiuni de fonturi, accesibilitate prin navigare, descriptori, utilizarea de aria și atât de mult mai mult.
Dar pentru ca .sr-doar - ce-nu-CSS de fapt, nu? Există mai multe ușor diferite variante de CSS folosit pentru
.sr-doar`. Una dintre puținele eu folosesc de mai jos este:
.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;
}
Cele de mai sus CSS ascunde conținutul în desktop și browsere mobile împachetate cu această clasă, dar este văzut de către un cititor de ecran ca FĂLCI: http://www.freedomscientific.com/Products/Blindness/JAWS. Exemplu de marcare este după cum urmează:
<a href="#" target="_blank">
Click to Open Site
<span class="sr-only">This is an external link</span>
</a>
În plus, dacă un element DOM are o lățime și o înălțime de 0, elementul nu este văzut de către DOM. Acesta este motivul de mai sus CSS foloseste width: 1px; height: 1px;
. Prin utilizarea display: none
și setarea CSS pentru înălțime: 0 " și " width: 0
, elementul nu este văzut de către DOM și este, prin urmare, problematică. Cele de mai sus CSS folosind width: 1px; height: 1px;
nu este tot ce ai făcut pentru a face conținutul invizibil pentru desktop și browsere mobile (fără overflow: ascuns, conținutul dvs. va arăta în continuare pe ecran), și vizibil pentru cititoarele de ecran. Ascunde conținutul de pe desktop și browsere mobile se face prin adăugarea unui offset de la
width: 1px " și " înălțime: 1px` anterior menționate, prin utilizarea:
position: absolute;
margin: -1px 0 0 -1px;
overflow: hidden;
În cele din urmă, să aibă o foarte bună idee de ceea ce un cititor de ecran se vede si relee sale deficiențe de utilizator, rândul său, pe pagina de styling pentru browser-ul dumneavoastră. Pentru Firefox, puteți face acest lucru prin a merge la:
View > Page Style > No Style
Sper că informațiile furnizate aici este de folos pentru cineva în plus față de alte răspunsuri.
Asigură că obiectul este afișat (sau ar trebui să fie) doar pentru cititori și dispozitive similare. A da mai mult sens în context cu alte element cu atribut aria-ascuns="adevărat".
<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 va fi afișat pe toate celelalte dispozitive, word Eroare: pe text cititori.
A .sr-numai pentru clasa a ascunde un element pentru toate dispozitivele, cu excepția cititoare de ecran:
Salt la conținutul principal Combina .sr-doar cu .sr-doar-cu focalizare continuă să arate element din nou atunci când este concentrat