Obecnie gotowe biblioteki UI dobrze radzą sobie z dostępnością dostarczanych komponentów, ale nie zwalnia nas to z obowiązku pilnowania wymagań, które musimy spełnić tworząc rozwiązania dla biznesu. Atrybutów ARIA jest znacznie więcej, niż poniżej opisane, ale moim celem jest wskazanie tych najczęściej używanych. Sama świadomość o wymaganiach A11y pozwoli na samodzielną głębszą analizę, jeśli trafisz na bardziej specyficzny przypadek użycia.
aria-current
Pomaga użytkownikom z technologiami wspomagającymi wskazując na aktualnie wybrany element w kontekście wyświetlanych stron lub widoków aplikacji. Często powiązany jest z nawigacją, paginacją lub krokami w kilku etapowym formularzu.
<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about" aria-current="page">About</a></li>
</ul>
</nav>
aria-controls
Wskazuje na komponent, którego stan jest kontrolowany przez bieżący element, np. akordeon, widget.
<button aria-controls="info-box" aria-expanded="false">Toggle view</button>
<div id="info-box">
...
</div>
aria-expanded
Wskazuje, czy rozwijany element jest rozwinięty lub zwinięty. Przykład z kodem zgodnie z aria-controls.
aria-live
Wskazuje na komponent, którego zawartość jest dynamicznie aktualizowana informując czytniki ekranu o zmianie w treści. Jego użycie pojawia się podczas komunikacji o błędach, notyfikacjach lub czatach.
<div aria-live="polite">Please, verify your credentials</div>
W podanym przykładzie polite poczeka na zakończenie trwających interakcji, natomiast assertive ogłosi komunikat natychmiastowo.
aria-hidden
Ukrywa element wraz z jego komponentami zagnieżdżonymi przed użytkownikiem (ukrycie w accessibility tree). Nie używa się atrybutu hidden na elementy, które podlegają focusowi.
<a href="#" target="_blank" rel="noopener">
<img src="/media-icon.svg" aria-hidden="true"/>
<span>Social Media</span>
</a>
aria-haspopup
Informuje, że element może otworzyć dodatkowy widok, jak menu lub modal. Jego wartość określa typ pojawiającego się komponentu.
<button aria-haspopup="dialog" aria-controls="dialog-box">Open</button>
aria-label
Zapewnia etykietę dla elementu, która nie jest widoczna na ekranie, ale jest czytana przez technologie wspomagające.
<button aria-label="Close">X</button>
aria-labelledby
Wiąże element z innym, stając się etykietą dla powiązanego elementu.
<h2 id="heading-post">Very specific heading of a blog post</h2>
<div>
<p>Lorem ipsum…</p>
<a href="#" aria-labelledby="heading-post">Go to read more</a>
</div>
aria-describedby
Dostarcza dodatkowe informacje o danym elemencie.
<button aria-describedby="delete-info">Delete</button>
<p id="delete-info">
Deleted item will be permanently removed from our database.
</p>
aria-invalid
Informuje o niepoprawnie nadanej wartości w elemencie. Komunikuje o błędach formularza podczas walidacji.
<input type="email" aria-invalid="true" />
aria-atomic
Określa czy cała zawartość elementu powinna być odczytana przez czytnik, nawet tylko po częściowej zmianie tekstu.
<button aria-live="polite" aria-atomic="true">
Cart. <span id="items">3</span> <span class="visually-hidden">Items</span>
</button>
aria-busy
Informuje, że element jest w trakcie aktualizacji i nie powinien być w tym czasie odczytywany.
<div aria-busy="true">Loading...</div>
role
Określa rolę elementu w aplikacji i pomaga technologiom wspomagającym zrozumieć, jakiego typu jest to element.
<button id="menubutton" aria-haspopup="true" aria-controls="menu">
<img src="/menu-icon.svg" alt="Pages menu" />
</button>
<ul id="menu" role="menu" aria-labelledby="menubutton">
<li><a href="/home">Home</a></li>
<li><a href="/about" aria-current="page">About</a></li>
</ul>
Aby ułatwić utrzymanie zasad dostępności w całej aplikacji, warto skorzystać z narzędzi, które automatycznie sprawdzą poprawność implementacji. Jednym z takich narzędzi jest eslint-plugin-jsx-a11y – plugin do ESLint, który pomaga przestrzegać zasad dostępności w aplikacjach React.
Powrót do artykułów