Strona używa skryptów!!!

LepszyWeb.pl. Pracownia Dostępności Cyfrowej

Demo Przed i Po: Niedostępna strona Ankieta z komentarzem

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

Demo zaczyna się tutaj

Niebieska kropka z białą literą 'M'. Za logo znajduje się ciemnoniebieski baner z napisem 'Swiatła Miasta', który jest nazwą portalu internetowego. Dalej umieszczono hasło portalu, 'Twoje okno na miasto', napisane pismem odręcznym lekko pochylone w poprzek górnego paska.
Ruch: Roboty budowlane na głównej drodze Dzisiaj:

Sondaż Świateł Miasta

Ankieta tygodnia: Więcej parków miejskich - strata czy zysk?

01
Jaki jest twój ulubiony park miejski?02
03
Żaden
Park Centralny
Park Wielki
Park Jurajski
Park Południowy
Inny

Które miasto uważasz za najbardziej ekologiczne?
05 04

Czy chcesz otrzymywać bezpłatny biuletyn?06
Nazwa: Pan Pani



               
Adres e-mail                Powtórz e-mail

 



Adnotacje

Uwaga 01: Brak instrukcji niezbędnych do wypełnienia formularza

Brakuje instrukcji niezbędnych do wypełnienia formularza, szczególnie w odniesieniu do wymaganych pól.

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 nie zgrupowane w kodzie

Przyciski radiowe nie są zgrupowane przy użyciu elementu fieldset i nie są opisane przy użyciu elementu legend.

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 legendy

Wróć do demo

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

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

<input class="lign" type="radio" name="res" value="1">
Kryterium sukcesu 3.3.2 - Etykiety lub instrukcje
Technika ogólna G131:Zapewnienie opisowych etykiet

Wróć do demo

Uwaga 04: Pola wyboru nie można łatwo użyć za pomocą klawiatury

Pozycje na tej długiej liście nie są pogrupowane, aby ułatwić efektywne użycie za pomocą klawiatury.

Uwaga: Pozycje na tej liście posortowane są według kraju, a nie miasta, co utrudnia użytkownikom wykonanie żądanego zadania.

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: Zapewnienie 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 05: W polu wyboru brakuje podpisu

W polu wyboru brakuje napisów za pomocą atrybutu title lub elementu label.

<select name="cc"> ... </select> 
Kryterium sukcesu 3.3.2 - Etykiety lub instrukcje

Wróć do demo

Uwaga 06: Sekwencja czytania jest nielogiczna

Sekwencja etykiet i pól wejściowych nie jest zgodna z porządkiem wizualnym i nie jest poprawna, gdy formularz jest nawigowany za pomocą klawiatury. Sekwencja jest następująca:

Nazwa: [przycisk radiowy] Pan [przycisk radiowy] Pani [pole tekstowe] [pole tekstowe] [pole tekstowe] Adres e-mail Powtórz e-mail

Uwaga: Pierwsze [pole tekstowe] dotyczy "adresu e-mail", drugie - "Nazwy", a trzecie - "Powtórz e-mail", ale nie jest to jasne, ponieważ pola formularza nie są powiązane z ich etykietami.

Kryterium sukcesu 1.3.2 - Zrozumiała kolejność
Błąd F49: Niespełnienie kryterium sukcesu 1.3.2 z powodu użycia tabeli układu HTML, która nie ma sensu po linearyzacji
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
Kryterium sukcesu 3.3.2 - Etykiety lub instrukcje
Technika ogólna G131:Zapewnienie opisowych etykiet

Wróć do demo

Uwaga 07: Sekwencja czytania jest nielogiczna

Dane w tej tabeli są zorganizowane przy użyciu struktur dokumentu, takich jak element p, a nie struktur tabeli, takich jak elementy th i td, tak że kolejność komórek danych nie ma sensu dla niektórych czytników.

<td rowspan="4" bgcolor="#ffffff" style="border-right: 1px dashed silver;">
<p style="background:#DBDBDB;padding-top:3px;padding-bottom:2px;"><br></p>
<p style="margin-bottom:0px;padding-top:3px; padding-bottom:5px" align="right"><strong>Lubię</strong></p>
<p style="margin-top:5px;background:#DBDBDB;padding-top:3px; padding-bottom:4px" align="right"><strong>Nie lubię</strong></p>
</td>
Kryterium sukcesu 1.3.1 - Informacje i relacje
  • Błąd F43: Niespełnienie kryterium sukcesu 1.3.1 z powodu używania znaczników strukturalnych w sposób, który nie odzwierciedla relacji w treści
  • Błąd F2: Niespełnienie kryterium sukcesu 1.3.1 z powodu użycia zmian w prezentacji tekstu w celu przekazania informacji bez użycia odpowiedniego znacznika lub tekstu
  • Technika HTML H51: Używanie znaczników tabel do prezentacji informacji tabelarycznych

Wróć do demo