Uwaga, uwaga! Nadeszła wiekopomna chwila. Jestem gotowy, by ogłosić wyniki konkursu, w którym wygrać można “Inclusive Design Patterns” z autografem autora, Heydona Pickeringa. Kto wygrał? A kto nie? A jakie właściwie jest poprawne rozwiązanie? Och! Tyle niewiadomych!
Zacznę od tego, że otrzymałem sporo zgłoszeń — fantastycznie! Powstrzymało mnie to jednak od szybkiego ogłoszenia wyników. Przepraszam. Do wszystkiego dołożyła się praca. Ale najważniejsze, że już wiadomo, co i jak.
Większość z Was podała całkiem niezłe rozwiązania. Mniej lub bardziej poprawne, ale ciekawe. Naturalnie, jak to z HTML bywa, nie ma jednego przepisu na sukces. Warto jednak wspomnieć o tym, dlaczego oryginalny dokument był cienki jak kompot z desek.
Lista baboli, które popełniłem świadomie
- W dokumencie brakowało nagłówkowej deklaracji wersji języka HTML (doctype).
- Nie zdefiniowałem zestawu znaków za pomocą znacznika meta. Nie wskazałem też na język polski jako język podstawowy dokumentu.
- Użyłem “|” (pipe) jako znaku graficznego w tytule. To nic nie znaczy. Czytniki ekranowe przeczytają bzdurę. Nie powinniśmy używać symboli jako znaków graficznych.
- Style in-line. O wiele lepiej trzymać je w zewnętrznym pliku css, odseparowując warstwę prezentacji od zawartości. W ten sposób zacząłem od zdefiniowana brzydkiego koloru tła. Ha!
- Brakowało nam h1, nagłówka pierwszego poziomu, a późniejsza kolejność nie była właściwa. Oczywiście, abstrahuję od idiotycznej zawartości nagłówków w rodzaju “Zadanie jest proste”.
- Pierwsze nagłówki ująłem w element header (oryginalnie nie były ujęte w żadnym elemencie). Lepiej odpowiada to pożądanej, semantycznej strukturze dokumentu.
- Element div i span tak naprawdę nie są potrzebne (linia 9); o wiele lepiej ująć ten tekst w paragrafie, który potem można zaadresować za pomocą styli kaskadowych (zamiast styli deklarowanych in-line).
- Zadeklarowana in-line definicja kolorów żółtego i pomarańczowego nie spełnia wymagań dotyczących minimalnego kontrastu. Mówiąc inaczej, cholernie trudno cokolwiek przeczytać.
- Element u został porzucony w html5. Zamiast niego, powinniśmy użyć deklaracji stylu kaskadowego.
- Główna zawartość ujęta w element main nabiera od razu innej semantycznej wartości.
- Link do specyfikacji WCAG ma idiotyczną etykietę “tutaj”. O wiele lepiej jest ująć go w “zalecenia WCAG”.
- Lista, skonstruowana naprędce za pomocą elementów br to kiepski pomysł, gdyż nie łączymy w ten sposób jej pozycji w semantyczną strukturę (linia 12 starego pliku). Trzeba użyć tagu ul/ol (można by argumentować, że ol jest lepsze, gdyż pokazuje kolejność wymaganych w konkursie czynności).
- Element div użyty w linii 15 starego pliku nie jest tam potrzebny. Zamiast tego, lepszy będzie paragraf, który nada semantyczne znaczenie zawartości.
- W linii 16 brakowało zamknięcia znacznika p i odsyłacza w tagu a.
- Elementy br w linii 17 powinny zostać zastąpione zakończeniem paragrafu.
- Obraz w następnej linii nie zawierał znacznika alt. Posiadał za to parametr width, który powinien zostać określony za pomocą CSS w arkuszu styli.
- Ostatni nagłówek h3 ująłem w znaczniku footer. Trochę bez sensu, że on tam jest, no, ale jest. Dla treści anglojęzycznej brakowało deklaracji lang.
Zapewne to nie wszystko, ale więcej grzechów nie pamiętam. To, co napisałem powyżej pokrywa się z większością “znalezisk” tych z Was, którzy nadesłali poprawne odpowiedzi.
Jeśli macie ochotę spojrzeć na rozwiązanie, to całość dostępna jest na Dropboxie.
Kto wygrał?
Uwaga… To ten moment… Werble… Fanfary… Bum, tarara, bum!
Książkę Hedyona Pickeringa wygrał Wojtek Rymaszewski.
Gratuluję zwycięzcy. Gratuluję też wszystkim z Was, którym chciało się przystąpić do konkursu!
I wracam do przygotowań do warsztatów w Polsce. Jeśli chcesz powiększyć swój arsenał metod, narzędzi i wiedzy, to spojrzyj na to, co będzie działo się w Krakowie. Tymczasem, do przeczytania!