sr-only

Klasa CSS którą pewnie masz wśród selektorów dostępnych w Twoim projekcie. Tylko nikt Ci nie powiedział po co ona jest.

sr... co ?

sr-only oznacza screen reader only.

Po co ona jest?

Służy do ukrywania elementów i treści w interfejsie użytkownika. Ukrywa je w sensie wizualnym – nie będzie ich widać na ekranie, lecz w strukturze DOM i – co najważniejsze – w drzewie dostępności (accessibility tree) nadal będą pełnić swoją rolę. Dzięki temu użytkownicy korzystający z czytników ekranu skorzystają na ich istnieniu, ponieważ zostaną one przez czytnik odczytane.

Przykład

Możesz spojrzeć na przełącznik dostępny na mojej stronie, który służy do zmiany motywu pomiędzy jasnym a ciemnym. Znajdziesz go w nawigacji.

<button>
    <svg aria-hidden="true">...</svg>
    <span class="sr-only">Przełącz na tryb ciemny</span>
</button>

Jest to przycisk, który ze względu na wizję artystyczną reprezentowany jest jedynie przez ikonę (ikona w tym przypadku jest dekoracyjna, więc pamiętaj o aria-hidden="true" ;) ). Aby czytnik wiedział, do czego ten przycisk służy, należy umieścić w nim element z klasą sr-only. Tekst zostanie przetworzony przez czytnik ekranu, ale nie będzie widoczny w przeglądarce.

visually-hidden

Obok sr-only, w zależności od frameworka lub konwencji, możesz spotkać się z klasą o nazwie .visually-hidden. Robi dokładnie to samo, tylko inaczej się nazywa.