grafika z tekstem alternatywnym

Grafika z tekstem alternatywnym to obraz wyposażony w opis wyświetlany, gdy sam plik graficzny nie zostanie załadowany.

Tekst alternatywny jako część elementu graficznego

Grafika z tekstem alternatywnym to obraz umieszczony na stronie internetowej razem z opisem zapisanym w kodzie HTML, najczęściej w atrybucie alt elementu <img>. Taki opis nie jest napisem narysowanym na obrazie. Stanowi oddzielną informację tekstową przypisaną do pliku graficznego. Przykładowo element <img src="/schemat.png" alt="Schemat podłączenia dysku SSD do płyty głównej"> wskazuje przeglądarce zarówno lokalizację obrazu, jak i jego znaczenie.

Tekst alternatywny może zostać wyświetlony wtedy, gdy przeglądarka nie pobierze pliku, ścieżka do obrazu jest nieprawidłowa albo użytkownik korzysta z ustawień blokujących grafiki. W normalnych warunkach wizualny obraz jest widoczny, a treść atrybutu alt pozostaje niewidoczna dla użytkownika korzystającego ze standardowego interfejsu. Jest jednak dostępna dla technologii asystujących, które odczytują strukturę strony i przekazują jej treść głosowo lub w formie brajlowskiej.

Jak przeglądarka interpretuje opis obrazu

Podczas ładowania strony przeglądarka analizuje element obrazu, pobiera plik wskazany w atrybucie src i rezerwuje dla niego miejsce wynikające z wymiarów obrazu lub stylów CSS. Jeżeli pobranie się nie powiedzie, element może zostać zastąpiony ikoną błędu, pustym obszarem albo tekstem alternatywnym. Dokładny wygląd komunikatu zależy od przeglądarki, systemu operacyjnego i sposobu stylizacji strony. Atrybut alt nie naprawia uszkodzonego pliku, lecz dostarcza jego tekstowy odpowiednik.

Opis powinien przekazywać funkcję albo treść obrazu, a nie tylko informować, że jest to „grafika” lub „obrazek”. Dla fotografii przedstawiającej uszkodzone gniazdo zasilania właściwszy będzie opis „Uszkodzone gniazdo zasilania w obudowie laptopa” niż samo „Laptop”. Jeżeli obraz zawiera wykres, istotne są jego dane i wniosek, który użytkownik powinien z niego odczytać. Jeśli grafika jest wyłącznie dekoracyjna i nie wnosi informacji, pusty atrybut alt="" pozwala technologii asystującej pominąć ją podczas odczytu.

Opis a funkcja obrazu na stronie

Znaczenie tekstu alternatywnego zależy od roli, jaką pełni grafika. Obraz będący odnośnikiem powinien mieć opis wskazujący cel przejścia, na przykład „Przejdź do formularza kontaktowego”, jeżeli właśnie tak działa kliknięcie. Ikona użyta jako przycisk powinna opisywać działanie przycisku, a nie jej wygląd: „Otwórz menu” jest użyteczniejsze niż „Trzy poziome kreski”. W przypadku obrazu zawierającego tekst należy przekazać jego sens, o ile ten tekst nie jest już dostępny obok w zwykłej postaci.

Nie należy powielać w atrybucie alt informacji zapisanych bezpośrednio przed obrazem. Jeżeli podpis pod fotografią dokładnie wyjaśnia jej zawartość, alternatywny opis może być krótszy albo pusty, zależnie od funkcji elementu. Długi opis szczegółowy powinien być umieszczony w zwykłym tekście strony, a atrybut alt może wskazywać, czego dotyczy grafika. Warto też sprawdzić, czy opis nie zawiera zbędnych nazw plików, rozszerzeń, wymiarów lub powtarzających się słów kluczowych.

Sprawdzanie grafiki i tekstu alternatywnego

Weryfikacja grafiki z tekstem alternatywnym obejmuje sprawdzenie poprawności adresu pliku, jego dostępności po ponownym załadowaniu strony oraz zgodności opisu z rzeczywistą funkcją obrazu. W narzędziach deweloperskich przeglądarki można odczytać element HTML i potwierdzić obecność atrybutu alt. Przydatne jest także wyłączenie ładowania obrazów albo czasowe zablokowanie zasobów graficznych, aby ocenić, czy tekst zastępczy przekazuje wystarczającą informację. Sama obecność atrybutu nie oznacza jeszcze, że opis jest poprawny.

Warszawskie Pogotowie Komputerowe wykonuje profesjonalną naprawę laptopów i komputerów PC, w tym diagnostykę problemów z wyświetlaniem grafiki, działaniem przeglądarki oraz konfiguracją oprogramowania. Podczas sprawdzania można rozróżnić błąd pliku obrazu, problem z adresem URL, blokadę zasobu przez rozszerzenie lub ustawienia przeglądarki oraz nieprawidłową strukturę HTML. Takie rozpoznanie pozwala ustalić, czy przyczyną braku widocznej grafiki jest sprzęt, system, aplikacja, połączenie sieciowe czy sam kod strony.