Demo Przed i Po: Dostępna strona Szablon z komentarzami
Ulepsz witrynę, stosując Web Content Accessibility Guidelines (WCAG) 2.1
Ulepsz witrynę, stosując Web Content Accessibility Guidelines (WCAG) 2.1
Strony są jednoznacznie identyfikowane za pomocą elementu title , aby czytelnicy wiedzieli, na której stronie się znajdują. Również układ strony jest zorganizowany za pomocą CSS, a nie z elementów table, co pomaga utrzymać kolejność czytania dopasowaną do wizualnej prezentacji.
<title>Witamy w Światłach Miasta!</title>Uwaga: Ulepszenia w szablonie są powielane w całej witrynie.
titleSkip-links służą do ominięcia nagłówków i bloków nawigacyjnych, które są powtarzane na każdej stronie. Dzięki temu korzystanie z witryny jest bardziej skuteczne dla niektórych czytelników i użytkowników klawiatury. Skip-links pojawiają się, gdy są one aktywowane za pomocą klawiatury, ale najlepiej są one prezentowane dla wszystkich użytkowników.
Uwaga: Ulepszenia w szablonie są powielane w całej witrynie.
Wybranie pozycji z rozwijanego menu powoduje automatyczne przekierowanie użytkownika na inną stronę. Jest to mylące i dezorientujące dla niektórych użytkowników, zwłaszcza użytkowników klawiatury, którzy próbują przejść z jednego elementu do drugiego, zamiast aktywnie wybierać element.
Alternatywna tekstowa dla tego obrazu tekstu zawiera słowa, które są wyświetlane na obrazie.
<img src="../../img/after/toplogo.png" alt="Światła Miasta: Twoje okno na miasto."> Uwaga: Ulepszenia w szablonie są powielane w całej witrynie.
Skrypt tworzy nowy węzeł Document Object Model (DOM) i używa go document.innerHTML do dodawania treści. Istnieje również redundantny skrypt po stronie serwera, który wstawia domyślną treść, na wypadek gdyby JavaScript nie został aktywowany. To nie jest wymaganie, ale dobra praktyka tam, gdzie to możliwe.
var tochange = document.createElement("span"); tochange.innerHTML = today;Uwaga: Ulepszenia w szablonie są powielane w całej witrynie.
Lewe menu nawigacyjne jest oznaczone jako lista, a każde łącze nawigacyjne jest elementem listy.
<ul>
...
<li class="news"><a href="../news/annotations">Nowiny</a></li>
...
</ul>Uwaga: Ulepszenia w szablonie są powielane w całej witrynie.
Szablon sugeruje stylizację nagłówków za pomocą odpowiedniego znacznika w kodzie HTML.
<h1>Szablon</h1>Uwaga: Ulepszenia w szablonie są powielane w całej witrynie.
Pozycje menu to tekst, który jest wizualnie stylizowany przy użyciu CSS, a nie obrazy tekstu i JavaScript dla efektów dekoracyjnych. Szczególną uwagę zwrócono na maksymalizację klikalności.
<li class="survey"><a href="../survey/survey.html">Ankieta</a></li>Uwaga: Ulepszenia w szablonie są powielane w całej witrynie.
Szablon sugeruje użycie tekstu linku zawierającego krótki opis oprócz "read more...", aby tekst linku był bardziej opisowy i aby przekazać cel linku. Używa również kolorów różniących się od otaczającego tekstu, aby ułatwić identyfikację łącza.
Uwaga: Ulepszenia w szablonie są powielane w całej witrynie.
Współczynnik kontrastu pomiędzy kolorem pierwszego planu (# 000000) a kolorem tła (# c0c0c0) wynosi 11,5: 1 wystarczająco wysoko, aby większość ludzi mogła je rozróżnić.
.datahead { background-color: #c0c0c0; }
.sfdtable { color: #000000; }Uwaga: Ulepszenia w szablonie są powielane w całej witrynie.