WCAG 2.0 - Wytyczna 1.1 Tekst alternatywny - 1.1.1 Informacja nietekstowa (A)

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