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.

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

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