Wpadki i wypadki #9

Kolejne wydanie Wpadek i wypadków. Dzisiaj w numerze nie przyczepię się do nikogo, przyczepiając się do (niemal) wszystkich…

Od pewnego czasu udzielam się na Facebooku na kilku grupach przeznaczonych dla początkujących webdeveloperów, m.in. HTML5 i CSS3: pierwsze kroki czy Weekly WebDev Challenge. Bardzo często pojawiają się na tych grupach strony do oceny, co też bardzo chętnie czynię (WebKrytyk z człowieka nie wychodzi nigdy…). I prawie we wszystkich stronach pojawia się ta sama wpadka i ten sam wypadek: niepoprawne teksty alternatywne dla obrazków. Są dwa klasyczne przypadki: logo i ikonki.

W przypadku logo najczęściej popełnianą wpadką jest nadanie mu [alt=logo]. Przecież to zupełnie nie wyjaśnia, co ten obrazek robi. Każdy tekst alternatywny zależy bowiem od kontekstu. Jeśli w lewym górnym rogu strony znajduje się jej logo, to symbolizuje ono tożsamość witryny. Zatem fakt, że jest to logo, jest całkowicie nieistotny i nie oddaje sensu obrazka. Sens obrazka oddaje nazwa strony. W przypadku tego bloga mogłoby to wyglądać tak:

<img src="/logo.svg" alt="Webkrytyk.pl">

Tyle i aż tyle. Kiedy natomiast logo powinno mieć [alt=logo]? W sytuacji, gdy istotna jest informacja, że to logo, czyli np. w galerii naszych prac. Wówczas można się pochwalić, że zrobiliśmy jakieś logo. Niemniej wypada je opisać:

<section id="prace">
	<h2>Nasze prace</h2>
	<ul>
		<li>
			<img src="/logo.svg" alt="Logo dla strony Webkrytyk.pl, przedstawiające czarny kwadrat na czarnym tle">
		</li>
	</ul>

Jeśli chodzi natomiast o ikonki i inne ozdobniki, sprawa jest prosta: jeśli są jedynym nośnikiem informacji (nie ma obok nich tekstu), [alt] musi przekazać tę informację. Natomiast jeśli informacja jest przekazywana przez okoliczny tekst, wówczas należy zostawić pusty [alt]. Nie można jednak usunąć tego atrybutu! W takim wypadku czytniki ekranowe przeczytają adres obrazka, a tego raczej nie chcemy.

Dobieranie odpowiedniej treści alternatywnej jest niezwykle subtelnym i trudnym zadaniem – nic dziwnego, że specyfikacja HTML5 poświęca temu zagadnieniu sporo miejsca. Warto te zasady poczytać i pamiętać, że tekst alternatywny zawsze zależy od kontekstu. A najlepszym testem, czy dobrze dobraliśmy kontekst, będzie odsłuchanie strony w czytniku ekranowym i sprawdzenie, czy czytany opis obrazka faktycznie przekazuje sensowną informację (brak nadmiarowej/zduplikowanej/niepotrzebnej informacji to też sensowna informacja!).