Po dziesiątkach audytów widzimy te same błędy wracające na różnych stronach, w różnych branżach. Dobra wiadomość: żaden z nich nie wymaga przebudowy całego serwisu. Poniżej dziesięć najczęstszych problemów z dostępnością — i konkretny sposób, jak każdy z nich szybko naprawić.

1. Brak lub bezsensowny alt text

Najczęstszy błąd na liście. Puste alt="" na zdjęciach produktowych albo nazwa pliku wklejona jako opis (IMG_2024.jpg). Naprawa: przejrzyj obrazy informacyjne i uzupełnij treściwe opisy; obrazy czysto dekoracyjne oznacz alt="" świadomie. Więcej w naszym artykule o alt-textach.

2. Zbyt niski kontrast tekstu

Modne w designie jasnoszare napisy na białym tle regularnie nie przechodzą progu 4.5:1 z WCAG 2.1 AA. Problem dotyka nawet stron zbudowanych na popularnych frameworkach CSS — sami to sprawdziliśmy na Bulmie. Naprawa: sprawdź każdy kolor tekstu narzędziem typu WebAIM Contrast Checker i przyciemnij te poniżej progu — zwykle wystarczy korekta jasności o kilka procent.

3. Niewidoczny fokus klawiatury

outline: none w CSS bez żadnego zamiennika to jeden z najbardziej rozpowszechnionych błędów — usuwa domyślne obramowanie przy nawigacji Tab, nie dając nic w zamian. Osoba korzystająca wyłącznie z klawiatury traci orientację, gdzie się znajduje. Naprawa: zawsze zostaw wyraźny, kontrastowy styl :focus-visible (obramowanie lub cień) zamiast całkowicie go usuwać.

4. Formularze bez etykiet

Pole input z samym placeholderem zamiast prawdziwego <label> znika z ekranu, gdy użytkownik zacznie pisać, i bywa niepoprawnie odczytywane przez czytniki ekranu. Naprawa: każde pole formularza powinno mieć powiązany <label for="..."> — placeholder może być dodatkową podpowiedzią, nigdy jedynym opisem pola.

5. Nietagowane dokumenty PDF

PDF-y eksportowane "na szybko" bez struktury nagłówków i tagów są dla czytnika ekranu praktycznie jedną wielką ścianą tekstu bez kolejności odczytu. Naprawa: eksportuj dokumenty z zachowaniem struktury nagłówków (w Wordzie/Google Docs używaj stylów nagłówków, nie tylko pogrubienia), a przy skanach stosuj OCR z rozpoznawaniem struktury.

6. Brak obsługi z samej klawiatury

Rozwijane menu, karuzele, modale czy niestandardowe komponenty JS często działają wyłącznie na kliknięcie myszą. Osoba niewidoma albo z ograniczoną sprawnością ruchową, poruszająca się klawiszem Tab, po prostu nie ma jak z nich skorzystać. Naprawa: przetestuj kluczowe ścieżki użytkownika (logowanie, zakup, formularz kontaktowy) wyłącznie na klawiaturze — bez dotykania myszy.

7. Autoodtwarzające się wideo i animacje z dźwiękiem

Materiał, który sam startuje z dźwiękiem, zagłusza czytnik ekranu i potrafi być realną barierą, nie tylko uciążliwością. Naprawa: wyłącz autoplay z dźwiękiem, a jeśli animacja jest czysto dekoracyjna, uwzględnij prefers-reduced-motion w CSS.

8. Informacja przekazana wyłącznie kolorem

"Pola oznaczone na czerwono są wymagane" — dla osoby z zaburzeniami widzenia barw (ok. 8% mężczyzn) taka informacja jest niedostępna. Naprawa: koloruj, ale dodawaj też ikonę, tekst albo wzorzec (gwiazdkę przy wymaganym polu, etykietę "Błąd" przy komunikacie, nie sam czerwony kolor).

Bez tego linku osoba korzystająca z czytnika ekranu musi na każdej podstronie przesłuchać całe menu, zanim dotrze do treści głównej. Naprawa: dodaj niewidoczny do czasu aktywacji link "Przejdź do treści głównej" jako pierwszy element fokusowalny na stronie.

10. Wideo bez napisów

Napisy to nie tylko wsparcie dla osób niesłyszących — to też dostęp w sytuacjach bez dźwięku (transport publiczny, biuro open space) i lepsze indeksowanie treści przez wyszukiwarki. Naprawa: dodawaj napisy do każdego istotnego materiału wideo; w wielu przypadkach transkrypcję da się dziś wygenerować automatycznie, a ręcznie tylko doprecyzować.

Jak podejść do tej listy w praktyce

Nie trzeba naprawiać wszystkiego w jeden dzień. Sensowna kolejność to: najpierw błędy, które całkowicie blokują dostęp (brak obsługi klawiatury, brak alt-textów, brak etykiet formularzy), potem błędy, które utrudniają, ale nie blokują (kontrast, fokus, kolor jako jedyny nośnik informacji), na końcu usprawnienia dodatkowe (napisy, skip-linki, redukcja animacji). Taka kolejność daje najszybszy realny wzrost dostępności przy ograniczonym czasie zespołu.

Podsumowanie

Te dziesięć błędów odpowiada za zdecydowaną większość problemów z dostępnością, jakie widzimy w audytach — i żaden z nich nie wymaga przepisania serwisu od zera. Potraktuj tę listę jako checklistę do samodzielnego, szybkiego przeglądu własnej strony, zanim zamówisz pełny audyt WCAG.