40 milionów osób na świecie ma zaburzenia widzenia. W Polsce około 1.5 miliona. Jeśli Twoja strona nie jest dostępna dla nich — tracisz ~5-10% potencjalnych klientów. Plus: Google preferuje dostępne strony w rankingach. To win-win.
Kontrast kolorów — czytaj test WebAIM
Test: Tekst czarny (#333333) na białym (#FFFFFF) tle. To OK? TAK — kontrast 12:1, doskonały.
Test 2: Tekst szary (#999999) na białym (#FFFFFF). OK? NIE — kontrast 3.5:1, za słaby. Osób częściowo ślepe będą mieć problem.
Jak sprawdzić? Wejdź na WebAIM Contrast Checker. Wpisz kolory. Zielone = OK, czerwone = nie.
Praktycznie: jeśli tekst nie chce Ci się czytać bo jest za cicho, to jest problem. Zwiększ contrast.
Nagłówki (H1, H2, H3) — hierarchia jest ważna
Osoby ślepe używają screen readera. Screen reader czyta nagłówkami. „Przejdź do następnego H1. Przejdź do następnego H2.” To jest ich nawigacja.
Zasady:
- Każda strona powinna mieć JEDEN H1 (to jest tytuł główny)
- H2, H3, H4 to podtytuły. Hierarchia powinna być prawidłowa: H1 → H2 → H3 (nie H1 → H3, bo to zamieszanie)
- Nie używaj nagłówków tylko dla stylizacji („Ten tekst wygląda duży, więc dam H3”). Używaj je dla struktury.
Alt tekst dla obrazów — opisz czym są
Każdy obraz powinna mieć alt tekst. Nie „image123” ani pusty string. Realny opis.
ZŁE alt: „image1”, „photo”, „divi_screenshot”
DOBRZE alt: „Kobieta pijąca kawę przy biurku z laptopem”, „Interfejs Divi — sekcja hero”, „Mapa Polski z zaznaczonymi miastami”
Screen reader czyta alt tekst. Osób ślepa wie czym jest obraz. Plus: alt tekst pomaga w SEO (Google też czyta te opisy).
Testowanie dostępności
Narzędzia darmowe:
- WAVE (wave.webaim.org) — zrzutuje dostępność strony na kolory. Zielone = OK, czerwone = problem
- Lighthouse (Chrome DevTools) — audytu strony, zawiera accessibility score
- Screen reader test — pobierz NVDA (darmowy) i czytaj swoją stronę jak osób ślepa