Dostępność UX i interfejsy dla wszystkich

1) Dlaczego ma znaczenie

Prawnie i etycznie: interfejs nie powinien wykluczać osób z zaburzeniami widzenia, słuchu, silnika, poznawczych.
Efekt biznesowy: więcej użytkowników, wyższa konwersja i retencja, lepsza jakość SEO i kod.
Operacyjnie: Dostępność to proces, a nie „losowy fix”.

2) Podstawy i zasady (POUR)

Wyczuwalne: kontrast, teksty alternatywne, napisy.
Obsługiwane: wszystko jest dostępne z klawiatury, widoczne ognisko, animacje pauza/stop.
Zrozumienie: przewidywalna nawigacja, wyraźne błędy, proste sformułowania.
Solidna: poprawna semantyka HTML/ARIA, kompatybilność z technologiami wspomagającymi.

3) Semantyka, tytuły i ARIA

Znacznik semantyczny przed ARIA: '<przycisk>', '<nav>', '<form>', '<table>' - według celu.
Hierarchia nagłówków: jeden '<h1>' na stronę, następnie struktura logiczna '<h2>' - '<h3>'.
Punkty orientacyjne: '<header>', '<main>', '<aside>', '<footer>', '<nav>' - czytniki ekranu pomocy.
ARIA tylko w razie potrzeby: „rola”, „aria-label”, „aria-described”, „aria-expanded”, „aria-live”.
Stany/błędy poprzez 'aria-invalid', 'aria-errormessage'.

4) Zarządzanie klawiaturą i ostrość

Pełna kontrola klawiatury: 'Tab/Shift + Tab' - zamówienie, 'Enter/Space' - aktywuj, 'Esc' - wyjście.
Widoczne skupienie zawsze; nie wyłączaj obrysu.
Pułapki ostrości: w modalach - cykliczne skupienie, powrót ostrości do źródła po zamknięciu.
Ukryte elementy nie powinny wchodzić w kolejność kart ('display: none', 'aria-hidden =' true ').
Pomiń linki: „Przejdź do głównej zawartości” - na początku strony.

5) Kolor, kontrast i typografia

Kontrast tekstu: co najmniej 4. 5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu.
Nie polegać tylko na kolorze: duplikat z ikoną/wzór/podpis.
Rozmiar klikalnych celów: co najmniej 40-48 px, wystarczające pola wokół.
Czcionki: czytelne typefaces, line-to-line 1. 4–1. 6, długość linii 45-90 znaków.

6) Ruch, animacje i błysk padaczkowy

Szanuj system preferuje zredukowaną flagę ruchu - dodaj uproszczone animacje/wyłączyć parallax.
Unikaj migotania> 3 razy/sek.
Wszystkie auto-ruch musi mieć Pause/Stop/Hide.

7) Formularze, błędy i walidacja

Wyraźne powiązanie etykiet i pól: '<label for = "id'>'.
Placeholder nie jest etykietą.
Komunikaty o błędach obok pola i w podsumowaniu błędów na górze; wiążą się przez 'aria-described by'.
Wyjaśnić format wejścia, przykład, maska; Określ jednostki i walutę.
Nie zresetuj wypełnionych pól, gdy wystąpi błąd; skupić się na polu problemowym.

html
<label for="email">Эл. почта</label>
<input id="email" name="email" type="email" aria-describedby="email-hint email-err">
<div id="email-hint" class="hint">Мы не рассылаем спам</div>
<div id="email-err" class="error" role="alert">Укажите адрес в формате name@example.com</div>

8) Komponenty i interaktywne: wzory

Przyciski vs linki: akcja = '<przycisk>', skok = '<a>'.
Zakładki/akordeony: strzałki nawigacyjne, „aria-controls”, „aria-selected”.
Modale/dialogi: 'role =' dialog ',' aria-modal = 'true', 'focus trap', 'Esc' zamyka.
Tooltip/Popover: dostępność klawiatury, timeouts nie przeszkadzają w czytaniu.
Przeciągnij i upuść: alternatywy - przesuń przyciski w górę/w dół, strzałki klawiatury; Wydarzenia nie tylko z myszką.

9) Media: wideo/audio/grafika

Wideo: napisy, transkrypt, alternatywny opis audio (AD).
Audio: transkrypt tekstowy.
Wykresy/diagramy: podsumowanie tekstu („co ważne”), tabela danych, opisowe etykiety osi.
Obszary żywe: 'aria-live =' grzeczny '/' asertywny '- ostrożny, aby nie „krzyczeć” zbyt często.

10) Tabele i wykazy

11) i18n, lokalizacje i RTL

Atrybut 'lang' na korzeniu html; lokalny numer/data/formaty walutowe.
Wsparcie RTL (arabski/hebrajski): ikony lustrzane, kolejność nawigacji, kursory.
Unikaj słów szytych na ikonki (tekst musi być translatable).
Proste preparaty, unikać żargonu; słownik terminów.

12) Czas, sesje, captchas i alternatywy

Timeouts - z ostrzeżeniem i możliwością przedłużenia.
CAPTCHA: preferuje alternatywy (pytania, niewidzialne analizatory botów, potwierdzenie pocztą/telefonem); jeśli używasz - tekst alternatywny i nie tylko wizualny.
Uwierzytelnianie: wsparcie dla menedżerów haseł, „pokaż hasło”, WebAuthn.

13) Dostępność dla zaburzeń czuciowych i silnikowych

Gesty muszą mieć równoważniki kliknij/klawiatura.
Nie wymagają długich uchwytów/podwójnych kranów bez alternatywy.
„Anulowanie wskaźnika”: akcja musi być wykonana na komunikacie, a nie na „press”, aby dać szansę na anulowanie.

14) Państwa, ogłoszenia i wpisy

Użyj 'role =' status '/' alert '' dla wiadomości dynamicznych.
Nie przykrywaj ostrości lepkimi transparentami.
Powiadomienia toast - z przerwą w focus/hover i dostęp z klawiatury.

15) Plan badania (instrukcja i auto)

• Podaj wszystkie skrypty kluczy tylko za pomocą klawiatury.
• Sprawdź widoczność ostrości na każdym elemencie.
• Powiększyć do 200% - interfejs pozostaje funkcjonalny bez przewijania poziomego.
• Włącz tryb systemu „zmniejszyć ruch” - animacje nie przeszkadzają.
• Przekaż skrypt czytnikiem ekranu (NVDA/Voz Over), upewnij się, że role/tagi/zamówienie są poprawne.

• Łącza dostępności na poziomie komponentu.
• Sprawdź kontrast, teksty alternatywne, nagłówek, ważność ARIA.
• Migawki semantyki (drzewo ról) dla ekranów krytycznych.

16) Wskaźniki jakości dostępności

A11y Pokrycie: odsetek składników z wypełnionymi listami kontrolnymi.
Tylko klawiatura Pass Rate: procent skryptów przemierzanych przez klawiaturę.
Kontrast Violations/1k elementami.
Czas przepływu SR: Czas uruchamiania skryptu z czytnikiem ekranu.
Opinie użytkowników: reklamacje dotyczące dostępności, czasu odpowiedzi i korekt.

17) Lista kontrolna części

• Poprawna semantyka/rola bez zbędnej ARIA
• Podpisane etykiety, poprawne „aria-”
• Pełna kontrola klawiatury, widoczne ognisko
• Tekst/ikona/kontrast graniczny jest normalny
• Błędy i warunki są wyrażane przez czytnik ekranu
• Szacunek preferuje zredukowany ruch
• Powierzchnia możliwa do kliknięcia ≥ 40-48 px
• Lokalizacja i RTL nie łamią układu

18) Anty-wzory

„Na przyciski” bez roli/klawiatury.
Ukrywa „zarys: żaden” skupić się bez alternatywy.
Odtwórca zamiast etykiety.
Tylko błędy w kolorze.
Modale bez pułapki ostrości i bez "Esc'.
Tylko przeciągnij bez klawiatury.
Długie automatyczne przewijanie/paralaksy bez możliwości wyłączenia.

19) Role i proces

A11y-owner w poleceniu (Produkt/Projekt/Dev).
Definicja danych (DoD) obejmuje dostępność.
Przegląd projektu: sprawdzanie kontrastu, ostrości, etykiet.
Przegląd kodu: semantyka/ARIA, test klawiatury.
Regularne audyty i plan poprawy.

20) Realizacja w drodze iteracji

• Semantyka/tytuły, kontrast, ostrość i klawiatura, podstawowe formy i błędy.

• Modale, zakładki/akordeony, tabele/wykresy ze streszczeniem tekstu, napisy wideo, animacja zredukowana.

• Autotesty w CI, RTL/i18n, mierniki, regularne audyty, szkolenia zespołowe.

21) Szablony i snajpery

html
<div role="dialog" aria-modal="true" aria-labelledby="dlg-title" aria-describedby="dlg-desc">
<h2 id="dlg-title">Подтвердите действие</h2>
<p id="dlg-desc">Эта операция необратима.</p>
<button>Отмена</button>
<button>Подтвердить</button>
</div>

html
<a class="skip-link" href="#main">Перейти к основному содержимому</a>
<main id="main">...</main>

css
@media (prefers-reduced-motion: reduce) {
{ animation-duration: 0.01ms!important; animation-iteration-count: 1!important; transition: none!important; }
}

22) Mini-FAQ

Czy potrzebuję osobnej „wersji niedowidzącej”?
Nie, nie jest. Jedna adaptacyjna, dostępna wersja dla każdego z ustawieniami.

Wystarczy sprawdzić tylko kontrast?
Nie, nie jest. Kontrast jest tylko części.Potrzebujesz klawiatury, ostrości, semantyki, błędów formy, mediów, itp.

ARIA wszystko rozwiąże?
ARIA nie skoryguje nieprawidłowej semantyki. Najpierw poprawne znaczniki, a następnie ARIA udoskonalenia.

Wynik

Dostępność to dyscyplina systemowa: semantyka → klawiatura/focus → kontrast/kolor → formy/błędy → media/schedules → i18n/RTL → plan testów i mierniki. Uczyń dostępność częścią kultury DoD i zespołu - a Twój produkt będzie naprawdę wszechstronny, niezawodny i wygodny dla każdego.