Wpadki i wypadki #9

31 maja 2017 przez Comandeer | Opublikowany w Wpadki i wypadki

4

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

Komentarze 4 komentarze

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 😀

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.

https://www.w3.org/TR/2016/REC-html51-20161101/semantics-embedded-content.html#when-a-text-alternative-is-not-available-at-the-time-of-publication

Zgodnie z tym fragmentem specyfikacji (w czytaniu jej ekspertem nie jestem, więc mogę się mylić), w ostateczności można pominąć atrybut alt? Co na ten temat sądzisz?

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].

Napisz komentarz

Uwaga! Uprasza się komentujących, którzy chcą obrazić autora, aby najpierw dokonali niezbędnego researchu jego osoby. Z góry dziękujemy za poświęcony czas.