LepszyWeb.pl. Pracownia Dostępności Cyfrowej

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

Nowiny Świateł Miasta

Twardy Przewałek


Adnotacje

Uwaga 01: Zwiększone odstępy

Odstępy między kolumnami są zwiększane, aby ułatwić czytanie.

#content p { padding: 0 10px; margin: 0 0 0.618em; line-height: 130%; }
Kryterium sukcesu 1.4.4 - Zmiana rozmiaru tekstu
Sugerowana technika: Zapewnienie wystarczającej odległości między wierszami i między kolumnami (przyszły link)
Kryterium sukcesu 1.4.8 - Prezentacja wizualna
Sugerowana technika: Zapewnienie wystarczającej odległości między kolumnami (przyszły link)

Wróć do demo

Uwaga 02: Strona zorganizowana za pomocą nagłówków

Nagłówek "Fala upałów związana z klimatyzacją" został oznaczony przy użyciu elementu nagłówka HTML, aby dodać strukturę do strony.

<h2 id="story1">Fala upałów związana z klimatyzacją</h2>
Kryterium sukcesu 1.3.1 - Informacje i relacje
  • Technika H42: Używanie znaczników h1-h6 do identyfikacji nagłówków
  • Technika G141: Organizowanie strony za pomocą nagłówków

Wróć do demo

Uwaga 03: Czcionka łatwa do odczytania

Tekst na tej stronie używa czcionek sans-serif, takich jak "Lucida" zamiast czcionek serif, takich jak 'Times New Roman', które są uważane za trudniejsze do czytania na ekranie.

body { font-family: "Lucida Grande", Lucida, Verdana, sans-serif; }
Kryterium sukcesu 1.4.8 - Prezentacja wizualna
Sugerowana technika: Prezentacja tekstu czcionką bezszeryfową lub zapewnienie mechanizmu do osiągnięcia tego celu (CSS) (przyszły link)

Wróć do demo

Uwaga 04: Znacząca sekwencja czytania

Sekcja "Twój krzyk" pojawia się poniżej i jako część artykułu "9 miesięcy za kradzież skrzypiec" zarówno wizualnie, jak i w kodzie HTML.

Kryterium sukcesu 1.3.2 - Zrozumiała kolejność
  • Technika G57 - Porządkowanie zawartości w znaczącej kolejności ORAZ Technika C6 - Pozycjonowanie treści w oparciu o znaczniki strukturaln3
  • Technika C27 - Tworzenie kolejności elementów DOM zgodnie z kolejnością wizualną

Wróć do demo

Uwaga 05: Tekst alternatywny opisuje cel linku

Obraz będący łączem ma tekst alternatywny opisujący cel linku, a nie obraz.

<a href="..." ...><img src="smzappa2.jpg" alt="Strona internetowa Klary F." ... / ></a>

Uwaga: Podpis "Klara F., 15 miesięcy" również został włączony do linku, ponieważ niektórzy czytelnicy mogą nie zdawać sobie sprawy, że ten obraz jest łączem.

Kryterium sukcesu 1.1.1 - Treść nietekstowa
Ogólne 94: Zapewnienie krótkiego tekstu alternatywnego dla treści nietekstowych, które służą temu samemu celowi i przedstawiają te same informacje, co treść nietekstowa

Wróć do demo

Uwaga 06: Link wyróżniony wizualnie

Łącze "ze sposobu, w jaki działa klimatyzacja" ma wystarczający kontrast kolorów i jest podkreślone, aby się wystarczająco odróżniało od otaczającego tekstu.

a { color: #ba2710; } #content a { text-decoration: underline }
Kryterium sukcesu 1.4.1 - Użycie koloru
  • Ogólne 182: Zapewnienie, że dodatkowe wizualne wskazówki są dostępne, gdy różnice koloru tekstu są używane do przekazywania informacji
  • Ogólne 183: Użyj współczynnika kontrastu 3: 1 i dostarczaj dodatkowych wizualnych wskazówek dotyczących fokusu dla linków lub kontrolek, w których stosowany jest sam kolor w celu ich identyfikacji
Kryterium sukcesu 1.4.8 - Wizualna prezentacja
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 07: Wzmocniony tekst oznaczony jako wyróżniony

Tekst "ale także gorące powietrze, które jest odprowadzane na zewnątrz" jest wyróżniony za pomocą elementu em.

<em>ale także gorące powietrze, które jest odprowadzane na zewnątrz</em>
Kryterium sukcesu 1.3.1 - Informacje i relacje
Technika G115 - Używanie znaczników semantycznych do oznaczania struktury ORAZ Technika H49 - Używanie semantycznych znaczników do zaznaczania podkreślonego lub specjalnego tekstu

Wróć do demo

Uwaga 08: Poprawne znakowanie

Nagłówek "Powrót do nadawcy" jest sformatowany przy użyciu odpowiedniego i prawidłowego kodu.

<h3>Powrót do nadawcy</h3>

Uwaga: Zobacz także Uwaga 01: Nagłówek nie oznaczony jako taki.

Wytyczna 4.1 - Kompatybilność
  • Technika G134 - Sprawdzanie poprawności stron internetowych
  • Technika G192 - Pełna zgodność ze specyfikacjami
  • Sugerowana technika: Unikanie przestarzałych funkcji technologii W3C (przyszły link)

Wróć do demo

Uwaga 09: Prezentacyjne przedstawienie diagramu

Diagram ma odpowiednią alternatywę tekstową i stanowi przydatną ilustrację do wyjaśnienia znaczenia.

<img src="chart1.jpg" alt="Darowizny z mózgów w maju: 13, czerwcu: 13, lipcu: 12, 
sierpniu: 8, wrześniu: 7." ... / >
Kryterium sukcesu 1.1.1 - Treść nietekstowa
Ogólne 94: Zapewnienie krótkiego tekstu alternatywnego dla treści nietekstowych, które służą temu samemu celowi i przedstawiają te same informacje, co treść nietekstowa.
Wytyczna 3.1 - Czytelność
Sugerowana technika: Używanie obrazów, ilustracji, wideo, dźwięku lub symboli w celu wyjaśnienia znaczenia (przyszły link)

Wróć do demo

Uwaga 10: Obraz z odpowiednią alternatywą tekstową

To zdjęcie pani B. Wahoonie zostało uznane za znaczące, więc dostarczono alternatywnej tekstu, aby krótko opisać obraz.

<img src="blanca.jpg" alt="Pani B.Przewałek przed kanionem" width="240" > 

Uwaga: dodatkowa informacja "Pani B.Przewałek prowadzi rozpoznanie w sprawie transportu gorącego powietrza do Australii", która wcześniej była użyta do opisu obrazu, jest teraz dostępne dla wszystkich czytelników.

Kryterium sukcesu 1.1.1 - Treść nietekstowa
Ogólne 94: Zapewnienie krótkiego tekstu alternatywnego dla treści nietekstowych, które służą temu samemu celowi i przedstawiają te same informacje, co treść nietekstowa.

Wróć do demo