Dostępność sekcji z logotypami: teksty alternatywne, kontrast i czytniki ekranu

Dostępność sekcji z logotypami oznacza, że osoba niewidoma usłyszy ją jako „Zaufali nam, lista, 6 elementów” z nazwami firm, osoba słabowidząca zobaczy w wystarczającym kontraście, a użytkownik klawiatury przejdzie bez gubienia fokusu. Wymaga to trzech rzeczy: tekstów alternatywnych z nazwami firm, czytelnych wersji znaków i poprawnej struktury HTML z nagłówkiem i listą.

Dlaczego sekcja z logotypami tak często łamie zasady dostępności

Sekcja „Zaufali nam”, czyli logo wall, składa się prawie wyłącznie z obrazów, a obrazy bez tekstu alternatywnego to od lat najczęstszy błąd dostępności w sieci. Raport WebAIM Million 2026, oparty na analizie miliona najpopularniejszych stron głównych z lutego 2026 r., wykrył błędy zgodności z WCAG na 95,9% stron. Brak tekstu alternatywnego dla obrazów pojawił się na 53,1% z nich, a 16,2% wszystkich przeanalizowanych obrazów nie miało tego tekstu wcale. Kolejne około 10,8% obrazów miało tekst alternatywny wątpliwej jakości: nazwy plików, ogólniki typu „image” albo powtórzenia sąsiedniego tekstu.

Sekcja logotypów jest na te błędy szczególnie podatna, bo znaki trafiają na stronę hurtowo, często wgrywane przez osobę, która nie zastanawia się nad ich opisem. Efekt dla użytkownika czytnika ekranu: zamiast informacji, że firma pracuje z rozpoznawalnymi markami, słyszy „grafika, logo-final-2, grafika, grafika”. Najmocniejszy dowód społeczny na stronie po prostu do niego nie dociera.

Dochodzi do tego wymiar prawny. Ustawa z 26 kwietnia 2024 r. o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług przez podmioty gospodarcze (Dz.U. 2024 poz. 731), wdrażająca Europejski akt o dostępności, obowiązuje od 28 czerwca 2025 r. i obejmuje m.in. usługi handlu elektronicznego, z wyłączeniami dla mikroprzedsiębiorców świadczących usługi. Podmioty publiczne podlegają ustawie z 4 kwietnia 2019 r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych. Szerzej o biznesowym znaczeniu tych przepisów piszemy w tekście o dostępności jako sygnale zaufania w e-commerce.

Tekst alternatywny dla logo: zasady i przykłady

Podstawowa zasada jest prosta: tekst alternatywny przekazuje funkcję obrazu, a nie jego wygląd. Dla logotypu w sekcji klientów funkcją jest nazwa firmy. Przykłady poniżej używają fikcyjnych nazw.

Najczęstsze błędy, które warto wyłapać przy przeglądzie sekcji:

• słowo „logo” w każdym opisie – czytnik i tak informuje, że to grafika,
• nazwy plików – efekt automatycznego wgrywania obrazów w systemie zarządzania treścią,
• upychanie fraz kluczowych – „agencja marketingowa Warszawa klient Lumen” to spam, a nie opis,
• ten sam opis dla wszystkich znaków – np. „logo klienta” powtórzone dwanaście razy,
• opis wyglądu – „niebieski napis na białym tle” nie przekazuje informacji o kliencie.

Pokusa upychania fraz w opisach logotypów bierze się z przekonania, że alt to przede wszystkim narzędzie SEO. Wyszukiwarki rzeczywiście korzystają z tekstów alternatywnych, by rozumieć obrazy, ale nazwa firmy jest dokładnie tą informacją, której potrzebują. Google w zaleceniach dotyczących obrazów przestrzega przed wypełnianiem atrybutu alt słowami kluczowymi, bo pogarsza to doświadczenie użytkownika i może zostać uznane za spam. Tę samą zasadę – najpierw użytkownik, potem algorytm – stosuj do całej sekcji dowodu społecznego na stronie docelowej; listę jej elementów zawiera poradnik o sekcji social proof na landing page.

Jeśli przy logotypie stoi cytat klienta, oba elementy powinny tworzyć jedną całość także w kodzie, np. w elemencie figure z podpisem. Jak łączyć znak z wypowiedzią, opisujemy w artykule o cytacie klienta przy logotypie.

Kontrast logotypów: co naprawdę mówią wytyczne WCAG

Wokół kontrastu logotypów krąży sporo nieporozumień. Kryterium 1.4.3 WCAG wymaga kontrastu co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego, ale wprost wyłącza z tego wymogu tekst będący częścią logo lub nazwy marki. Dokumentacja W3C do kryterium 1.4.11 („Kontrast elementów nietekstowych”, próg 3:1) również traktuje logotypy jako wyjątek – z założeniem, że ich kolory wynikają z wytycznych identyfikacji marki.

Ten wyjątek ma jednak granicę. Jeśli niski kontrast jest decyzją projektanta, a nie wymogiem księgi znaku, logo przestaje być zwolnione. Typowy przykład to modny zabieg: logotypy klientów w jasnoszarym kolorze z przezroczystością 40% na białym tle. Marki klientów nie wymagają takiej wersji – stworzył ją projektant strony. W3C zaleca, by tam, gdzie wytyczne marki na to pozwalają, wybierać wariant znaku o wystarczającym kontraście.

W praktyce:

1. Używaj wersji monochromatycznych w ciemnym odcieniu szarości lub czerni, a nie bladych.
2. Sprawdź kontrast najjaśniejszych elementów znaku z tłem w dowolnym narzędziu do pomiaru kontrastu.
3. Unikaj logotypów na zdjęciach lub gradientach.
4. Przetestuj sekcję w trybie ciemnym i trybie wymuszonych kolorów – czarne logo zapisane jako przezroczysty PNG potrafi całkowicie zniknąć na ciemnym tle.

Dylemat „kolor czy szarość” z punktu widzenia projektowego omawiamy w tekście o logotypach w kolorze i w skali szarości.

Jak sekcję z logotypami słyszy czytnik ekranu

Czytniki ekranu, takie jak NVDA, JAWS, VoiceOver czy TalkBack, odczytują stronę według struktury kodu, a nie układu wizualnego. Dobrze zbudowana sekcja z logotypami ma trzy warstwy:

1. Nagłówek – np. H2 „Zaufali nam” lub bardziej informacyjny „Z naszego systemu korzysta 300 sklepów, m.in.:”. Użytkownicy czytników często nawigują po nagłówkach, więc bez niego sekcja jest niewidoczna.
2. Lista – logotypy w elemencie listy (ul i li). Czytnik ogłasza wtedy „lista, 6 elementów”, co od razu informuje o skali.
3. Opisy elementów – teksty alternatywne z nazwami firm.

Uproszczony przykład poprawnej struktury:

<section aria-labelledby="klienci">
  <h2 id="klienci">Zaufali nam</h2>
  <ul class="logos">
    <li><img src="lumen.svg" alt="Hurtownia Lumen" width="120" height="40"></li>
    <li><img src="orbis.svg" alt="Orbis Logistyka" width="120" height="40"></li>
  </ul>
</section>

Gotowe wzorce, np. te opisane w przeglądzie ścian logotypów w SaaS, warto przed skopiowaniem sprawdzić pod kątem tych trzech warstw. Częste problemy wynikają z gotowych widżetów i szablonów: logotypy umieszczone jako tło w stylach (niewidoczne dla czytnika), listy zbudowane z samych elementów div, slajdy karuzeli dostępne dla czytnika także wtedy, gdy są ukryte wizualnie. Ta sama struktura dotyczy pokrewnych sekcji, np. logotypów mediów w sekcji „Pisali o nas” oraz odznak i certyfikatów, opisanych w tekście o tym, gdzie pokazywać certyfikaty i nagrody.

Logotypy jako linki, ruch i powiększanie strony

Gdy każde logo prowadzi do case study, sekcja staje się zestawem elementów interaktywnych i obowiązują dodatkowe zasady:

• Cel linku musi być zrozumiały – tekst alternatywny „Case study: Hurtownia Lumen” zamiast samej nazwy, jeśli kliknięcie otwiera historię projektu.
• Fokus musi być widoczny – użytkownik klawiatury powinien wyraźnie widzieć, na którym logo się znajduje.
• Obszar kliknięcia nie może być zbyt mały – WCAG 2.2 w kryterium 2.5.8 wskazuje minimum 24 na 24 piksele CSS lub odpowiednie odstępy między celami.
• Informacje pokazywane tylko po najechaniu kursorem – np. dymek z wynikiem klienta – muszą być dostępne także z klawiatury.

Animowany pasek logotypów podlega kryterium 2.2.2 WCAG: ruch trwający dłużej niż pięć sekund wymaga mechanizmu pauzy. Szczegóły techniczne opisujemy w artykule o animowanych karuzelach logotypów.

Sprawdź też zachowanie sekcji przy powiększeniu. Kryterium 1.4.10 WCAG wymaga, by treść dało się czytać bez przewijania w poziomie przy szerokości odpowiadającej 320 pikselom CSS. Rząd sześciu logotypów o stałej szerokości, który nie zawija się do kolejnych linii, łamie tę zasadę przy powiększeniu strony do 400%.

Jak przetestować dostępność sekcji z logotypami

Pełny audyt dostępności to zadanie dla specjalisty, ale sekcję logotypów sprawdzisz sam w kwadrans:

Testy automatyczne wykrywają brak tekstu alternatywnego, ale nie ocenią, czy „logo-final” to dobry opis. Dlatego odsłuchanie sekcji w czytniku ekranu jest najważniejszym krokiem. Dostępność logotypów warto też włączyć do okresowego audytu dowodu społecznego na stronie, obok aktualności zgód i doboru marek opisanego w przewodniku po sekcji „Zaufali nam”.

Checklista dostępności sekcji z logotypami

1. Dodaj nagłówek sekcji na właściwym poziomie struktury strony.
2. Umieść logotypy w liście HTML, a nie w samych elementach div.
3. Wpisz jako tekst alternatywny nazwę firmy, bez słowa „logo” i bez fraz pod SEO.
4. Dla logotypów-linków opisz cel linku, np. „Case study: nazwa klienta”.
5. Oznacz duplikaty i znaki z nazwą obok jako dekoracyjne.
6. Zastąp blade wersje znaków wariantami o wyraźnym kontraście.
7. Sprawdź sekcję w trybie ciemnym, przy wymuszonych kolorach i przy powiększeniu do 400%.
8. Dodaj przycisk pauzy do każdego animowanego paska.
9. Przejdź sekcję klawiaturą i odsłuchaj ją w czytniku ekranu przed każdą większą zmianą.