LepszyWeb.pl. Pracownia Dostępności Cyfrowej

Demo Przed i Po: Dostępna strona Ankieta z komentarzami

Ulepsz witrynę, stosując Web Content Accessibility Guidelines (WCAG) 2.1

Demo zaczyna się tutaj

Ruch: Roboty budowlane na głównej drodze

Dzisiaj: Czwartek 25 stycznia 2012, Przejaśnienia, 23°C


Adnotacje

Uwaga 01: Zapewnione instrukcje dotyczące formularzy

Podano instrukcje dotyczące formularzy, szczególnie w odniesieniu do wymaganych pól.

<form action="" method="post"> <p>Pola są wymagane, jeśli nie zaznaczono inaczej.</p>
Kryterium sukcesu 3.3.2 - Etykiety lub instrukcje
Technika ogólna G184: Zapewnienie instrukcji tekstowych na początku formularza lub zestawu pól opisujących niezbędne dane wejściowe

Wróć do demo

Uwaga 02: Przyciski radiowe są pogrupowane w ramach kodu

Przyciski radiowe pogrupowane elementem fieldset i opisane za pomocą elementu legend.

<fieldset id="park"> <legend>Favorite Park</legend> ... </fieldset>
Kryterium sukcesu 3.3.2 - Etykiety lub instrukcje
Technika HTML H71: Zapewnienie opisu dla grup formantów formularzy przy użyciu elementów fieldset i legend

Wróć do demo

Uwaga 03: Przycisk radiowy jest powiązany z jego etykietą

Przycisk radiowy jest powiązany z etykietą "Żaden" przy użyciu elementu label.

<input type="radio" name="res" id="nn" value="1"> <label for="nn">Żaden</label> 
Kryterium sukcesu 3.3.2 - Etykiety lub instrukcje
  • Technika ogólna G162: Pozycjonowanie etykiet w celu maksymalizacji przewidywalności relacji
  • Technika HTML H44: Używanie elementów etykiet do kojarzenia etykiet tekstowych z formantami formularzy

Wróć do demo

Uwaga 04: Pole wyboru ma tytuł

Pole wyboru jest oznaczone za pomocą tego elementu title.

<select name="cc" id="cc" title="Światła Miasta"> 
Kryterium sukcesu 3.3.2 - Etykiety lub instrukcje
Technika HTML H65: Używanie atrybutu title do identyfikowania formantów formularzy, gdy nie można użyć elementu etykiety

Wróć do demo

Uwaga 05: Pole wyboru z ulepszoną funkcjonalnością klawiatury

Pozycje na tej długiej liście są pogrupowane i posortowane według miast, a nie według kraju, aby ułatwić efektywne korzystanie z klawiatury.

Kryterium sukcesu 2.1.1 - Klawiatura
  • Technika ogólna G202: Zapewnienie kontroli klawiatury dla wszystkich funkcji
  • Technika HTML H91: Korzystanie z formantów formularzy HTML i linków
  • Używanie unikatowych kombinacji liter, aby rozpocząć każdy element listy (przyszły link)
Kryterium sukcesu 2.4.1 - Możliwość pominięcia bloków
  • Technika HTML H69: Dostarczanie elementów nagłówków na początku każdej sekcji treści
  • Zapewnienie dostępu do klawiatury dla ważnych linków i formantów formularzy (przyszły link)

Wróć do demo

Uwaga 06: Znacząca sekwencja czytania

Sekwencja etykiet i pól wprowadzania danych ma sens, gdy są odczytywane w kolejności, w jakiej pojawiają się w kodzie. Pola wejściowe są powiązane z ich etykietami za pomocą elementu label.

<p id="namenewsletter" class="input">
<label for="n">Nazwa:</label>
<input type="radio" name="t" id="mr" value"mr" title="title"><label for="mr">Pan</label>
<input type"radio" name="t" id="mrs" value="mrs" title="title"><label for="mrs">Pani</label>
<input type="text" name="n" id="n" size="30" style="margin-left: 0.5em;"></p>
<p id="emailinput" class="input" style="width: 16em; float: left; margin-top: 0.5em;">
<input type="text" name="em" id="em" size="20"><br><label for="em">Adres e-mail</label></p>
<p id="emailvalid" class="input" style="width: 16em; float: left; margin-top: 0.5em;">
<input type="text" name="ev" id="ev" size="20"><br><label for="ev">Powtórz adres e-mail</label></p>
Kryterium sukcesu 1.3.2 - Zrozumiała kolejność
Technika ogólna G57: porządkowanie treści w znaczącej kolejności
Kryterium sukcesu 2.4.3 - Kolejność fokusa
Technika ogólna G59: Umieszczanie elementów interaktywnych w kolejności następującej po sekwencjach i relacjach w treści

Wróć do demo

Uwaga 07: Dane tabeli zostały poprawnie uporządkowane

Dane w tej tabeli są uporządkowane przy użyciu odpowiednich struktur tabel, takich jak elementy th i td.

<th scope="row">Nie lubię<th>
...
<th scope="row">Nie lubię<th>
Kryterium sukcesu 1.3.1 - Informacje i relacje
  • Technika ogólna G140: Oddzielanie informacji i struktury od prezentacji w celu umożliwienia różnych prezentacji
  • Technika HTML H51: Używanie znaczników tabel do prezentacji informacji tabelarycznych
  • Technika HTML H63: Używanie atrybutu scope do kojarzenia komórek nagłówka i komórek danych w tabelach danych

Wróć do demo