Dostępność
Dostępność (ang. accessibility, w skrócie a11y
) to bardzo ważny aspekt tworzenia aplikacji webowych. Chodzi o to, aby aplikacje były dostępne i użyteczne dla wszystkich użytkowników, w tym osób z niepełnosprawnościami.
Lekcja ta nie jest skupiona na tym, aby nauczyć Cię jak tworzyć dostępne komponenty. Jej celem jest głównie zwrócenie uwagi na to, że zapewnienie a11y
jest bardzo ważnym elementem w procesie budowania Design Systemu.
Ale skoro już tutaj jesteś - przypomnijmy sobie kilka podstawowych zasad 😉
Używanie semantycznych znaczników HTML
Semantyczne znaczniki HTML, takie jak <button>
, <nav>
, <header>
, <footer>
, <section>
, są zrozumiałe dla technologii wspomagających, takich jak czytniki ekranowe.
<button onClick={handleClick}>Kliknij mnie</button>
Zapewnienie alternatyw tekstowych
Każdy obrazek powinien mieć opis alternatywny (alt
), który opisuje, co przedstawia obrazek. To pomaga użytkownikom korzystającym z czytników ekranowych zrozumieć zawartość strony.
<img src="logo.png" alt="Logo firmy" />
Klawiatura
Upewnij się, że wszystkie interaktywne elementy, takie jak przyciski, linki i pola formularzy, są dostępne za pomocą klawiatury. Używanie atrybutu tabindex
pomaga kontrolować kolejność nawigowania.
<button onClick={handleClick} tabindex="0">
Kliknij mnie
</button>
Kontrast kolorów
Upewnij się, że tekst i inne elementy interfejsu mają wystarczający kontrast kolorów względem tła. To pomaga użytkownikom z wadami wzroku czytać zawartość strony.
Role i atrybuty aria
Wykorzystuj role i atrybuty aria
do poprawy dostępności komponentów. Atrybuty ARIA (Accessible Rich Internet Applications) dostarczają dodatkowych informacji technologii wspomagających.
<button onClick={handleClick} aria-label="Zamknij okno">
X
</button>
Formularze
Formularze powinny być odpowiednio oznaczone, aby były dostępne dla wszystkich użytkowników. Każde pole formularza powinno mieć powiązaną etykietę (<label>
), a komunikaty błędów powinny być jasne i zrozumiałe.
<form onSubmit={handleSubmit}>
<label htmlFor="email">Email</label>
<input type="email" id="email" name="email" required />
<button type="submit">Wyślij</button>
</form>
Zarządzanie focusem
Upewnij się, że zarządzasz focusem w sposób przewidywalny i logiczny. Na przykład, po zamknięciu okna modalnego, przywróć focus do elementu, który otworzył modal.
Testowanie dostępności
Regularnie testuj swoje komponenty pod kątem dostępności, używając narzędzi takich jak axe-core
, Lighthouse
czy Pa11y
. Integracja testów dostępności z procesem CI/CD pomoże zapewnić, że dostępność jest brana pod uwagę na każdym kroku.