Strona używa skryptów!!!

LepszyWeb.pl. Pracownia Dostępności Cyfrowej

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

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

Demo zaczyna się tutaj

Ruch: Roboty budowlane na głównej drodze Dzisiaj:

Witamy w Światłach Miasta

Światła Miasta to nowy portal dla gości i mieszkańców. Dowiedz się, co się dzieje, zarezerwuj bilety i otrzymuj najnowsze wiadomości.

Po trzech latach starań naukowcy miejscy zgadzają się, że główną przyczyną fali upałów w 2003 roku było gorące powietrze z... 07
06Burmistrz: Tego rodzaju przestępstwa wymagają bardziej wymyślnych, skutecznych kar. Na przykład możemy żądać...
Darowizny z mózgów: Ogromny spadek liczby darowizn w efekcie wielkiego "sukcesu" kampanii 'Wolna jazda, bezpieczne ulice...'

Gdzie indziej w Internecie

 Koncert Świateł Miasta
 
 Sondaż Świateł Miasta
"Więcej parków i więcej zieleni w całym mieście za cenę już nielicznych miejsc parkingowych; jak to wpłynie na ciebie?
Czytaj więcej...

Adnotacje

Uwaga 01: Obraz z nieprawidłowym tekstem alternatywnym

Tekst alternatywny dla tego obrazu tekstu jest zbyt obszerny i nie spełnia celu równoważnego obrazowi. 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: ten błąd pochodzi z projektu szablonu i występuje 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 tekstów alternatywnych, które nie są alternatywami (np. nazwy plików lub tekstu zastępczego)

Wróć do demo

Uwaga 02: Obraz bez tekstu alternatywnego

Ten obraz nie zawiera żadnej alternatywy tekstowej, więc jest nieczytelny dla niektórych czytelników, jeśli obraz jest ważny.

<img src="teaser_right1.jpg" ... >

Uwaga: każdy elementimg powinien mieć atrybut alt. Atrybut powinien być pusty, jeśli obraz powinien zostać zignorowany przez technologię asystującą

Kryterium sukcesu 1.1.1 - Treść nietekstowa
Błąd 65: Niespełnienie kryterium sukcesu 1.1.1 z powodu pominięcia atrybutu alt lub tekstu alternatywnego w elementach img, elementach area i polach typu "image"

Wróć do demo

Uwaga 03: Link nie różni się wizualnie

Link "Fala upałów związana z klimatyzacją" nie jest dostatecznie jasny, ponieważ przypomina nagłówek i nie będzie uznawany przez wielu czytelników za łącze.

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)
Wytyczna 3.1 - Czytelność
Sugerowana technika: Twórz linki wyróżnione wizualnie (przyszły link)

Wróć do demo

Uwaga 04: Obraz z nieodpowiednią alternatywą tekstową

Alternatywna treść tego obrazu jest dostępna tylko w atrybucie title, co nie jest przydatne dla wielu czytelników. Co więcej, alternatywa "Obraz" nie opisuje obrazu.

<div style="background: url(BrainInJar.jpg)" title="Obraz" ... >

Uwaga: Techniki modyfikacji tego obrazu różnią się w zależności od tego, czy autor uważa ten obraz za czysto dekoracyjny, czy jako informacyjny.

Kryterium sukcesu 1.1.1 - Treść nietekstowa
  • Błąd 3: Niespełnienie kryterium sukcesu 1.1.1 z powodu użycia CSS do umieszczenia obrazów, które przekazują ważne informacje
  • Błąd 30: Niespełnienie kryterium sukcesu 1.1.1 i 1.2.1 z powodu użycia tekstów alternatywnych, które nie są alternatywami (np. nazwy plików lub tekstu zastępczego)

Wróć do demo

Uwaga 05: Tekst linku nie jest opisowy

Tekst linku "Czytaj więcej..." nie jest opisowy, aby przekazać cel linku.

Kryterium sukcesu 2.4.4 - Cel linku (w kontekście)
Błąd 63: Niespełnienie 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 84: Niespełnienie Kryterium sukcesu 2.4.9 z powodu użycia niespecyficznego linku, takiego jak "Kliknij tutaj" lub "Czytaj więcej", bez mechanizmu zmiany tekstu linku na konkretny tekst.

Wróć do demo

Uwaga 06: Sekwencja czytania nie ma sensu

Te trzy kolumny tekstu wydają się być wizualnie różne, ale zgodnie z kodem znaczników pojawiają się jako jeden tekst bieżący. Niektórzy użytkownicy przeczytają, co następuje:

"Po trzech latach starań naukowcy Burmistrz: Tego rodzaju Darowizny z mózgów: 
Ogromny miejscy zgadzają się, że główną przestępstwa wymagają bardziej spadek liczby darowizn 
w efekcie przyczyną fali upałów w 2003 wymyślnych, skutecznych kar. Na wielkiego "sukcesu" kampanii 
roku było gorące powietrze z... przykład możemy żądać 'Wolna jazda, bezpieczne ulice..."
Kryterium sukcesu 1.3.1 - Informacje i relacje
Błąd 2: 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
Kryterium sukcesu 1.3.2 - Zrozumiała kolejność
  • Błąd 1:Niespełnienie Kryterium sukcesu 1.3.2 z powodu zmiany znaczenia treści poprzez umieszczenie informacji w CSS
  • Błąd 49: Niespełnienie Kryterium sukcesu 1.3.2 z powodu użycia tabeli układu HTML, która nie ma sensu po linearyzacjimake sense when linearized

Wróć do demo

Uwaga 07: Link graficzny ma pusty tekst alternatywny

Obraz ma alternatywę w postaci pustego tekstu, ale jest to jedyna treść w linku, tak że cel linku jest niejasny dla niektórych użytkowników.

<a href="news.html" ... ><img src="morearrow.gif" alt="" ... ></a>
Kryterium sukcesu 2.4.4 - Cel linku (w kontekście)
Błąd 89: Niespełnienie 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
Kryterium sukcesu 2.4.9 - Cel linku (z samego linku)
Błąd 89: Niespełnienie 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
Kryterium sukcesu 4.1.2 - Nazwa, rola, wartość
Błąd 89: Niespełnienie 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

Wróć do demo

Uwaga 08: Obraz dekoracyjny bez pustego tekstu alternatywnego

Ten obraz ma tekst alternatywny "punktor", który nie zawiera żadnych przydatnych informacji. Obraz powinien mieć pustą tekstową alternatywę, aby wskazać, że jest to dekoracyjny obraz, który powinien zostać zignorowany przez technologię wspomagającą.

<img src="list_bullets.svg" alt="punktor" ... >

Note: The image can also be dispayed using CSS rather than the img element.

Kryterium sukcesu 1.1.1 - Treść nietekstowa
Błąd 39: Niespełnienie kryterium sukcesu 1.1.1 ze względu na dostarczenie tekstu alternatywnego, który nie jest pusty (np. alt="spacer" lub alt="obraz") dla obrazów, które powinny zostać zignorowane przez technologię asystującą

Wróć do demo

Uwaga 09: Wykaz nie jest oznaczony jako lista

Pozycje "Zabójca pszczół" i "Cebula zwyczajna" są sformatowane tak, aby przypominały graficznie listę, ale ta informacja strukturalna nie jest reprezentowana w kodzie HTML.

Kryterium sukcesu 1.3.1 - Informacje i relacje
Błąd 2: 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 10: Obraz z nieprawidłową alternatywą tekstową

Ten obraz ma niepoprawną alternatywę tekstową "1234 56789"; być może dlatego, że alternatywny tekst jest nieaktualny lub zastępczy.

<img src="telefon_white_bg.gif" alt="1234 56789" ... >
Kryterium sukcesu 1.1.1 - Treść nietekstowa
  • Błąd 20: Niespełnienie kryterium sukcesu 1.1.1 i 4.1.2 ze względu na brak aktualizacji tekstów alternatywnych w przypadku wystąpienia zmian w treści nietekstowej
  • Błąd 30: Niespełnienie kryterium sukcesu 1.1.1 i 1.2.1 z powodu użycia tekstów alternatywnych, które nie są alternatywami (np. nazwy plików lub tekstu zastępczego)
  • Błąd 71: Niespełnienie kryterium sukcesu 1.1.1 ze względu na używanie podobieństw tekstu w celu przedstawienia tekstu bez zapewniania tekstu alternatywnego

Wróć do demo