Ucz się na cudzych błędach. Zobacz tę samą stronę w wersji niedostępnej i dostępnej. Zobacz typowe błędy dostępności, ich opisy i praktyczne rozwiązania. Zapraszamy do skorzystania z polskiej wersji witryny demonstracyjnej stworzonej przez W3C dla celów edukacyjnych.
Przed i Po to strona edukacyjna. Wykorzystaj ją w samokształceniu lub na szkoleniu poświęconym dostępności cyfrowej stron internetowych. Oryginalna wersja witryny, zatytułowana Before & After (BAD) została przygotowana i opublikowana przez W3C. Przetłumaczyliśmy ją na język polski i nieco unowocześniliśmy.
Przejdź na stronę Demo Przed i Po
Struktura demo
Na demo składają się dwie warstwy.
- Warstwa podstawowa, którą tworzą niedostępna i dostępna wersja fikcyjnego portalu „Światła Miasta”.
- Warstwa objaśnień, którą tworzą szczegółowe raporty oraz adnotacje dodane do każdej ze stron.
Na niedostępnej wersji portalu umyślnie zaprojektowano 45 różnych barier dostępności. Na stronach dostępnych bariery dostępności zostały wyeliminowane.
Uwaga: Celem demo jest zilustrowanie wybranych aspektów dostępności internetowej. Nie obejmuje ono wszystkich typów barier dostępności ani wymagań dotyczących dostępności. Część niedostępnej zawartości Demo może sprawiać niektórym czytelnikom trudności w wykorzystaniu.
Strony portalu „Światła Miasta”
Obie wersje portalu złożone są z 4 stron zatytułowanych Start, Nowiny, Bilety, Ankieta oraz dodatkowo strony prezentującej szablon.
- Start - pokazuje artykuły wyróżnione i zwiastuny
- Nowiny - pokazuje nowe artykuły i teksty wiadomości
- Bilety - pokazuje tabele i informacje
- Ankieta - pokazuje formularze i interakcje
- Szablon - używany do tworzenia innych stron
Uwaga: Zastosowane w obu wersjach portalu rozwiązania są momentami nieco archaiczne. Zręby witryny zostały opracowane około 2008 roku. W wydaniu polskim oba portale zostały unowocześnione jedynie w koniecznym zakresie.
Adnotacje
Wszystkie bariery i wszystkie poprawione elementy strony zostały opatrzone adnotacjami. Adnotacje można uaktywnić, aby wyróżnić przykładowe bariery dostępności lub poprawki.
Adnotacje opisują barierę lub poprawkę oraz wskazują:
- kryteria sukcesu WCAG, których dotyczy bariera i poprawka,
- wystarczające i pomocnicze techniki naprawcze (z linkiem do opisującej technikę anglojęzycznej strony w zasobach W3C – jeśli istnieje),
- błąd dostępności, jeśli został zdefiniowany w zasobach W3C, wraz z odnośnikiem do strony z opisem błędu.
Raporty
Do każdej strony internetowej został dołączony raport oceniający. Zawartość raportów uporządkowana jest według zasad i kryteriów sukcesu WCAG. Każdy raport składa się z czterech tabel, w których zebrano wyniki testów dla wszystkich 4 zasad dostępności zdefiniowanych w WCAG (postrzegalność, funkcjonalność, zrozumiałość, rzetelność). Tabele zawierają łącze i etykietę testowanego kryterium sukcesu, zwięzły opis kryterium sukcesu, wynik testu („przeszedł” lub „nie przeszedł” oraz szczegółowe odniesienia do odpowiednich technik naprawczych i typowych błędów opisanych w dokumentacji W3C. Nazwy (etykiety) technik naprawczych i błędów, podobnie jak wszystkie inne elementy demo, zostały przetłumaczone na język polski.
Raporty mogą stanowić wzorcowe przykłady dla osób przeprowadzających audyty witryn.
Wykorzystanie Demo
Demo „Przed i Po” może posłużyć wielu celom, takim jak podnoszenie świadomości problemów dostępności cyfrowej na stronach internetowych, czy dostarczanie twórcom oprogramowania praktycznych przykładów. Do typowych sposobów wykorzystania i nawigowania przez Demo można zaliczyć:
- Przygotowanie prezentacji na temat dostępności cyfrowej.
Prezentowanie praktycznych przykładów podczas prezentacji jest zazwyczaj bardzo skuteczne. Na opisywanych stronach znajduje się przegląd barier i cech dostępności. Podczas prezentacji można objaśniać konkretne przykłady zarówno dostępnych, jak i niedostępnych stron.
- Poznanie konkretnych barier dostępności.
Projektanci stron internetowych często chcą się dowiedzieć więcej o konkretnych barierach dostępności. Na przykład, co jest przyczyną problemu i jak można go naprawić? O ile raporty ewaluacyjne zawierają szczegółowe analizy, to niedostępne i dostępne strony internetowe stanowią przykłady implementacji, które można zbadać.
- Zrozumienie konsekwencji barier dostępości internetowej.
Niekiedy, rzeczywiste problemy osób z niepełnosprawnościami nie są jasne dla projektantów i menedżerów. Przeglądanie demonstracji niedostępnych stron za pomocą różnych konfiguracji przeglądarki lub technologii wspomagających (takich jak czytniki ekranu i lupy) pomaga podkreślić te problemy. Dostępne strony demonstracyjne można przeglądać w ten sam sposób, aby pokazać różnicę.
- Pisanie szczegółowych raportów z ewaluacji zgodności.
Dobrze napisany raport oceniający jest kluczowy w procesie poprawiania dostępności stron internetowych. Informuje o problemach menedżerów i webmasterów, którzy muszą zdecydować, jakie rozwiązania wdrożyć. Przedstawione w demonstracjach raporty oceniające stanowią wzorcowe przykłady dla osób oceniających.
Przejdź na stronę Demo Przed i Po
Stefan Wajda