Co to jest sr-only w Bootstrap 3?

748

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>
kanarifugl
źródło

Odpowiedzi:

772

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:

anon
źródło
2
@katranci w artykule, do którego się odwołujesz, brakuje kilku punktów, na przykład problemów z zawartością rtl. Odpowiedź tutaj wygląda lepiej.
Christophe
1
@Christophe nadal polecam ten artykuł do zrozumienia tej koncepcji. Mimo że nie wyjaśnia problemów z treścią RTL, wymienia różne techniki, które również obejmująclipping
katranci
9
Szczerze mówiąc, język jest bardzo mylące: the class is used to hide information used for screen readers? Czy to ukrywa się przed czytnikami ekranu? A może po prostu nie wyświetla się w przeglądarce? Wyraźniej jest, jeśli dokumentacja mówi coś w rodzaju „klasa tylko sr wskazuje, że element jest tylko dla czytników ekranu i nie jest wyświetlany w przeglądarce”.
Stack0verflow
2
Nie wydaje mi się, żeby było to mylące, wyraźnie mówi, że klasa służy do ukrywania informacji, które mają być widoczne tylko dla czytników ekranu.
Lee
34

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

Hrvoje Golcic
źródło
5
Nieco więcej informacji WHO : „Szacuje się, że na całym świecie 285 milionów osób jest niedowidzących: 39 milionów jest niewidomych, a 246 słabo widzących. Około 90% osób niedowidzących na świecie żyje w warunkach niskich dochodów. 82% osób żyjących ze ślepotą to w wieku 50 lat i więcej. ”
Cato Minor
29

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.


źródło
3
Jak niewidomi czytają ten aktualny tekst? Czy jest dla nich dostępny specjalny rodzaj ekranu?
Santosh,
6
Używają czytnika ekranu, jak wspomniano w tej odpowiedzi. Jest to program, który odczytuje zawartość ekranu, stąd „ Słyszysz, który z nich jest wybrany, jeśli używasz czytnika ekranu :”.
IronSean,
Możesz użyć rozszerzenia ChromeVox, aby uzyskać doświadczenie w czytaniu ekranu. To takie proste
Hrvoje Golcic
12

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

Pegues
źródło
7

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.

Jaroslav Kubacek
źródło
1
Mam wrażenie, że aria-label = „Błąd” zrobiłby to samo, ale byłby prostszy?
Kevin
6

.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

Ch UmarJamil
źródło