Sr-only – po prostu klasa!

Dzisiejszy post piszę z myślą o udoskonaleniu stron pod względem dostępności cyfrowej dla osób niewidomych, które korzystają z czytników ekranu. Postanowiłam podjąć temat klasy sr-only, ponieważ bardzo często, przeprowadzając audyty, widzimy błędne użycie tego elementu lub jego brak. W związku z tym, że biblioteka Bootstrapa stała się jedną z najpopularniejszych bibliotek służących do tworzenia wizualnej warstwy stron internetowych, uważam, że warto wspomnieć o tej klasie.

Co to jest klasa sr-only i dlaczego pomaga nam udoskonalić dostępność?

Klasa sr-only zdefiniowana została w bibliotece Link otwiera się w nowym oknie.Bootstrapa i służy do ukrycia wszelkich treści przed urządzeniami innymi niż czytniki ekranu. To właśnie dzięki niej możemy dodawać kontekst do linków, na przykład w sytuacji, gdy na naszej stronie znajduje się więcej niż jeden bardzo ogólny link.

Spójrzmy na przykład poniżej:

Powtórzony kilka razy na stronie link “więcej” nie mówi osobie niewidomej do czego się odnosi. Widzący mogą domyślić się, który z nich odnosi się do którego artykułu, na podstawie innych elementów znajdujących się w sąsiedztwie linku. Osoba korzystająca z czytnika ekranu nie widzi różnicy pomiędzy tymi linkami, ani nie wie, gdzie ją zaprowadzą. Co więcej, niewidomi mogą korzystać ze strony poruszając się tylko po zawartych na niej hiperłączach, dlatego warto, by były one unikalne i sensowne.

Jak można to udoskonalić?

W takiej sytuacji z pomocą przychodzi nam właśnie klasa sr-only. Największą zaletą tego rozwiązania jest to, że w łatwy sposób możemy ułatwić korzystanie z serwisu osobom niewidomym, a przy tym wizualnie zupełnie nie zmieni to naszej strony. W ten sposób dodajemy wszystko to, co chcemy, żeby zostało przeczytane tylko przez czytnik ekranu.

Teraz spróbujmy poprawić powyższy przykład i nadać kontekst linkom przy użyciu klasy sr-only. Przyjrzyjmy się kodowi:

<a
  href="/aktualnosci/ciekawy-artykul-o-turystyce/"
  title="Wakacje - na własną rękę czy z biurem podróży?"
>
  więcej
  <svg class="icon icon-button-arrow">
    <use
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xlink:href="#icon-button-arrow"
    ></use>
  </svg>
</a>

W powyższej sytuacji jedyne co użytkownik czytnika ekranu usłyszy, to „Link, więcej”. Widać, że deweloperzy szukali sposobu na odczytanie również tytułu artykułu dodając atrybut title. Jest on jednak niepoprawny semantycznie, a ponadto bardzo często nieczytany przez narzędzia asystujące. Jest to zależne od rodzaju używanej przeglądarki (więcej w tym temacie – Link otwiera się w nowym oknie.https://www.powermapper.com/tests/screen-readers/labelling/a-title/).

Czas to naprawić. 🙂 Dodajmy kontekst dla powyższego linku – „więcej”:

<a href="/aktualnosci/ciekawy-artykul-o-turystyce/">
  więcej
  <span class="sr-only">
    o artykule Wakacje - na własną rękę czy z biurem podróży?
  </span>
  <svg class="icon icon-button-arrow" aria-hidden="true">
    <use
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xlink:href="#icon-button-arrow"
    ></use>
  </svg>
</a>

Tak to powinno wyglądać. Wszystkie dodatkowe atrybuty, takie jak aria-hidden czy aria-label w prezentowanych przeze mnie kodach są kolejnymi udoskonaleniami, na które warto zwrócić uwagę w kontekście dostępności. Będą omawiane w przyszłości, w kolejnych postach.

Jako, że jesteśmy firmą, która proponuje swoim klientom wszystkie możliwe rozwiązania to i Wam pokaże drugą możliwość, która jest pomocna przy dodawaniu linkom kontekstu – z pomocą przychodzi nam wspomniana już aria-label.

<a
  href="//aktualnosci/ciekawy-artykul-o-turystyce/"
  aria-label="Wakacje - na własną rękę czy z biurem podróży?"
>
  więcej
  <svg class="icon icon-button-arrow" aria-hidden="true">
    <use
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xlink:href="#icon-button-arrow"
    ></use>
  </svg>
</a>

Dużą zaletą Bootstrapa jest predefiniowanie przedmiotowej klasy. Oznacza to, że nie musimy dodawać już żadnych stylów, by ukryć dodatkową treść.

Co w sytuacji, kiedy nie używamy akurat Bootstrapa, a chcielibyśmy, aby nasza strona również była dostępna? Możemy dodać dowolną klasę do dodatkowej treści, a do klasy dodać odpowiednie style CSS:

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

Znaliście już wcześniej te rozwiązania? Korzystacie z nich? Osobiście, zagłębiając się w dostępność, to właśnie ono zrobiło na mnie bardzo duże wrażenie! Do następnego :).