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.
Masz pytania lub uwagi?
Przejdź na Discord