ukrywanie elementów na stronie

Sposoby na ukrywanie elementów w drzewie dostępności i/lub DOM.

Bez przydługich wstępów – dzisiaj podzielę się z Tobą krótkim przewodnikiem po ukrywaniu elementów aplikacji. Ukrywaniu wizualnym, w drzewie DOM lub też ukrywaniu przed technologiami asystującymi – w drzewie dostępności.

Ukrywanie elementów w drzewie dostępności

Czasami chcemy ukryć element przed accessibility APIs, a w konsekwencji – uczynić go niedostępnym, np. dla czytników ekranu. Jednocześnie nie chcemy go całkowicie usuwać z aplikacji – ma być obecny w struktorze DOM i wizualnie widoczny.

W takich przypadkach najlepszym rozwiązaniem jest atrybut aria-hidden.

Zapytasz pewnie o konkretne przypadki użycia. I bardzo słusznie.


1. Elementy dekoracyjne.

Jakakolwiek grafika, która nie niesie ze sobą żadnej informacyjnej wartości dla użytkownika. Na przykład poniższa ikona strzałki.

decorative icon example
<a href="/ticket">
    Buy a ticket
    <svg aria-hidden="true" focusable="false" … > … </svg>
</a>

Atrybut aria-hidden="true" ukrywa ją dla technologii asystujących, dzięki czemu użytkownik czytnika nie zostanie poinformowany o jej istnieniu.

Z kolei dzięki focusable="false" element nie jest dostępny dla użytkowników klawiatury przeglądarek IE oraz starszych wersji Edge. Tym samym ułatawiając im dostęp do ważniejszych treści niż jakaś ikonka.


2. Powtórzone treści.

Każda sytuacja, w której ta sama informacja jest przedstawiona w kilku miejscach.

Idealnym przykładem z życia wziętym jest komponent kafelka – odnośnika do artykułu. Znajdziemy w nim link do posta w kilku miejscach – w tytule, w „Read more”, a często też w obrazku. Są to 3 odnośniki do tego samego miejsca umieszczone naprawdę blisko siebie. Takie rozwiązanie wygląda dobrze na makiecie i jest wygodne dla użytkownika korzystającego z myszki. Jednocześnie może frustrować użytkowników klawiatury i czytników – nieodpowiednio zakodowane okropnie wydłuża proces zapozniania się z treścią strony i wykoniana akcji.

Źródło: Sara Souiedan

Rozwiązanie jest proste – zostaw narzędziom asystującym tylko jeden z odnośników, a resztę ukryj.

<article class="post ...">
  <a href="/article-title" aria-hidden="true" tabindex="-1">
    <!-- img thumbnail... -->
  </a>
  <div>
    <a href="/article-title">
      <h2>The Habits of Highly Successful Creatives</h2>
    </a>
    ...
    <a href="/article-title" aria-hidden="true" tabindex="-1">
      <svg aria-hidden="true" focusable="false" ...>...</svg>
    </a>
  </div>
</article>

I znów – atrybut aria-hidden="true" ukrywa odnośnik dla czytnika, natomiast tabindex="-1" zapobiega znalezieniu go za pomocą przycisku TAB na klawiaturze.

Ukrywanie elementów w DOM

Istnieją sytuacje, w których chcemy ułatwić użytkownikom czytników korzystanie z aplikacji, udostępniając im dodatkowe informacje na temat różnych elementów. Informacje, które są jednocześnie zbędne dla osób, które widzą interfejs.

Z pomocą przychodzi stary, dobry CSS:

  • clip-path: inset(100%);
  • opacity: 0;

    Jednak najbardziej popularną praktyką jest tworzenie specjalnej klasy o nazwach typu .sr-only lub .visually-hidden, która ukrywa elementy w DOM pozostawiając je dostępne dla czytników.
.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(100%0;
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: no wrap;
  width: 1px;
}

Taka klasa może być wykorzystana np. w przycisku „Add to cart”, którego nazwa niewiele mówi użytkownikowi czytnika ekranu. Dodając informację o nazwie produktu zamkniętą w klasie .sr-only, poprawiamy dostępność elementu bez szkody dla interfejsu.

<button>
  Add to cart <span class="sr-only">PRODUCT_NAME</span>
</button> 

Innym przykładem użycia klasy .sr-only są tzw. icon buttons, czyli przyciski bez tekstowej etykiety, składające się tylko z ikony.

<a href="https://www.instagram.com/…">
   <svg aria-hidden="true" focusable="false" … > … </svg>
   <span class="sr-only">Find us on Instagram</span>
</a>

Dobrze to wygląda, jednak należy pamiętać, że w dostępności często istnieje wiele dróg do osiągnięcia podobnego efektu. Powyższy przycisk można też inaczej zakodować.

<a href="https://www.instagram.com/…" aria-label="Find us on Instagram">
    <svg aria-hidden="true" focusable="false" … > … </svg>
</a>

Usuwanie elementów w drzewie dostępności i DOM

Teraz porozmawiajmy o sytuacji, w której chcemy usunąć element zarówno z drzewka dostępności, jak i DOM.

Możemy to osiągnąć za pomocą styli CSS:

  • visibility: hidden;
  • display: none;

lub atrybutu HTML:

  • hidden (równoznaczny z display: none;).

Ok, pytanie – w jakim przypadku mielibyśmy ukrywać element zarówno wizualnie, jak i w czytnikach?

Hmmm… a no np. wtedy, kiedy chcemy dodać opis przycisku (accessible name) za pomocą aria-labelledby. Jak wspomniałam w ostatnim artykule – dzięki temu zostanie on przetłumaczony na różne języki. Jest to cecha, której nie posiada atrybut aria-label.


Zobaczmy ten przykład na żywo, tworząc popularną ikonę menu, czyli tzw. hamburger.

<button id=„menu-trigger” aria-labelledby=„button-label”>
  <span id=„button-label” hidden>Find us on Instagram</span>
  <svg aria-hidden=„true” focusable=„false” …>…</svg>
</button>

Tekst w elemencie span to nasz opis przycisku. Oczywiste jest, że nie chcemy go wizualnie pokazywać. A co z technologiami asystującymi? Ten element jest nam potrzebny tylko i wyłącznie jako odnośnik do atrybutu aria-labelledby. Nie chcemy, aby czytnik go bezpośrednio przeczytał. Ukrywamy span, a mimo to atrybut aria-labelledby bez problemu odczytuje jego tekst.


Koniec!
P.S. Ja rozumiem, że tak krótkie, bezpłciowe prologi i epilogi mogą wydawać się podejrzliwe dla stałych czytelników tego bloga. Jednak liczę na odrobinę zrozumienia. Cieszmy się, że cokolwiek tutaj się dzieje

Artykuły, które mogą Ci się spodobać...

Wpisz hasło, którego szukasz i naciśnij ENTER, aby je wyszukać. Naciśnij ESC, aby anulować.

Dawaj na górę