Dostępność mobilna: czy jesteś gotowy?

Tekst alternatywny opisuje to, co można zobaczyć na obrazie. Służy do udostępniania witryny wszystkim osobom — w tym osobom niewidomym i niedowidzącym.

Czytniki ekranu odczytują tekst alternatywny na głos, pozwalając użytkownikom zrozumieć, co przedstawia obraz. Oznacza to, że tekst alternatywny bezpośrednio przyczynia się do dostępności cyfrowej i pomaga Twojej witrynie zachować zgodność z wytycznymi WCAG.

Tekst alternatywny nie tylko poprawia dostępność, ale także wzmacnia SEO. Przejrzyste opisy pomagają wyszukiwarkom zrozumieć, co przedstawia obraz, co sprzyja zarówno użyteczności, jak i wydajności witryny.

Krótko mówiąc

• Tekst alternatywny sprawia, że strony internetowe są dostępne dla każdego

• Przejrzyste opisy pomagają wyszukiwarkom lepiej zrozumieć Twoją treść

• Tekst alternatywny jest niezbędny do przestrzegania wytycznych dotyczących dostępności cyfrowej

Jak napisać dobry tekst alternatywny (alt text)

Tekst alternatywny tworzy się, dodając krótki opis do elementu, który chcesz wyjaśnić. Można to zrobić w kodzie lub za pomocą CMS (systemu zarządzania treścią). CMS pozwala zarządzać treścią witryny bez konieczności posiadania zaawansowanej wiedzy technicznej.

W HTML-u opis dodaje się za pomocą atrybutu alt wewnątrz znacznika img. Informuje on użytkowników — i technologie wspomagające — co przedstawia obraz. Na przykład:

<img src="flower.jpg" alt="żółty tulipan w wazonie" title="żółty tulipan w wazonie>

Oprócz atrybutu alt możesz również użyć atrybut tytułu . Zapewnia to dodatkowe informacje, gdy użytkownicy najeżdżają kursorem na element. Niektóre czytniki ekranu odczytują tytuł zamiast tekstu alternatywnego. Używając tego samego opisu w obu, masz pewność, że żadne informacje nie zostaną utracone.

W przypadku przycisków i formularzy użyj Atrybuty ARIA jak na przykład aria-label Lub aria-oznaczona przez . Opisują one funkcję elementu, nawet gdy nie ma żadnych wskazówek wizualnych.

Atrybut

Zamiar

Przykład

Wszystko

Opis obrazu

<img alt=" logo Eye-Able">

tytuł

Dodatkowe wyjaśnienie

<img title="logo Eye-Able">

aria-label

Opisuje przyciski lub formularze

<button aria-label="Wyślij formularz">

Różne rodzaje obrazów

Obrazy informacyjne

Obrazy informacyjne zawierają istotne treści. Pomagają użytkownikom czytników ekranu zrozumieć, co jest wyświetlane wizualnie.

Typowym przykładem jest logo. Tekst alternatywny powinien krótko opisywać, co przedstawia logo i do jakiej organizacji należy.

<img src="logo.jpg" alt=" Logo Eye-Able przedstawiające stylizowane oko ." tytuł=" Logo Eye-Able przedstawiające stylizowane oko . .">

Unikaj niejasnych opisów, takich jak „ładny obrazek” czy „zdjęcie”. Skup się tylko na istotnych informacjach.

Czytnik ekranu odczytuje ten tekst na głos, dzięki czemu osoba, która nie widzi obrazka, nadal wie, że to logo Eye-Able. Dzięki temu strona internetowa jest dostępna i zgodna z wytycznymi WCAG.

Przykłady:

Zły przykład

Dobry przykład

„Obraz wykresu”

„Wykres słupkowy przedstawiający dane dotyczące sprzedaży za rok 2025”

"Logo"

„Logo Eye-Able ze stylizowanym okiem”

"Zdjęcie"

„Portret pracownika pracującego na laptopie”

Wykresy i diagramy

Wykresy pokazują dane i zależności. Tekst alternatywny powinien wyjaśniać, co pokazuje wykres i dlaczego jest to ważne.

• W przypadku prostych wykresów najważniejsze dane należy umieścić bezpośrednio w tekście alternatywnym.

• W przypadku skomplikowanych wykresów opisz ich cel i odeślij użytkowników do tekstu obok, gdzie znajdą więcej szczegółów.

Jeśli diagram jest skomplikowany, wystarczy opisać jego cel i zapoznać się z poniższym tekstem, aby uzyskać więcej szczegółów. Dzięki temu tekst alternatywny nie będzie zbyt długi.

Przykład:
<img src="election-chart.jpg" alt="Wykres słupkowy przedstawiający wyniki wyborów. Dalsze wyjaśnienia w tekście.">

Zawsze dbaj o to, aby kluczowe dane były dostępne również w formie tekstowej, aby każdy mógł uzyskać dostęp do tych informacji.

Obrazy funkcjonalne

Obrazy funkcjonalne wywołują działania, takie jak przyciski, ikony lub powiązane logo. Tekst alternatywny powinien opisywać co robi obraz , a nie tak, jak wygląda.

Przykład:

<a href="https://eye-able.com/"> <img src="logo.jpg" alt="Przejdź do strony głównej Eye-Able" title="Przejdź do strony głównej Eye-Able"</a>

Tekst alternatywny wskazuje, że obraz prowadzi do strony głównej. Wygląd logo nie jest ważny, ale jego funkcja.

Dobre przykłady:

• „Rozpocznij wyszukiwanie”

• „Prześlij formularz”

• „Następna strona”

Unikaj opisów wizualnych, takich jak „strzałka” czy „lupa”.

Typowe obrazy funkcjonalne:

Typ obrazu

Funkcjonować

Przykładowy tekst alternatywny

Ikona wyszukiwania

Rozpocznij wyszukiwanie

„Rozpocznij wyszukiwanie”

Zapisz ikonę

Zapisz dokument

"Ratować"

Strzałka w prawo

Przejdź do następnej strony

„Następna strona”

Ikona domu

Przejdź do strony głównej

„Strona główna”

Dzięki takiemu podejściu każdy, łącznie z użytkownikami czytników ekranu, rozumie, co się dzieje po kliknięciu obrazu.

Obrazy dekoracyjne

Obrazy dekoracyjne nie wnoszą żadnej treści. Służą jedynie do nastrojowego nastroju lub designu. W takim przypadku pozostaw atrybut alt pusty:

<img src="wzór-tła.jpg" alt="">

Czytniki ekranu pominą te obrazy, zapobiegając niepotrzebnym przerwom.

Używaj obrazów dekoracyjnych z rozwagą. Jeśli zdjęcie lub ikona przekazuje coś na temat treści, nie powinny być dekoracyjne. W takim przypadku dodaj opis.

Lista kontrolna obrazów dekoracyjnych:

• Czy obraz dodaje znaczenia? ?
  Tak → dodaj tekst alternatywny.
  Nie → pozostaw atrybut alt pusty.

• Czy jest to funkcja czysto dekoracyjna?

  Tak → użyj alt="" .

• Czy jest to część przycisku lub łącza?

  Nie → wtedy może być dekoracyjna.

Wyraźne rozróżnienie obrazów dekoracyjnych i informacyjnych pomaga zachować dostępność Twojej witryny internetowej.

Dzięki takiemu wykorzystaniu tekstu alternatywnego Twoja witryna stanie się bardziej zrozumiała i przyjazna dla użytkownika.

Jak napisać skuteczny tekst alternatywny

Dobre teksty alternatywne pomagają osobom, które nie widzą obrazów, zrozumieć treść. Możesz napisać dobry tekst alternatywny, krótko i jasno opisując, co widać na obrazku.

Najlepsze praktyki:

• Bądź zwięzły i opisowy

• Unikaj fraz takich jak „obraz” lub „zdjęcie”

• Skoncentruj się na tym, co jest istotne w kontekście

• Zachowaj tekst alternatywny pomiędzy 80–120 znaków

• Używaj poprawnej pisowni i gramatyki

Przegląd wytycznych

Aspekt

Wytyczne

Przykład

Otwór

Unikaj „wizerunku”

„Niebieski samochód na wiejskiej drodze”

Długość

80–120 znaków

„Dwóch studentów pracuje na laptopach w bibliotece”

Język

Jasne i poprawne

Żadnych skrótów ani emotikonów

Centrum

Tylko istotny kontekst

Opisz, co jest ważne

Tekst alternatywny wspiera również SEO. Wyszukiwarki wykorzystują go do analizy obrazów, poprawiając ich widoczność w wynikach wyszukiwania bez nadmiernego nadużywania słów kluczowych.

Poproś o opinię osobę korzystającą z czytnika ekranu lub niezaznajomioną z obrazkiem. Jej odpowiedź pokaże, czy Twój opis jest wystarczająco jasny. Jeśli rozumie, co przedstawia obraz, oznacza to, że Twój tekst alternatywny działa prawidłowo. Dzięki temu Twoja witryna będzie bardziej dostępna i przyjazna dla wszystkich użytkowników.

Co się stanie, jeśli brakuje tekstu alternatywnego?

Bez tekst alternatywny, Czytniki ekranu odczytują nazwy plików, takie jak img123.jpg. Użytkownicy nie dostrzegają istotnych informacji, a Twoja witryna może naruszać przepisy WCAG i przepisy dotyczące dostępności.

Konsekwencje braku tekstu alternatywnego:

• Użytkownicy nie rozumieją treści

• Twoja witryna nie spełnia wymagań WCAG 2.2

• Organizacje ryzykują grzywny na mocy przepisów dotyczących dostępności

Tekst alternatywny zapewnia równy dostęp i zgodność z Europejskim Aktem w sprawie Dostępności (EAA).

Przepisy dotyczące dostępności cyfrowej

Przepisy dotyczące dostępności cyfrowej nakładają na organizacje obowiązek udostępniania stron internetowych i aplikacji wszystkim użytkownikom, w tym osobom niepełnosprawnym.

• Wytyczne WCAG definiują standardy dostępności

• Z 28 czerwca 2025 r. , ten Europejski Akt w sprawie Dostępności (EAA) dotyczy wielu produktów i usług cyfrowych

• Nadzór nad egzekwowaniem prawa sprawuje zróżnicowana grupa agencji lub instytucji (rządowych).

Kluczowe obowiązki:

• Zgodność z normą EN 301 549

• Opublikuj oświadczenie dotyczące dostępności

• Zapewnij alternatywy tekstowe dla obrazów i multimediów

• Monitoruj i utrzymuj dostępność w sposób ciągły

Wytyczne i tekst alternatywny WCAG

WCAG Wersja 2.2 wyjaśnia, jak należy używać tekstu alternatywnego:

• Każdy znaczący obraz potrzebuje opisowego tekstu alternatywnego

• Obrazy dekoracyjne używają alt=""

• Kontekst decyduje, co jest istotne

• Regularnie testuj, korzystając z narzędzi ułatwiających dostęp

Najważniejsze punkty WCAG 2.2:

Wytyczne

Wyjaśnienie

Wymagane teksty alternatywne

Każdy znaczący obraz zawiera opisowy tekst alternatywny.

Obrazy dekoracyjne

Użyj pustego tekstu alternatywnego ( alt="" ) jeśli obraz nie dodaje żadnych informacji.

Kontekst jest ważny

Opisz, co jest istotne w kontekście treści strony.

Przetestuj swoją treść

Sprawdź za pomocą narzędzia WCAG, czy Twoje teksty alternatywne spełniają wymagania.

Często zadawane pytania

1. Jak dodać tekst alternatywny do obrazów?

Dodaj atrybut alt w formacie HTML lub za pośrednictwem CMS-a wraz z krótkim i czytelnym opisem.

2. Jak sprawić, by tekst alternatywny był jasny dla wszystkich? ?

Używaj prostego języka, unikaj zbędnych szczegółów i opisuj to, co użytkownicy w przeciwnym razie by przegapili.

Dobry tekst alternatywny:

• Opisuje to, co ktoś nie dostrzega, gdy obraz nie jest widoczny.

• Brane są pod uwagę wytyczne WCAG dotyczące dostępności cyfrowej.

• Zgodne ze znaczeniem strony.

3. Jakich błędów powinienem unikać?

Wiele osób pozostawia tekst alternatywny pusty lub pisze zbyt długie zdania. To sprawia, że strona internetowa jest mniej przystępna.

Unikaj tych błędów:

1. Pozostawienie pustego tekstu alternatywnego

2. Pisanie opisów ogólnych

3. Wypychanie słów kluczowych

4. Dodawanie tekstu alternatywnego do obrazów o charakterze czysto dekoracyjnym

4. W jaki sposób tekst alternatywny poprawia SEO mojej witryny?

Tekst alternatywny pomaga wyszukiwarkom zrozumieć, co znajduje się na obrazie. Może to poprawić pozycję obrazu w Google Grafika.

Dobrze napisany tekst alternatywny:

• Poprawia widoczność Twojej witryny internetowej.

• Dostarcza kontekstu wyszukiwarkom.

• Zwiększa prawdopodobieństwo, że użytkownicy odwiedzą Twoją witrynę.

5. Czy brak tekstu alternatywnego wpływa na dostępność?

Tak, bez tekstu alternatywnego czytniki ekranu nie są w stanie opisać tego, co znajduje się na obrazie. Osoby z wadami wzroku tracą wtedy dostęp do informacji.

Tekst alternatywny gwarantuje, że wszyscy zrozumieją tę samą treść, niezależnie od tego, czy ją widzą, czy nie. Dzięki temu Twoja witryna jest bardziej dostępna i przyjazna dla użytkownika.

6. Jak mogę przetestować swój tekst alternatywny?

Użyj czytników ekranu, np. NVDA lub VoiceOver, albo sprawdź swoją witrynę za pomocą platformy ułatwień dostępu Eye-Able, aby natychmiast zidentyfikować brakujące lub niejasne teksty alternatywne.

Możesz również skorzystać z narzędzi sprawdzających dostępność, takich jak nasza platforma Eye-Able. Szybko i łatwo sprawdzimy, czy brakuje Ci tekstów alternatywnych lub czy są one niejasne.