Błędy dostępności które kosztują Cię klientów

Robię audyt strony klienta. Strona ładna, nowoczesna, zaprojektowana przez dobrą agencję. Włączam test klawiaturą - i po 3 sekundach nie wiem, gdzie jestem. Fokus jest niewidoczny. Menu nie reaguje na Enter. Formularz kontaktowy nie ma ani jednej etykiety.

Klient nie wie, że ma problem. Google Analytics pokazuje ruch, formularz zbiera leady, strona "działa". Ale ile osób odeszło, bo nie mogły jej użyć? Tego żaden tracker nie pokaże.

Oto błędy, które widuję najczęściej. Każdy z nich da się naprawić - i żaden nie wymaga przebudowy strony od zera.

Niewystarczający kontrast tekstu

Najczęstszy problem na stronach firmowych. Jasnoszary tekst (#999) na białym tle wygląda "elegancko" i "minimalistycznie". Problem w tym, że jest nieczytelny.

WCAG wymaga kontrastu minimum 4.5:1 dla normalnego tekstu. Szary #999 na białym #FFF daje kontrast 2.85:1 - o 40% za mało.

Gdzie to widuję:

• Opisy pod produktami w sklepach
• Informacje w stopce
• Placeholder w polach formularzy
• Tekst na zdjęciach bez przyciemnienia tła

Jak naprawić: Zmień kolor tekstu na ciemniejszy. #595959 na białym tle daje 7:1 - a nadal wygląda lekko. Jeśli tekst jest na zdjęciu - dodaj półprzezroczyste ciemne tło pod spodem. 20 minut pracy w CSS.

Brak tekstu alternatywnego na obrazkach

Screen reader napotyka obrazek bez alt text i czyta nazwę pliku: "DSC_0847_final_v2.jpg". Użytkownik nie ma pojęcia, co jest na zdjęciu.

Gorzej: wiele stron ma alt="" na wszystkich obrazkach. Screen reader je pomija - nie wie, że to zdjęcia produktów, zespołu, certyfikatów. Treść wizualna po prostu nie istnieje.

Jak naprawić:

• Produkt: alt="Betonowa kostka brukowa Semmelrock Pastella w kolorze szarym"
• Zespół: alt="Anna Kowalska, kierownik projektu"
• Dekoracja (ikona, separator): alt="" - i to jest OK, bo te obrazki nie niosą treści

Napisanie alt text dla 30 obrazków na stronie to godzina pracy. Raz, nie co tydzień.

Elementy niedostępne z klawiatury

Przycisk "Wyślij zapytanie" działa na klik myszką, ale Tab go pomija. Dlaczego? Bo zamiast <button> ktoś użył <div onclick="...">. Wygląda jak przycisk, zachowuje się jak przycisk, ale dla klawiatury i screen readera - nie istnieje.

To samo dotyczy rozwijanych menu, sliderów, tabów, modali. Jeśli element jest interaktywny, musi być dostępny z klawiatury. Bez wyjątków.

Jak naprawić: Użyj poprawnych elementów HTML. <button> zamiast <div>, <a href> zamiast <span onclick>. Dodaj tabindex="0" tam, gdzie trzeba. Dodaj obsługę klawisza Enter i Escape dla okien modalnych.

Formularze bez etykiet

Formularz kontaktowy. Trzy pola. Placeholder: "Imię", "Email", "Wiadomość". Zero elementów <label>.

Problem: placeholder znika po kliknięciu w pole. Użytkownik z krótkotrwałą pamięcią nie pamięta, co miał wpisać. Screen reader mówi "pole tekstowe" bez kontekstu - nie wie, czy to imię, email, czy numer konta.

Jak naprawić: Dodaj <label for="pole"> do każdego pola. Można wizualnie ukryć etykietę (class sr-only), jeśli design tego wymaga - ale w HTML musi być. Można też użyć aria-label na polu. 15 minut na cały formularz.

Przyciski za małe na telefonie

44×44 piksele - to minimalny rozmiar elementu dotykowego wg WCAG. A na wielu stronach mobilnych widzę linki 20×12, checkboxy 16×16 i ikonki zamknięcia, w które trafiam co trzecim razem.

Efekt? Użytkownik z grubszymi palcami, drżeniem rąk albo po prostu na telefonie w autobusie - klika obok. Raz, drugi, trzeci. I zamyka stronę.

Jak naprawić: min-height: 44px; min-width: 44px; na przyciskach i linkach w wersji mobilnej. Jeśli link tekstowy jest za mały - dodaj padding. Prosta zmiana w CSS, zero wpływu na wygląd desktopowy.

Animacje bez możliwości wyłączenia

Parallax, animowane tła, elementy wjeżdżające na scroll. Ładne na landing page, ale dla osób z zaburzeniami przedsionkowymi (vertigo, migrena) mogą wywołać fizyczne mdłości.

WCAG wymaga, żeby użytkownik mógł zatrzymać, wstrzymać lub ukryć ruchome treści. System operacyjny ma ustawienie "Ogranicz ruch" (prefers-reduced-motion) - ale większość stron to ignoruje.

Jak naprawić: Jedna linijka w CSS:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

To tyle. Użytkownicy, którzy włączyli "Ogranicz ruch" w systemie, zobaczą stronę bez animacji. Reszta widzi stronę normalnie. Na dede.agency dodaliśmy jeszcze przycisk w widgecie dostępności, który pozwala wyłączyć animacje ręcznie.

Ile kosztuje naprawienie tych błędów

Żaden z opisanych problemów nie wymaga przebudowy strony. Większość to zmiany w CSS, dodanie atrybutów HTML, zamiana <div> na <button>. Dla przeciętnej strony firmowej - od kilku godzin do dwóch dni pracy developera.

Ile kosztuje nienaprawienie? Tego nie policzysz. To osoby, które nie wypełniły formularza. Nie przeczytały oferty. Nie zadzwoniły. Nie wrócą, nie napiszą reklamacji, nie zostawią złej opinii. Po prostu odejdą do konkurencji, której strona działa dla nich.

Sprawdź swoją stronę

W poprzednim wpisie opisałem 5 testów, które możesz wykonać sam w 10 minut. A jeśli chcesz profesjonalny audyt i wdrożenie poprawek - napisz do nas. Robimy to regularnie dla naszych klientów, przy każdym projekcie webowym.