Co to jest sr-only w Bootstrap 3?

Do czego służy klasa sr-only? Czy to ważne, czy mogę to usunąć? Działa dobrze bez.

Oto mój przykład:

<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>

Zgodnie z dokumentacją bootstrap klasa służy do ukrywania informacji przeznaczonych tylko dla czytników ekranu przed układem renderowanej strony.

Czytniki ekranu będą miały problem z twoimi formularzami, jeśli nie podasz etykiety dla każdego wejścia. W przypadku tych formularzy wbudowanych można ukryć etykiety za pomocą klasy tylko .sr.

Oto przykładowa stylizacja:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

Czy to ważne, czy mogę to usunąć? Działa dobrze bez.

To ważne, nie usuwaj go.

Zawsze należy brać pod uwagę czytniki ekranu ze względu na dostępność. Użycie klasy i tak ukryje element, dlatego nie powinieneś widzieć różnicy wizualnej.

Jeśli chcesz przeczytać o dostępności:

• Inicjatywa dostępności sieci (WAI)

• Dokumentacja dostępności MDN

Jak powiedział JoshC, klasa służy do ukrywania informacji używanych w czytnikach ekranu. Ale nie tylko w celu ukrycia etykiet, możesz rozważyć ukrycie przed widzącym użytkownikiem wewnętrznego linku „przejdź do głównej zawartości”, który jest pożądany dla niewidomych użytkowników, jeśli masz złożoną nawigację lub reklamy przed główną treścią.

Jeśli chcesz, aby Twoja witryna jeszcze bardziej współdziałała z czytnikami ekranu, użyj standardowych atrybutów ARIA W3C. Zdecydowanie polecam odwiedzić internetowy kurs Google , który zajmie tylko 1-2 godziny lub przynajmniej obejrzy 40 minut wideo Google .

Według Światowej Organizacji Zdrowia 285 milionów osób ma zaburzenia widzenia. Dlatego udostępnienie strony internetowej jest ważne.

AKTUALIZACJA 2019:

Jako programiści powinniśmy udostępnić dostępną treść, która po prostu działa dla wszystkich gotowych, a nie specjalnie ukierunkowanych czytników ekranu. Nie zawsze jest to możliwe, ale należy zachować ostrożność przy korzystaniu z ARIA i regulacji „tylko czytnik ekranu” . Nie rób tego, jeśli nie rozumiesz tego w pełni. Niepoprawna implementacja może być znacznie gorsza niż jej nieużywanie. Zapoznaj się z instrukcją dewelopera dostępności na złych przykładach ARIA . Znajdziesz tam również w pełni dostępne komponenty / widżety, które nie wymagają żadnych interwencji typu „tylko czytnik ekranu”.

Znalazłem to w przykładzie paska nawigacyjnego i uprościłem.

<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>

Widzisz, który jest wybrany ( sr-onlyczęść jest ukryta):

• Domyślna
• Góra statyczna
• Naprawiono górę

Słyszysz, który z nich jest wybrany, jeśli używasz czytnika ekranu:

• Domyślna
• Góra statyczna
• Naprawiono górny (bieżący)

W wyniku tej techniki osoby niewidome powinny łatwiej poruszać się po Twojej stronie.

.sr-onlyto nazwa klasy używana specjalnie dla czytników ekranu. Możesz użyć dowolnej nazwy klasy, ale .sr-onlyjest ona dość często używana. Jeśli nie zależy Ci na rozwoju z myślą o zgodności, możesz go usunąć. Nie wpłynie to w żaden sposób na interfejs użytkownika, jeśli zostanie usunięty, ponieważ CSS dla tej klasy nie jest widoczny w przeglądarkach na komputery i urządzenia mobilne.

Wydaje się, że brakuje tutaj niektórych informacji na temat użycia .sr-onlycelu wyjaśnienia jego przeznaczenia i korzystania z czytników ekranu. Przede wszystkim bardzo ważne jest, aby zawsze pamiętać o użytkownikach z ograniczoną odpowiedzialnością. Utrata wartości jest celem zgodności 508: https://www.section508.gov/ , i świetnie, że bootstrap bierze to pod uwagę. Jednak stosowanie .sr-onlynie jest wszystkim, co należy wziąć pod uwagę w przypadku zgodności 508. Masz do dyspozycji kolor, rozmiar czcionek, dostępność poprzez nawigację, deskryptory, użycie arii i wiele więcej.

Ale jeśli chodzi o .sr-only- co faktycznie robi CSS? Istnieje kilka nieco różnych wariantów CSS .sr-only. Jeden z niewielu, których używam, jest poniżej:

.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;
    }

Powyższy CSS ukrywa zawartość w przeglądarkach stacjonarnych i mobilnych opakowanych w tę klasę, ale jest widziany przez czytnik ekranu taki jak JAWS: http://www.freedomscientific.com/Products/Blindness/JAWS . Przykład znaczników jest następujący:

<a href="#" target="_blank">
    Click to Open Site
    <span class="sr-only">This is an external link</span>
</a>

Dodatkowo, jeśli element DOM ma szerokość i wysokość 0, element nie jest widziany przez DOM. Właśnie dlatego wykorzystuje powyższy CSS width: 1px; height: 1px;. Używając display: nonei ustawiając CSS na height: 0i width: 0, element nie jest widziany przez DOM i dlatego jest problematyczny. Powyższe użycie CSS width: 1px; height: 1px;nie jest wszystkim, co robisz, aby zawartość była niewidoczna dla przeglądarek na komputery i urządzenia mobilne (bez niej overflow: hiddenzawartość nadal byłaby wyświetlana na ekranie) i widoczna dla czytników ekranu. Ukrywanie treści z komputerów stacjonarnych i mobilnych przeglądarkach odbywa się poprzez dodanie przesunięcie od width: 1pxa height: 1pxwcześniej wspomniano, używając:

position: absolute;
margin: -1px 0 0 -1px; 
overflow: hidden;

Wreszcie, aby mieć bardzo dobry pomysł na to, co czytnik ekranu widzi i przekazuje upośledzonemu użytkownikowi, wyłącz stylizację strony w przeglądarce. W przypadku przeglądarki Firefox możesz to zrobić, przechodząc do:

View > Page Style > No Style

Mam nadzieję, że informacje, które tu podałem, będą przydatne dla kogoś oprócz innych odpowiedzi.

Zapewnia, że ​​obiekt jest wyświetlany (lub powinien być) tylko dla czytników i podobnych urządzeń. Daje to więcej sensu w kontekście z innym elementem z atrybutem 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>

Glifikon będzie wyświetlany na wszystkich innych urządzeniach, słowo Błąd: w czytnikach tekstu.

.sr-onlyKlasa ukrywa element do wszystkich urządzeń z wyjątkiemscreen readers:

Przejdź do głównej zawartości Połącz tylko .sr z .sr-only-focusable, aby wyświetlić element ponownie, gdy jest on skupiony