Strona używa skryptów!!!

LepszyWeb.pl. Pracownia Dostępności Cyfrowej

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

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

Demo zaczyna się tutaj


Adnotacje

Uwaga 01: Tytuł i układ strony powoduje zamieszanie

Ta i wszystkie inne strony są zatytułowane jako "Witamy w Światłach Miasta!" za pomocą elementu title, co powoduje, że dla niektórych czytelników jest niejasne, na której stronie się znajdują. Ponadto układ strony wykorzystuje również głęboko zagnieżdżone elementy table (do 5 poziomów w samym szablonie), które mogą powodować zamieszanie i dezorientację niektórych czytelników.

<title>Witamy w Światłach Miasta!</title>

Uwaga: Błędy w szablonie są powielane w całej witrynie.

Kryterium sukcesu 1.3.1 - Informacje i relacje
Sugerowana technika: Używanie CSS zamiast tabel do układu strony (przyszły link)
Kryterium sukcesu 2.4.2 - Tytuły stron
Błąd F25: Niespełnienie kryterium sukcesu 2.4.2 ze względu na tytuł strony internetowej, która nie identyfikuje treści

Wróć do demo

Uwaga 02: Obraz z nieprawidłową alternatywą tekstu

Tekst alternatywny dla tego obrazu z tekstem jest zbyt obszerny i nie jest równoważny z celem obrazu. Tekst alternatywny jest następujący:

<img src="top_logo.gif" alt="Niebieska kropka z białą literą 'M'. Za logo znajduje się ciemnoniebieski baner z napisem 'Światł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." ... >

Uwaga: Błędy w szablonie są powielane w całej witrynie.

Kryterium sukcesu 1.1.1 - Treść nietekstowa
Błąd 30: Niespełnienie kryterium sukcesu 1.1.1 i 1.2.1 z powodu użycia alternatyw tekstowych, które nie są alternatywne (np. nazwy plików lub tekstu zastępczego)

Wróć do demo

Uwaga 03: Automatyczne przekierowanie strony po zmianie

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ć pozycję.

<select onchange="...">

Uwaga: Błędy w szablonie są powielane w całej witrynie.

Kryterium sukcesu 2.1.1 - Klawiatura
Błąd F54: Niespełnienie kryterium sukcesu 2.1.1 z powodu używania funkcji obsługi zdarzeń specyficznych tylko dla urządzenia wskazującego (w tym gestów)
Kryterium sukcesu 3.2.2 - Podczas wprowadzania danych
Błąd F36: Niespełnienie kryterium sukcesu 3.2.2 z powodu automatycznego przesłania formularza i prezentacji nowej treści bez uprzedniego ostrzeżenia, gdy ostatnie pole formularza ma wartość

Wróć do demo

Uwaga 04: Skrypt nie jest kompatybilny z niektórymi narzędziami

Skrypt wykorzystuje technikę document.write(), której należy unikać. Treść wstawiona w ten sposób do strony nie jest zawarta w Document Object Model (DOM) i może nie być prawidłowo przekazywana do interfejsów API dostępności używanych przez niektóre technologie wspomagające.

document.write(today);

Uwaga: Błędy w szablonie są powielane w całej witrynie.

Wytyczna 4.1 - Kompatybilność
Sugerowana technika: Niewyświetlanie treści opartych na technologiach, które nie są obsługiwane przez dostępność, gdy technologia jest wyłączona lub nie jest obsługiwana.

Wróć do demo

Uwaga 05: Brak mechanizmów pomijania powtarzających się treści

Strona nie oferuje mechanizmów do ominięcia nagłówków i bloków nawigacyjnych, które są powtarzane na każdej stronie. Takie linki pomijające sprawiają, że korzystanie z witryny jest bardziej skuteczne dla niektórych czytelników i użytkowników klawiatury.

Kryterium sukcesu 2.4.1 - Możliwość pominięcia bloków
  • Technika ogólna G1: Dodanie u góry każdej strony linku, który prowadzi bezpośrednio do głównego obszaru zawartości
  • Sugerowana technika: Udostępnianie linków pomijania w celu ulepszenia nawigacji po stronie (przyszły link)

Wróć do demo

Uwaga 06: Tytuły sekcji i śródtytuły nie są oznaczone jako nagłówki

Szablon sugeruje stylizację nagłówków bez użycia odpowiedniego znacznika w kodzie HTML.

<p class="headline">Szablon</p>

Uwaga: Błędy w szablonie są powielane w całej witrynie.

Kryterium sukcesu 1.3.1 - Informacje i relacje
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

Wróć do demo

Uwaga 07: Obrazy bez tekstu alternatywnego

Pozycje w menu nawigacyjnym po lewej stronie to obrazy, które nie mają żadnej alternatywy tekstowej, więc dla niektórych czytelników nie jest jasne, do czego linki się odnoszą.

<a href="..." ... ><img src="..." ... >

Uwaga: Błędy w szablonie są powielane w całej witrynie.

Kryterium sukcesu 1.1.1 - Treść nietekstowa
Błąd F65: Niepowodzenie Kryterium sukcesu 1.1.1 z powodu pominięcia atrybutu alt lub alternatywnego tekstu na elementach img, elementach obszaru i elementach wejściowych typu "image"

Wróć do demo

Uwaga 08: Komponenty strony nie nadają się do ustawienia fokusa

Jest on automatycznie usuwany z pozycji menu za pomocą skryptów, więc niektórzy użytkownicy nie mogą nawigować między tymi elementami.

<a href="..." onfocus="blur();" ... >

Uwaga: Błędy w szablonie są powielane w całej witrynie.

Kryterium sukcesu 2.1.1 - Klawiatura
Błąd F55: Niepowodzenie Kryteriów sukcesu 2.1.1, 2.4.7 i 3.2.1 z powodu użycia skryptu do usunięcia fokusa po otrzymaniu fokusa
Kryterium sukcesu 2.4.7 - Widoczny fokus
Błąd F55: Niepowodzenie Kryteriów sukcesu 2.1.1, 2.4.7 i 3.2.1 z powodu użycia skryptu do usunięcia fokusa po otrzymaniu fokusa
Kryterium sukcesu 3.2.1 - Po oznaczeniu fokusem
Błąd F55: Niepowodzenie Kryteriów sukcesu 2.1.1, 2.4.7 i 3.2.1 z powodu użycia skryptu do usunięcia fokusa po otrzymaniu fokusa

Wróć do demo

Uwaga 09: Tekst linku nie jest opisowy i nie różni się wizualnie

Szablon sugeruje użycie tekstu linku "Czytaj więcej...", który nie jest opisowy, aby przekazać cel linku. Używa również kolorów podobnych do otaczającego tekstu, co utrudnia niektórym użytkownikom identyfikację łącza.

Uwaga: Błędy w szablonie są powielane w całej witrynie.

Kryterium sukcesu 1.4.1 - Użycie koloru
  • Błąd F73: Niespełnienie kryterium sukcesu 1.4.1 z powodu tworzenia łączy, które nie są widoczne dla osób niewidzących kolorów
  • Technika ogólna G183: Stosując współczynnik kontrastu 3: 1 z otaczającym tekstem i dostarczając dodatkowe wizualne wskazówki skupienia dla łączy lub kontrolek, w których stosowany jest sam kolor do ich identyfikacji
Kryterium sukcesu 1.4.8 - Prezentacja wizualna
Sugerowana technika: Twórz linki wyróżnione wizualnie (przyszły link)
Wytyczna 2.4 - Nawigacja
Sugerowana technika: Twórz linki wyróżnione wizualnie (przyszły link)
Kryterium sukcesu 2.4.4 - Cel linku (w kontekście)
Błąd F63: Niepowodzenie Kryterium sukcesu 2.4.4 z powodu podania kontekstu łącza tylko w treści, która nie jest powiązana z linkiem
Kryterium sukcesu 2.4.9 - Cel linku (z samego linku)
Błąd F84: Niepowodzenie Kryteriów sukcesu 2.4.4, 2.4.9 i 4.1.2 ze względu na brak podania dostępnej nazwy obrazu, który jest jedyną treścią w linku.
Wytyczna 3.1 - Czytelność
Sugerowana technika: Twórz linki wyróżnione wizualnie (przyszły link)

Wróć do demo

Uwaga 10: Niewystarczający kontrast kolorów

Współczynnik kontrastu między kolorem pierwszego planu (# 41545D) a kolorem tła (# A9B8BF) jest zbyt niski, aby niektórzy mogli je rozróżnić.

{color:#41545D; background-color:#A9B8BF;"}

Uwaga: Błędy w szablonie są powielane w całej witrynie.

Kryterium sukcesu - 1.4.3 - Kontrast (minimalny)
Technika ogólna G18: Zapewnienie, że istnieje kontrast wynoszący co najmniej 4,5: 1 między tekstem (i obrazami tekstu) a tłem za tekstem
Kryterium sukcesu - 1.4.6 - Wzmocniony kontrast
Technika ogólna G17: Zapewnienie, że istnieje kontrast wynoszący co najmniej 7: 1 między tekstem (i obrazami tekstu) a tłem za tekstem

Wróć do demo