Wytyczna 1.1.1. WCAG 2.0 zaleca, aby informacje nietekstowe na stronach www mogły być przetworzone przez oprogramowanie użytkownika i dostarczać komplet informacji, jakie ze sobą niosą. Jak wygląda sytuacja w przypadku grafik służących jedynie do uatrakcyjnienia wyglądu twojego serwisu?
Ilustracje umieszczone na stronie są dla osób dobrze widzących atrakcyjną formą przekazu. Ale dla osób niewidomych lub słabo widzących, które korzystają z czytników ekranu, mogą być niepotrzebnym balastem, zakłócać rozumienie treści, zamiast je poprawiać.
Co zrobić, aby przekazać czytnikom informacje o obrazach? Należy do znacznika img dodać tzw. tekst alternatywny (atrybut alt). Tekst alternatywny powinien zawierać krótki opis szczegółów, jakie zawiera ilustracja.
Jednak istnieją także wyjątki od tej reguły! Jeżeli umieścisz tekst alternatywny w grafikach służących jako elementy ozdobne twojego serwisu, to możesz mocno zniekształcić przekaz. Czytniki przeczytają wszystko, co jest w znaczniku alt. Wyobraź więc sobie, co usłyszy osoba niewidoma, kiedy do każdej tego typu grafiki dodasz tekst alternatywny typu: „separator”, „narożnik lewy”, „krawędź prawa” itp.
Jeżeli do tego typu grafik nie umieścisz w ogóle atrybutu alt, to czytnik przeczyta nazwę pliku. Nazwa ta może być niezrozumiała (np. DCIM_73562.jpg), co także może utrudnić odbiór informacji.
Co w takim przypadku należy zrobić? Jak właściwie definiować obrazy pełniące funkcje ozdobne?
Atrybut alt musi pozostać pusty. Umieścić po prostu atrybut alt z pustą zawartością lub do dekoracji strony stosuj język CSS
Zobacz przykład prawidłowego kodu obrazka dekoracyjnego:
<img src="/separator.jpg" alt="" />