LepszyWeb.pl. Pracownia Dostępności Cyfrowej

Demo Przed i Po: Dostępna strona Bilety 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

Światła Miasta - Oferta biletów

01

Światła Miasta we współpracy z firmami z całego świata z dumą oferują specjalne bilety, aby zobaczyć tych wspaniałych artystów - Les Garçons & The Obelisks

05
Ceny biletów na koncerty zespołów Les Garçons oraz The Obelisks
Dorośli Tylne siedzenia Wygodne siedzenia Miejsca stojące
Obelisks - Monkey, Monkey 99,99 zł 99,99 zł 99,99 zł 99,99 zł
Les Garçons de la Plage 99,99 zł 77,99 zł 60,99 zł 69,99 zł
Koncesja
Obelisks - Monkey, Monkey 99,99 zł 99,99 zł 99,99 zł 99,99 zł
Les Garçons de la Plage 99,99 zł 77,99 zł 60,99 zł 69,99 zł
Grupy (5 lub więcej)
Obelisks - Monkey, Monkey 74,90 zł 74,90 zł 74,90 zł 74,90 zł
Les Garçons de la Plage 74,90 zł 99,99 zł 49,99 zł 48,99 zł
07

Kup bilety dzwoniąc na infolinię Muzyka ---- kup bilet teraz!: (1) 269 68742 / (1) 269 M-U-Z-Y-K-A


Adnotacje

Uwaga 01: Tytuł oznaczony jako nagłówek

Nagłówek "Światła Miasta - Oferta biletów" został zaznaczony przy użyciu nagłówka HTML i stylizowany wizualnie za pomocą CSS.

<h1>Światła Miasta - Oferta biletów</h1>
Kryterium sukcesu 1.3.1 - Informacje i relacje
Kryterium sukcesu 1.4.5 - Obrazy tekstu
Technika CSS 22: Używanie CSS do kontrolowania wizualnej prezentacji tekstu

Wróć do demo

Uwaga 02: Nagłówki tabeli zostały oznaczone jako takie

Nagłówki tabeli zostały oznaczone za pomocą elementów th z atrybutami scope, a także z elementem caption.

<th scope="col">Data</th>

Uwaga: Atrybut summary nie był użyty dla tej prostej tabeli, ponieważ nie zawierałby użytecznych informacji.

Kryterium sukcesu 1.3.1 - Informacje i relacje
  • Technika ogólna G115: Używanie znaczników semantycznych do oznaczania struktury
  • Technika ogólna G138: Używanie semantycznego znacznika, gdy używane są kolorowe wskaźniki
  • Technika HTML H63: Używanie atrybutu scope do kojarzenia komórek nagłówka i komórek danych w tabelach danych
  • Technika HTML H39: Używanie elementów napisów do powiązania podpisów tabel danych z tabelami danych

Wróć do demo

Uwaga 03: Wykorzystanie struktury do przekazania znaczenia semantycznego

Tekst "oferta specjalna" jest podkreślany za pomocą elementu strong.

<strong>oferta specjalna</strong>
Kryterium sukcesu 1.3.1 - Informacje i relacje
Technika ogólna G115: Używanie znaczników semantycznych do oznaczania struktury

Wróć do demo

Uwaga 04: Numer telefonu podany jako tekst

Numer telefonu dla linii porad z karczochami jest dostarczany jako tekst (w dwóch formatach - jako liczby i jako słowo), a nie jako obraz.

<strong>(1) 269 68742 / (1) 269 M-U-Z-Y-K-A</strong> 

Uwaga: W Polsce słowny format numeru telefonicznego jest bardzo rzadko spotykany.

Kryterium sukcesu 1.4.4 - Zmiana rozmiaru tekstu
Sugerowana technika: Unikanie użycia tekstu w obrazach rastrowych (przyszły link)
Kryterium sukcesu 1.4.5 - Obrazy tekstu
Technika CSS 22: Używanie CSS do kontrolowania wizualnej prezentacji tekstu
Kryterium sukcesu 1.4.8 - Prezentacja wizualna
Sugerowana technika: Unikanie użycia tekstu w obrazach rastrowych (przyszły link)

Wróć do demo

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

Komórki danych zostały powiązane z pozycjami tabeli przy użyciu atrybutów id i headers, a atrybut summary został dostarczony do wyjaśnienia relacji między komórkami.

<table width="100%" ... summary="Ceny biletów na każdy koncert zależą od miejsc; 
istnieją oddzielne zestawy cen biletów ulgowych i grupowych dla 5 lub więcej osób.">
...
<caption class="head">Ceny biletów na koncerty zespołów Les Garçons oraz 
The Obelisks</caption>
...
<th id="c1">Dorośli</th>
<th id="c2"><div>Przednie siedzenia</div></th> ... <th id="c6" headers="c1" abbr="Obelisks">Obelisks - Monkey, Monkey</th> <td headers="c1 c2 c6">69,99 zł</td>
Kryterium sukcesu 1.1.1 - Treść nietekstowa
Technika ogólna G94: Zapewnienie krótkiego tekstu alternatywnego dla treści nietekstowych, która służy temu samemu celowi i prezentuje te same informacje, co treść nietekstowa
Kryterium sukcesu 1.3.1 - Informacje i relacje
  • Technika HTML H51: Używanie znaczników tabel do prezentacji informacji tabelarycznych
  • Technika HTML H39: Używanie elementów napisów do powiązania podpisów tabel danych z tabelami danych
  • Technika HTML H73: Używanie atrybutu podsumowania elementu table w celu uzyskania przeglądu tabel danych
  • Technika HTML H43: Używanie atrybutów id i headers do kojarzenia komórek danych z komórkami nagłówka w tabelach danych

Wróć do demo

Uwaga 06: Opcje miejsc są podane w całości

Opcje miejsc są zapisane całymi wyrazami, unika się akronimów w jak największym stopniu.

Kryterium sukcesu 3.1.4 - Skróty
Technika ogólna G102: Udostępnienie rozszerzenia lub wyjaśnienia skrótu
Kryterium sukcesu 3.1.5 - Poziom umiejętności czytania
Sugerowana technika: Używanie jasnego i prostszego języka właściwego dla treści (przyszły link)

Wróć do demo

Uwaga 07: Wystarczający kontrast kolorów w celu zwiększenia czytelności

Współczynnik kontrastu między kolorem pierwszego planu (# 000000) a kolorem tła (# c0c0c0) wynosi 11,5: 1 dostatecznie wysoko.

.datahead { background-color: #c0c0c0; }
.sfdtable { color: #000000; }
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

Uwaga 08: Tekst jest oznaczony semantycznie i jest łatwiejszy do odczytania

Pogrubienie, kursywa, podkreślenie, pełna justyfikacja, wielkie litery i inne elementy tekstowe są używane tylko wtedy, gdy jest to konieczne, aby zapewnić czytelność, a podkreślony tekst jest oznaczany semantycznie przy użyciu odpowiednich elementów HTML.

<h2>Zasady i warunki korzystania z serwisu Światła Miasta</h2>
<ol>
<li>Zgadzasz się, że dzwoniąc na...
Kryterium sukcesu 1.3.1 - Informacje i relacje
Kryterium sukcesu 1.4.8 - Prezentacja wizualna
  • Technika CSS C19: Określanie wyrównania do lewej lub prawej strony w CSS
  • Technika CSS C21: Określanie odstępów między wierszami w CSS
  • Sugerowana technika: Używanie wielkich i małych liter zgodnie z konwencją pisowni języka tekstowego (przyszły link)
Wytyczna 3.1 - Czytelność
  • Sugerowana technika: Unikanie tekstu wyśrodkowanego (przyszły link)
  • Sugerowana technika: Unikanie tekstu w pełni wyjustowanego (do lewego i prawego marginesu) w sposób, który powoduje słaby odstęp między słowami lub znakami (przyszły link)
  • Sugerowana technika: Używanie tekstu wyrównanego do lewej dla języków, które są pisane od lewej do prawej i wyrównanego do prawej dla języków, które są pisane od prawej do lewej (przyszły link)
  • Sugerowana technika: Unikanie nadużywania różnych stylów na poszczególnych stronach i w witrynie (przyszły link)
  • Sugerowana technika: Używanie wielkich i małych liter zgodnie z zasadami pisowni w języku tekstowym (przyszły link

Wróć do demo