Opisy obrazków

Wpisy na blogu

2025-06-01

Obrazki na stronie mogą pełnić różne role. Niektóre z nich są bardzo ważne, bo przekazują informacje, których nie można pominąć – jak zdjęcia produktów, wykresy czy ilustracje wspierające treść artykułu. Inne natomiast to jedynie elementy dekoracyjne, które nie mają znaczenia dla zrozumienia strony – na przykład ozdobne linie, tła czy ikonki.

Z punktu widzenia na przykład osoby niewidomej, obrazek jest tym samym co kolor dla osoby widzącej. Przepraszam, ale lubię to porównanie, szczególnie wtedy, kiedy słyszę, że najlepiej przedstawiać wszystkie obrazki jako dekoracyjne, a tym samym niewidoczne dla czytników i zrzucić z siebie całą masę pracy, polegającą na przygotowaniu tekstów je opisujących. Idźmy zatem dalej. Twórzmy wszystko czarno białe albo wszystko takie same. Po co tworzyć coś co jest inne, niestandardowe - przecież proces wytwórczy zajmie znacznie więcej niż skorzystanie z szablonu i przekopiowanie czegoś, co ktoś wcześniej wymyślił.

Mam jednak głęboką nadzieję, że choć niektórzy z czytających ten tekst, chcą dać od siebie odrobinę więcej i zapewnić, również ludziom z niepełnosprawnościami, większy komfort i jakość życia.

Obrazek z opisem i bez

Przed napisaniem opisu obrazka warto zastanowić się, do której grupy należy. Jeśli obrazek przekazuje ważne informacje, trzeba go dokładnie opisać. A jeśli pełni jedynie funkcję ozdobną, można go oznaczyć jako „do pominięcia” dla czytników ekranu.

Dla lepszego zrozumienia posłużmy się kilkoma przykładami.

Przykład obrazka dekoracyjnego - na stronie z artykułem widnieje obrazek w postaci delikatnych liści w tle nagłówka. Obrazek nie przekazuje żadnej istotnej treści – jest po prostu dekoracją. Nie opisujemy go, pozostawiamy znacznik tekstu alternatywnego (alt) pusty.

<img src="tlo-liscie.jpg" alt="">

Przykład obrazka istotnego - np. zdjęcie produktu w sklepie internetowym

Na stronie produktu znajduje się zdjęcie przedstawiające buty sportowe w kolorze czerwonym. Obrazek jest kluczowy dla oglądającego, ponieważ bez niego nie wie, jak wyglądają buty. Stosujemy zatem opis, dodając w kodzie atrybut tekstu alternatywnego z jasną informacją co użytkownik widzi na zdjęciu.

<img src="buty-czerwone.jpg" alt="Czerwone buty sportowe z białą podeszwą">

Proste.

Alt a może coś jeszcze?

Kiedy chcemy opisać obrazek w kodzie strony internetowej, najczęściej robimy to za pomocą atrybutu alt w znaczniku img. To właśnie tam wpisujemy opis alternatywny, czyli tekst, który czytnik ekranu odczyta zamiast obrazka. Opis alternatywny powinien jasno i zwięźle przekazywać najważniejszą treść obrazka – to, co osoba widząca zobaczyłaby na własne oczy.

Ale to nie jedyny sposób na opisywanie grafik. Dla bardziej złożonych obrazków, takich jak wykresy czy infografiki, można użyć dodatkowych atrybutów i technik. Przykładem jest aria-describedby, które pozwala powiązać obrazek z elementem tekstowym na stronie – na przykład paragrafem lub opisem pod wykresem. Dzięki temu czytnik ekranu wie, że opis znajduje się w innym miejscu na stronie i odczytuje go jako rozszerzony opis obrazka.

Dawniej w HTML istniał też atrybut longdesc, który pozwalał podać link do bardziej szczegółowego opisu, ale obecnie jest on rzadko używany i nie zawsze wspierany przez przeglądarki.

Jak opisywać?

Kiedy już wiecie, czy obrazek powinien być pominięty przez czytniki, czy powinien zatrzymać się i przeczytać co widnieje na nim, zastanówmy się jak go opisać. Najważniejsze to przekazać w kilku słowach to, co użytkownik niewidomy „zobaczyłby”, patrząc na obrazek. Opis powinien być konkretny, bez zbędnych słów, a jednocześnie wystarczająco informacyjny, aby zrozumieć sens grafiki. Zamiast pisać „Zdjęcie przedstawia…”, od razu opiszmy, co na nim jest, np. „Czerwone buty sportowe z białą podeszwą” albo „Schemat przepływu danych między modułami: użytkownik, serwer, baza danych”. Unikajmy zbyt długich i szczegółowych opisów, które mogą przytłoczyć – prostota i trafność to klucz.

Obrazek z prostym opisem w alt - Ten opis krótko przekazuje, co widać na obrazku.

<img src="rower.jpg" alt="Czerwony rower górski na tle górskiego krajobrazu">

Obrazek dekoracyjny (np. tło strony) - Czytnik ekranu pominie ten obrazek, bo alt jest pusty.

<img src="tlo.jpg" alt="">

Obrazek skomplikowany (np. schemat), z dodatkowym opisem w treści i aria-describedby

<img src="schemat.jpg" alt="Schemat procesów" aria-describedby="opis-schematu">
<p id="opis-schematu">Schemat przedstawia przepływ danych: użytkownik wysyła żądanie, serwer je odbiera i przekazuje do bazy danych, po czym zwraca odpowiedź.</p>

Tutaj alt daje krótką informację, a szczegółowy opis znajduje się w elemencie

z przypisanym id, na które wskazuje aria-describedby.

Obrazek pełniący rolę linku (np. logo strony) - Opis alternatywny mówi, co się stanie po kliknięciu obrazka.

<a href="strona-glowna.html">
<img src="logo.jpg" alt="Strona główna [test-wcag.pl](http://test-wcag.pl/)">
</a>

Obrazek bez alt – przykład, czego NIE robić -** Bez alt czytnik ekranu może odczytać nazwę pliku (wykres.jpg), co nie przekazuje żadnej użytecznej informacji. Tego należy unikać!

<img src="wykres.jpg">

Podsumowanie

Warto pamiętać, że każdy obrazek na stronie powinien mieć opis, ale to, jak go opiszemy, zależy od tego, jaką pełni rolę. Jeśli obrazek niesie ważną informację – jak zdjęcie produktu, wykres czy schemat – dobrze jest opisać go tak, żeby użytkownik niewidomy mógł zrozumieć, co widzi na obrazku. Opis powinien być prosty i konkretny, najlepiej w kilku słowach, bez niepotrzebnych ozdobników. Na przykład zamiast pisać „Zdjęcie przedstawia czerwonego roweru górskiego na tle gór”, lepiej napisać po prostu „Czerwony rower górski na tle gór”.

Z kolei jeśli obrazek pełni tylko funkcję dekoracyjną – jak tło, ozdobna linia, ikona bez znaczenia – najlepiej nie dodawać żadnego opisu. Wystarczy pusty atrybut alt, dzięki któremu czytnik ekranu po prostu pominie taki obrazek. To sprawi, że osoby korzystające z technologii wspomagających nie będą rozpraszane zbędnymi informacjami.

Przy bardziej skomplikowanych obrazkach, jak wykresy czy infografiki, warto rozważyć dodanie szczegółowego opisu w treści strony i połączenie go z obrazkiem za pomocą aria-describedby. Dzięki temu użytkownicy, którzy potrzebują pełniejszej informacji, będą mogli ją otrzymać.

Pamiętajmy też, że każdy obrazek będący linkiem powinien być opisany zgodnie z tym, dokąd prowadzi – na przykład „Strona główna test-wcag.pl”. Ważne jest, żeby treść opisu była zrozumiała i użyteczna.

Na koniec – testowanie. Najlepszym sposobem na sprawdzenie, czy opisy obrazków działają tak, jak powinny, jest użycie czytnika ekranu. Warto poświęcić chwilę, by usłyszeć, jak odczytywana jest strona, i upewnić się, że wszystko jest jasne i zrozumiałe.

Możecie też skorzystać z naszych narzędzi do tworzenia tekstów alternatywnych. Znajdziecie je na naszej stronie w zakładce Prosty język.

Blog