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!).

4 komentarze do “Wpadki i wypadki #9”

  1. No a ja się uczepię tego, że stronka nie ma wersji mobilnej 😀 Tekst jest okrutnie mały, kod nieczytelny więc opcje są dwie – albo wytrzeszczać gały albo włączyć wersję mobilną jaką proponuje Chrome, z dobrej jakości tekstem ale bez stylów i kodu 😀 Wiem że brak czasu, że to inicjatywa zapewne bez bezpośredniego z niej zysku, ale artykuł po artykule tracę wzrok 😀

    1. Znam dobrego okulistę, mogę podrzucić namiary 😛

      A tak na serio, kumpel już zapowiedział, że pomoże i być może już wkrótce zrobimy coś sensownego z WK.

    1. Choć jest to dozwolone przez specyfikację HTML5, to nie jest to zgodne z wymogami WCAG odnośnie dostarczania tekstu alternatywnego dla obrazków. Czytnik ekranowy w tym wypadku i tak bowiem przeczyta adres obrazka (testowane w VoiceOver).

      W takim przypadku prawdopodobnie dałbym obrazkowi pusty [alt] tak, żeby zostało przeczytane wyłącznie figcaption. Albo, jeszcze lepiej, połączył obrazek z figcaption przy pomocy [aria-labelledby].

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.