Zapoznaj się z 4 zasadami dostępności
Jesteś tutaj:Strona główna / WCAG 2.0 Zasada 1: Percepcja / Wytyczna 1.1 Tekst alternatywny / 1.1.1 Informacja nietekstowa (A)
1.1.1 Informacja nietekstowa (A) - WCAG 2.0
Pod pojęciem tekstu alternatywnego kryje się szeroka gama technik, dzięki którym wszelkie elementy nietekstowe, umieszczone na stronie internetowej, takie jak: zdjęcia, obrazki ozdobne, ikony, wykresy, animacje, itp. będą mogły być przetworzone przez oprogramowanie użytkownika i dostarczyć komplet informacji, jakie ze sobą niosą.
Mówimy wtedy o płynnej transformacji treści. Bez wnikania w przyczynę i powód, wyobraźmy sobie sytuację, kiedy otwieramy stronę internetową we współczesnej przeglądarce, ale mamy wyłączone ładowanie styli (pliki CSS) oraz wyłączone pobieranie grafik. Wówczas poprawnie przygotowana strona w dalszym ciągu będzie możliwa do odczytania. Jej struktura będzie jasna i klarowna. Użytkownik będzie wiedział, gdzie jest główne menu, gdzie jest wyszukiwarka, jakie są nagłówki, co przedstawiają obrazki, itp.
W dużym uproszczeniu możemy powiedzieć, że inne oprogramowanie wspomagające, jak np. programy czytające (screen readers) czy roboty wyszukiwarek „widzą” naszą stronę podobnie.
Jak zatem przekazać informacje o obrazkach osadzonych na stronie internetowej dla programów czytających, robotów wyszukiwarek? Do znacznika img należy dodać atrybut alt.
W atrybucie powinien znaleźć się krótki opis szczegółów, jakie przedstawia ilustracja w zależności od kontekstu. Pomimo tego prostego zabiegu musimy się jednak zastanowić, co należy w atrybucie wpisać i czy w ogóle musi zawierać jakąś informację? Jeśli opis ma być bardziej szczegółowy, ilustracja może być linkiem do osobnej strony z opisem, lub opis może znaleźć się obok ilustracji.
Poniżej klika przykładów, jak w zależności od sytuacji wykorzystać atrybut alt w obrazkach.
- Zdjęcie przedstawiciela handlowego na stronie kontaktowej:
Przykładowy kod<img src=”j_kowalski.jpg” alt=”Jan Kowalski – przedstawiciel handlowy” />
Zawartość atrybutu alt powinna być krótka i zwięzła, dlatego nie umieszczamy w nim dodatkowych informacji o numerze telefonu, adresie e-mail. Na dodatkowe dane jest miejsce w tekście strony. - Wykres przedstawiający zwroty z inwestycji w 2011 roku:
Przykładowy kod<img src=”roi_chart.gif” alt=” Wykres przedstawiający zwroty z inwestycji w 2011 roku” />
Szczegółowy opis, w jaki sposób zwrot z inwestycji kształtował się w 2011 roku opisujemy w treści, która może znajdować się obok wykresu lub na osobnej stronie. - Ozdobny obrazek przedstawiający poziomą linię, pełniącą funkcję separatora:
Przykładowy kod<img src=”separator.gif” alt=”” />
W związku z tym, że obrazek jest tylko ozdobnikiem, nie przekazujemy o nim informacji.
Częstym błędem, popełnianym przez projektantów lub redaktorów stron w takiej sytuacji jest uzupełnianie atrybutu znakami *, - , spacji, itp. lub słowami „obrazek”, „separator”.
Nie wolno go uzupełniać tekstem, ponieważ zaciemnia odbiór strony przez użytkowników, korzystających z programów czytających. Nie wolno również w takim przypadku pominąć atrybutu alt, ponieważ program czytający odczyta nazwę pliku, a ta może nie być jednoznaczna (img_x_000991234.jpg).
Przykładowy błędny kod<img src=”separator.gif” />
Atrybut alt MUSI BYĆ PUSTY.
Najlepszym rozwiązaniem jest „ozdabianie” stron przy pomocy CSS, np:
Przykładowy kod
.separator {
width:100%;
height: 5px;
background: url('/images/separator.gif') repeat-x;
margin:10px 0;
}
<div class=”separator”></div> - Obrazek jest samodzielnym linkiem:
Przykładowy kod<a href="ofirmie.html">
<img src="ofirmie.gif" alt="O firmie" />
</a>
Musimy uzupełnić atrybut alt tak, aby jasno precyzował, dokąd nas zaprowadzi lub jaką akcję wykona. - Obrazek wraz z przylegającym tekstem jest linkiem:
Przykładowy kod
<a href="ofirmie.html">
<img src="icon_ofirmie.gif" alt="" /> O firmie
</a>
Dlaczego akurat w tym przypadku atrybut alt musi być pusty skoro jeden przykład wyżej pisaliśmy, że musi być uzupełniony? Za odpowiedź posłużą nam poniższe NIEPOPRAWNE przykłady:
Przykładowy błędny kod
<a href="ofirmie.html">
<img src="icon_ofirmie.gif" alt="O firmie" /> O firmie
</a>
<a href="ofirmie.html">
<img src="icon_ofirmie.gif" alt="O firmie" />
</a>
<a href="ofirmie.html">
O firmie
</a>
W obu przypadkach programy czytające odczytają atrybut alt oraz treść linku jeden po drugim: „o firmie o firmie” powodując tak zwany efekt jąkania. - Obrazek jest aktywną mapą graficzną (nie mylimy z mapą kartograficzną)
Przykładowy kod<img src="human.jpg" usemap="#human_map"
alt="Wybierz obszar aby dowiedzieć się więcej o częściach ciała człowieka." />
<map id="human_map " name="human_map">
<area shape="rect" coords="10,10,20,20" href="head.html" alt="Głowa" />
<area shape="rect" coords="0,0,80,80" href="hand.html" alt="Ręka" />
<area shape="rect" coords="0,0,180,180" href="leg.html" alt="Noga" />
</map>
Zauważmy, że zarówno obrazek, jak i każdy obszar mapy zawiera atrybut alt.
Obrazek poprzez alt „Wybierz obszar...” informuje o tym, że jest aktywny. Każdy obszar <area> informuje o celu. - Zabezpieczenie antyspamowe CAPTCHA
Zazwyczaj CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) wymaga od użytkownika, aby przepisał zniekształcony ciąg znaków z obrazka w odpowiednie pole tekstowe formularza. Tego typu rozwiązanie jest w 100% niedostępne dla osób niewidomych, korzystających z programów czytających. Nie możemy do CAPTCHA dodać atrybutu alt, ponieważ zabezpieczenie straci sens. Zatem musimy unikać tego typu rozwiązań.
Jeśli jednak istnieje nad nami jakaś siła wyższa i koniecznie musimy zastosować zabezpieczenie, rozważmy przynajmniej dwa rozwiązania: - Zapewniamy użytkownikowi odczytanie zniekształconego ciągu znaków zarówno poprzez obrazek (oczywiście z atrybutem alt np. ”Przepisz wyraz z obrazka”) jak i poprzez odtworzenie pliku audio (jeśli link do pliku audio będzie obrazkiem, w atrybucie alt możemy wpisać „Przepisz usłyszane w pliku dźwiękowym słowo”),
- Możemy zadać przy pomocy tekstu proste pytanie lub zadanie matematyczne (unikamy całek potrójnych, różniczek i funkcji trygonometrycznych oraz nie wnikamy w skuteczność tej metody).
Przykładowy kod
<p>W celu utrudnienia rozsyłania spamu przez automaty, proszę rozwiązać proste zadanie matematyczne.
Dla przykładu: 2+1 daje 3.</p>
<label for="captcha">Zadanie matematyczne: 2+9+2 daje</label>
<input id="captcha" type="text" name="captcha" title="Tutaj wpisz rozwiązanie" /> - Obrazek jest przyciskiem formularza:
Przykładowy kod<form action="" method="post">
...
...
<input type="image" name="submit" src="butForm.png" alt="Zarejestruj się" />
</form>
Musimy pamiętać, że dzięki znacznikowi <input> możemy tworzyć kontrolki o różnych funkcjonalnościach, jednak atrybut alt stosujemy TYLKO dla graficznych przycisków formularza.
Jeśli mówimy o tekstach alternatywnych, nie możemy zapomnieć o takich nietekstowych elementach, jak: animacje, czy np. pola formularzy.
Przykład osadzenia animowanego obiektu:
Przykładowy kod
<object type="application/x-shockwave-flash" data="anim.swf" width="300" height="100">
<param name="movie" value="anim.swf" />
...
<p>Alternatywny tekst informujący o zawartości animacji lub jej funkcjonalności</p>
</object>
Przykład poprawnego opisania pola formularza.
(W tym miejscu zaznaczymy tylko problem, który w szerszym kontekście opiszemy w dalszej części podręcznika - Wytyczna 1.3.1)
Przykładowy kod
<label for="form_name">Imię:</label>
<input type="text" id="form_name" name="form_name" value=”” />
<label for="form_sex_w">Kobieta:</label>
<input type="radio" id="form_sex_w" name="form_sex" value=”Kobieta” />
Na koniec ostatni przykład, nieczęsto spotykany, z którym mogą być problemy w zrozumieniu, pomimo że jest on tekstowy. Chodzi o tzw. Leet speak - internetowy slang lub ASCI Art. – obrazki powstałe za pomocą znaków ASCII, które stawiane są na obszarze o stałej szerokości kolumn oraz o stałej wysokości znaków. Poniżej przykłady poprawnego umieszczania ww. elementów.
Przykładowy kod dla leet speak
<abbr title="Fundacja Widzialni"> fUnd4Cj4 w1D214Ln1 </abbr>
Przykładowy kod dla ASCI Art.
<a href="#asciiart">Pomiń obrazek ASCII przedstawiający czołg i ciężarówkę</a>
<a name="asciiart></a>
Źródło obrazka: wikipedia.org
Powrót do: Wytyczna 1.1 Tekst alternatywny
Dołącz do nas