Jesteś tutaj

Tekst alternatywny

Atrybut „alt: to innymi słowy tekst alternatywny obrazka, czyli opis tego, co się właśnie na nim znajduje.

Składnia jest następująca: alt=”opis tego co się znajduje na obrazku”.

Dlaczego nie można pominąć atrybutu „alt”?

Obrazy (grafiki, zdjęcia) bardzo często zawierają istotny przekaz. Jeśli z jakichkolwiek przyczyn obraz się nie wyświetli, na jego miejscu powinien pojawić się jego opis, czyli tekst alternatywny.

Użytkownik, który nie może zobaczyć obrazu, powinien mieć w sposób alternatywny przedstawioną jego zawartość (zostać odczytany przez program czytający). Zignorowanie przez twórcę parametru „alt” może negatywnie wpłynąć na odbiór kursu i proces przyswajania treści.

Nie wolno pomijać atrybutu „alt”, ponieważ program czytający może w miejscu grafiki odczytać nazwę pliku, która zazwyczaj jest długa, co utrudniłoby korzystanie z platformy (jeśli nie ma alt=”” czytnik może w miejscu zdjęcia prowadzącego przeczytać: /asset-v1:PLodzka+IT101+2019_1+type@asset+block@technologie-informatyczne-01-2.png).

Obraz dekoracyjny, czyli kiedy użyć pustego atrybutu „alt”?

Pustego atrybutu „alt” używa się stosunkowo rzadko: jeśli obraz jest wyłącznie dekoracyjny i nie wnosi żadnej treści.

  • grafiki dekoracyjne (np. punktory, separatory),
  • zdjęcia prowadzących (jeśli zaraz obok są oni przedstawieni z imienia i nazwiska), 
  • tło (background-image), które pełni funkcję ozdobną. 

Pusty atrybut alt to w kodzie html alt=””, przykład:

<li><img src=”/static/kurs-SI_elementy_kolko_punktor.svg” width=”10″ height=”10″ alt=””> Wprowadzenie</li>

Niepoprawne jest wstawianie w alt=”” kropki czy spacji. Bardzo istotne jest to, że nie można pominąć tego atrybutu. Jego brak może powodować, że czytnik ekranu przeczyta użytkownikowi ścieżkę do źródła pliku (przeczyta np. “https://navoica.pl/static/kurs-SI_elementy_kolko_punktor.svg”), będzie to bardzo uciążliwe, rozpraszające i niczego nie wniesie.

Jak dodać atrybut „alt”?

Należy pamiętać: aby dodać tekst alternatywny zarówno do zdjęcia w polu wizytówka kursu, jak i w samej treści kursu.

Tworząc kurs (element HTML), można wstawić obraz w:

  • „Surowy HTML” – wymagana jest znajomość HTML,
  • „Tekst” – w edytorze (przy dodawaniu obrazu jest pole na wpisanie opisu alternatywnego), więcej: https://pomoc.navoica.pl/pomoc/dodawanie-ilustracji/
  • „Tryb pełnoekranowy obrazka” – dodanie obrazu polega na edytowaniu kodu HTML; autor wprowadza opis do atrybutu „alt”, https://pomoc.navoica.pl/pomoc/tryb-pelnoekranowy-obrazka/
  • „Obrazek z lupą” – twórca jest zachęcany do napisania tekstu alternatywnego. W tym przypadku może to być jednak niewystarczające. „Obrazek z lupą” jest wykorzystywany, kiedy szczegóły są bardzo ważne i tekst alternatywny, który z założenia ma być krótki, raczej nie umożliwi pełnego zrozumienia treści niesionych przez obraz, https://pomoc.navoica.pl/pomoc/obrazek-z-lupa/

    • Obraz ilustrujący informacje tekstowe

    Jeśli w formie tekstowej były przekazane te same informacje, które dodatkowo chcemy zilustrować grafiką (np. wykresem) należy zamieścić tekst alternatywny. Przykład:

    alt=”Wykres słupkowy ilustrujący dochody w 2021 roku. Najwyższe dochody osiągnięto w grudniu, najniższe w lipcu.”

    Dokładny opis nie jest konieczny, bo te same informacje były zawarte w tekście.

    Obraz przekazujący treści

    Jeśli obraz przedstawia tekst, rekomendujemy rezygnację z takiej grafiki i zastąpienie jej tekstem. Jeśli z jakiegoś powodu nie da się zastąpić grafiki tekstem i decydujemy mimo wszystko wykorzystać obraz zawierający tekst w kursie, to należy zadbać, żeby te same treści były dostępne w formie tekstowej. Od poprawnego opisu zależy czy osoba z niepełnosprawnościami będzie miała taką samą szansę na przyswojenie treści. Warto zastanowić się jakie informacje i w jaki sposób najlepiej przekazać.

    Przez tekst alternatywny staramy się przekazać to, co zauważyłaby osoba widoma i co jest istotne w kontekście danej jednostki lekcyjnej, w sposób, który pozwala sobie to wyobrazić. Przykładowo w kursie z geografii, jeśli w jednostce o Unii Europejskiej pojawi się ilustracja z flagą UE, należy ją odpowiednio opisać, np. alt=”Flaga Unii Europejskiej, okrąg złożony z dwunastu złotych gwiazd na błękitnym tle”. 

    Opis alternatywny jest ściśle związany z kontekstem, w którym obraz występuje. Jeśli ten sam obraz pojawiłby się w ćwiczeniu, którego celem byłoby sprawdzenie znajomości flag, należałoby usunąć jawną odpowiedź na zadane pytanie z opisu alternatywnego i zostawić np. alt=”Prostokątna flaga, na błękitnym tle okrąg złożony z dwunastu złotych gwiazd”. W ten sposób ćwiczenie będzie spełniało swoje zadanie i sprawdzało wiedzę także w przypadku użytkowników, którzy w miejscu obrazów mają prezentowane opisy alternatywne. 

    Jeśli potrzebny jest dłuższy opis, poprawnym rozwiązaniem byłoby umieszczenie tych samych informacji w formie tekstowej. Jeśli mamy diagram lub wykres, dobrym rozwiązaniem byłoby umieszczenie dodatkowo tabeli z danymi, na podstawie których ten wykres powstał. Taka forma tekstowa może być widoczna lub zwinięta pod przyciskiem. Sam obraz także powinien posiadać opis alternatywny, który w tym przypadku nie musi być już szczegółowy, np. alt=“Diagram kołowy przedstawiający rozmieszczenie ludności świata na kontynentach.”

    Tworzenie odpowiednich opisów alternatywnych jest istotne i nie jest łatwe. Opis zależy od kontekstu, funkcji obrazu w danym miejscu i otoczenia. Dlatego zachęcamy do zapoznania się z szerszymi opracowaniami:

    UWAGA: w wersji angielskiej kursu tekst alternatywny powinien być w języku angielskim.

    Inne wartościowe źródła dotyczące WCAG:

    kurs na Udacity „Web Accessibility by Google”
    podcast A11ycasts od Google
    http://web-accessibility.carnegiemuseums.org/
    https://webaim.org
    strona w3.org