Podano fragment kodu HTML, który nie przechodzi walidacji. Problemy z walidacją tego kodu będą dotyczyć: <!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
</head>
<body>
<img src="obraz.gif">
<br>
<img src="obraz.gif">
</body>
</html>
W tym zadaniu kluczowy był brak atrybutu alt w znaczniku <img>. To jest jeden z tych wymagań, które na pierwszy rzut oka mogą wydawać się tylko formalnością, a jednak mają ogromne znaczenie, szczególnie z punktu widzenia dostępności. Standardy W3C (zwłaszcza WCAG) jasno mówią, że każdy obrazek w HTML powinien mieć opis alternatywny, czyli właśnie atrybut alt. Dzięki temu osoby korzystające z czytników ekranu albo mające wyłączone ładowanie grafik, czy nawet boty indeksujące wyszukiwarki, wiedzą, co obrazek przedstawia lub jaką pełni funkcję. Jeżeli alt jest pusty, to też jest dozwolone, ale wtedy obrazek powinien być czysto dekoracyjny, a tutaj ewidentnie nie ma żadnego alt. Przykład praktyczny: jeśli budujesz stronę dla urzędu, sklepu internetowego albo jakąkolwiek witrynę publiczną, brak alt przy obrazkach to poważny minus jakościowy i prawny. Nawet na prostych stronach wizytówkach może się to odbić negatywnie na SEO czy po prostu na wygodzie użytkownika. Ja kiedyś przez taki drobiazg nie przeszedłem walidacji projektu, więc uczulam na to każdą osobę, która zaczyna z HTML-em – zawsze pamiętaj o atrybucie alt. To nie jest coś, co można ignorować, bo przeglądarki tego nie „wybaczą” podczas walidacji, a użytkownicy mogą na tym stracić. Szczerze, moim zdaniem to jeden z tych podstawowych nawyków, które warto sobie wyrobić już na starcie.
Patrząc na fragment kodu, można zauważyć kilka miejsc, które czasem wprowadzają w błąd osoby uczące się HTML-a, szczególnie jeśli ktoś nie śledzi na bieżąco aktualnych specyfikacji. Zacznijmy od zamknięcia znaczników <br> i <img>. W HTML5 oba te tagi mogą być zapisywane jako samodzielne, bez ukośnika (tzn. nie trzeba pisać <br /> czy <img />). To, że w starszych materiałach lub w XHTML-u stosowało się ukośnik przed zamknięciem, wynikało z wymagań tamtych standardów, ale obecnie walidatory nie traktują to już jako błąd. Często spotyka się przekonanie, że każda para tagów musi być zamknięta, co nie zawsze jest prawdą w przypadku tzw. self-closing tags w HTML. Jeśli chodzi o duplikację nazwy pliku graficznego – powielanie atrybutu src z tą samą wartością w dwóch obrazkach nie stanowi żadnego problemu z punktu widzenia składni czy walidacji HTML. To jest po prostu dwukrotne użycie tego samego obrazka i nie wpływa na poprawność kodu. Czasami osoby początkujące myślą, że takie powtórzenia mogą być błędem, bo wydaje się to nieoptymalne, ale walidator HTML patrzy wyłącznie na poprawność struktury i wymaganych atrybutów. Najpoważniejszym problemem, który rzeczywiście zostanie wychwycony przez walidator, jest brak atrybutu alt w znaczniku <img>. To właśnie jego brak narusza wymagania dostępności i standardów HTML. W praktyce, jeśli dążymy do zgodności z HTML5 i zasadami web accessibility, zawsze trzeba dodawać alt, bo to jest istotne dla użytkowników i systemów wspierających. Moim zdaniem, wiele osób nadmiernie skupia się na detalach typu ukośniki czy powtórzenia obrazków, a nie zawsze zwraca uwagę na aspekt dostępności, który jest obecnie jednym z ważniejszych wymogów jakościowych w branży webowej.