LepszyWeb.pl. Pracownia Dostępności Cyfrowej

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


Adnotacje

Uwaga 01: Tekst alterntywny pasuje do tekstu graficznego

Alternatywna tekstowa dla tego obrazu tekstu zawiera słowa, które są wyświetlane na obrazie.

<img src="../../img/after/toplogo.png" alt="Światła Miasta: Twoje okno na miasto."> 
Kryterium sukcesu 1.1.1 - Treść nietekstowa
Technika HTML H37: Używanie atrybutów alt na elementach img

Wróć do demo

Uwaga 02: Zdjęcie z tekstem alternatywnym

To zdjęcie zespołu "Wolne Pingwiny" ma charakter informacyjny, więc podano tekstową alternatywę, aby krótko opisać obraz.

<img src="../../img/after/teaser_right1.jpg" alt="Wolne Pingwiny grają za darmo na scenie"> 
Kryterium sukcesu 1.1.1 - Treść nietekstowa
Technika HTML H37: Używanie atrybutów alt na elementach img

Wróć do demo

Uwaga 03: Linki zaznaczone, gdy otrzymują fokus

Te linki (również nagłówki wiadomości) są podświetlone, gdy są wybierane za pomocą klawiatury lub są wskazywane przez mysz.

.news h2 a {color: #000; text-decoration: none; display: block;}
.news h2 a:hover {color: #ba2710; background-image: none;}
.news h2 a:focus {color: #ba2710}
Kryterium sukcesu 2.4.7 - Widoczny fokus
  • Podświetlanie linku lub kontrolki, gdy mysz najedzie na niego (przyszły link)
  • Zapewnienie bardzo widocznego mechanizmu podświetlania dla łączy lub kontrolek, gdy otrzymują one fokus na klawiaturę (przyszły link)

Wróć do demo

Uwaga 04: Obraz z pustym tekstem alternatywnym

Ten obraz jest wyświetlany wyłącznie w celach dekoracyjnych, a zatem ma pustą (zerową) alternatywę tekstową.

<img src="../../img/after/BrainInJar.jpg" alt="">

Uwaga: Obrazy są wyświetlane za pomocą elementu img zamiast CSS, aby ułatwić dodawanie tekstowych alternatyw dla obrazów uznawanych za informacyjne.

Kryterium sukcesu 1.1.1 - Treść nietekstowa
Technika HTML H67: Używanie tekstu zerowego alt i brak atrybutu title w elementach img dla obrazów, które AT powinien zignorować

Wróć do demo

Uwaga 05: Tekst linku wskazuje cel linku

Tekst linku używa "Kup bilety" zamiast "Kliknij tutaj" lub "Czytaj więcej", aby lepiej określić cel linku.

<a href="../tickets/annotations" class="more">Kup bilety</a>
Kryterium sukcesu 2.4.4 - Cel linku (w kontekście)
Kryterium sukcesu 2.4.9 - Cel linku (z samego linku)

Wróć do demo

Uwaga 06: Używanie CSS zamiast tabel do układu

Wiadomości są prezentowane przy użyciu CSS zamiast układu tabeli.


<div class="news "><h2><a href="../news/#story3">9 miesięcy za kradzież skrzypiec</a></h2>
<p class="image"><img src="../../img/after/violin.jpg" alt=""></p><p>Burmistrz: 
Tego rodzaju przestępstwa wymagają bardziej wymyślnych, skutecznych kar. Na przykład 
możemy żądać...<br /><a href="../news/#story3" class="more">Kradzież skrzypiec -
<br />całą historia</a></p></div> 
Kryterium sukcesu 1.3.1 - Informacje i relacje
  • Technika ogólna G140: Oddzielanie informacji i struktury od prezentacji w celu umożliwienia różnych prezentacji
  • Używanie CSS zamiast tabel do układu strony (przyszły link)

Wróć do demo

Uwaga 07: Linki o charakterystycznym wyglądzie

Łącza mają charakterystyczny wygląd za pomocą kolorowych i nie-kolorowych wskazówek (podkreślenie).

<a href="../../offsite.html">Killer Bees</a> 
Kryterium sukcesu 1.4.8 - Prezentacja wizualna
Sugerowana technika: Tworzenie linków wizualnie odróżniajacych się (przyszły link)

Wróć do demo

Uwaga 08: Wykaz ozaznaczony jako lista

Ta lista jest oznaczona przy użyciu struktury listy HTML.

<ul class="elsewhere"><li><a href="../../offsite.html">Zabójca pszczół</a></li>
<li><a href="../../offsite.html">Cebula zwyczajna</a></li></ul>
Kryterium sukcesu 1.3.1 - Informacje i relacje

Wróć do demo

Uwaga 09: Punktory listy są wyświetlane przy użyciu CSS

Ozdobna lista punktowa jest wyświetlana przy użyciu CSS zamiast elementu img z pustą (zerową) alternatywą tekstową.

li a {background: url(../img/after/list_bullets.svg) no-repeat top left; .... }
Kryterium sukcesu 1.1.1 - Treść nietekstowa
Technika CSS C9: Używanie CSS do dodawania obrazów dekoracyjnych

Wróć do demo

Uwaga 10: Numer telefonu podany jako tekst, a nie obraz

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.

<p><strong>Infolinia Karczochy:<br />(1) 269 24653 / (1) 269 K-A-R-C-Z-O-C-H</strong></p> 

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