Wpisy

Kompendium WCAG 2.0: Wytyczna 2.4 Nawigacja

Ostatni już w tym roku wpis z cyklu Kompendium WCAG 2.0 – dotychczas omówiliśmy około 50% specyfikacji, tak więc zainteresowanych tematem WCAG 2.0 zapraszamy do śledzenia naszego bloga także w roku 2015. Na koniec roku 2014 Wytyczna 2.4 Nawigacja.

Przekład z WCAG 2.0 Guideline:

Udostępnij na stronie www narzędzia pomagające użytkownikom w nawigacji, dotarciu do treści i określaniu, w którym miejscu strony się aktualnie znajdują.

2.4.1 Dostęp bezpośredni
Zapewnij w nagłówku strony www – nie chodzi o sekcję head w samym kodzie, a o nagłówek strony z punktu widzenia użytkownika – menu służące do przechodzenia do istotnych treści serwisu za pomocą kotwic, bez konieczności przeładownia strony. Pomimo, _że każdy program czytający posiada skróty klawiaturowe, dzięki którym użytkownik może poruszać się po dowolnych elementach serwisu – nagłówkach, polach formularzy, akapitach, odnośnikach itd. w ten sposób ułatwisz osobom niewidomym nawigację przez możliwość pominięcia powtarzających się na kolejnych podstronach stałych elementów np. menu narzędziowe serwisu.

2.4.2 Tytuł strony
Każda podstrona strony www czy systemu informatycznego powinna być zatytułowana w sposób jednoznaczny. Tytuł strony to bowiem pierwszy tekst odczytywany przez czytniki ekranowe.

2.4.3 Kolejność zaznaczenia
Kolejność nawigacji po odnośnikach, elementach formularzy, itp. elementach musi mieć spójną i logiczną strukturę, tak, aby zapewnić mozliwie naturalne poruszanie się pomiędzy np. polami formularza. Przykład: Pole 1 – wpisz swoje imię, 2 – wpisz swoje nazwisko.

2.4.4 Cel odnośnika i jego kontekst
Określaj jednoznacznie cel wszystkich elementów aktywnych na stronie www. Linki, przyciski formularza, czy obszary aktywne map odnośników powinny być opisane konkretnie wraz z jasnym wskazaniem celu, do którego prowadzą.

2.4.5 wiele dróg
Do każdego elementu strony www można dotrzeć przynajmniej na dwa z wymienionych sposobów:

  • spis treści,
  • wyszukiwarka,
  • mapa strony,
  • lista podstron pokrewnych,
  • lista wszystkich podstron.

2.4.6 Nagłówki i etykiety
Nagłówki i etykiety muszą być opisane w sposób logiczny, sensowny i jednoznaczny, dzięki czemu użytkownikom łatwiej jest odnaleźć konkretną treść i zorientować się w strukturze strony. Nie wolno stosować podwójnych nagłówków i etykiet, zwłaszcza w elementach aktywnych, takich jak np. pola formularza.

2.4.7 Wyraźne akcentowanie zaznaczeń
Obsługując stronę www za pomocą klawiatury, użytkownik musi wiedzieć, który aktywny element strony ma wybrany. Podczas poruszania się po stronie klawiszem Tab musi być wyraźnie widoczne, który element został zaznaczony. Minimum jest niewyłączanie za pomocą atrybutu outline:none; tzw. autofokusu dostępnego w każdej przeglądarce internetowej.

2.4.8 Lokalizacja
Użytkownik zawsze musi wiedzieć, w którym miejscu strony www lub systemu informatycznego właśnie się znajduje. Należy zatem zapewnić odnośniki powrotne do stron nadrzędnych, które użytkownik przejrzał przed dotarciem do aktualnej strony. Najczęściej stosuje się ścieżkę linków, z angielskiego zwaną breadcrumbs.

2.4.9 Cel linku bez kontekstu
Zasada tożsama z wytyczną 2.4.4, jednak bardziej restrykcyjna: Określaj jednoznacznie cel wszystkich elementów aktywnych na stronie www. Linki, przyciski formularza, czy obszary aktywne map odnośników powinny być opisane konkretnie wraz z jasnym wskazaniem celu, do którego prowadzą. Nie mogą istnieć żadne odnośniki i elementy aktywne z tym samym tekstem kierujące w różne miejsca. Dobrym przykładem jest tutaj często spotykany odnośnik „Czytaj więcej” – na tym poziomie WCAG 2.0 należy go całkowicie wyeliminować.

2.4.10 Nagłówki sekcji
Punkt tożsamy z wytyczną 1.3.1, mówiącą o stosowaniu nagłówków w strukturze ogólnej strony www. Aby zapewnić poziom zgodności AAA nagłówki należy stosować w każdej sekcji każdego dokumentu podzielonego na sekcje. Np. jeśli artykuł jest podzielony na akapity, nagłówkiem należy opatrzyć część tytułową artykułu i każdy jego akapit.

 

Jeśli interesuje Państwa audyt WCAG 2.0 zgodny z Rozporządzeniem Rady Ministrów z dnia 12 kwietnia 2012 r. w sprawie Krajowych Ram Interoperacyjności, zachęcamy do zapoznania się z metodyką prowadzonego przez nas audytu dostępności stron www zgodnego z tym rozporządzeniem, dostępną pod tym odnośnikiem: Audyt WCAG 2.0

Dla wszystkich śledzących nasz cykl wpisów „Kompendium WCAG 2.0” przygotowaliśmy także bezpłatną aplikację mobilną Pomocnik WCAG 2.0, stanowiącą uzupełnienie tego cyklu. Aplikacja kierowana jest do webmasterów i osób odpowiedzialnych w jednostkach publicznych za dostosowanie stron www do wymagań WCAG 2.0 zgodnie z Rozporządzeniem Rady Ministrów w sprawie Krajowych Ram Interoperacyjności.

 

Kompendium WCAG 2.0: Wytyczna 2.3 Ataki padaczki

Przekład powyższej wytycznej z WGAG 2.0 Gudieline ma następujące brzmienie:

Unikaj układania treści w formie, która mogłaby spowodować atak padaczki.

2.3.1 trzy błyski przekaz podprogowy
Błyski światła działają na układ nerwowy człowieka, co u osób z grup podwyższonego ryzyka może powodować ataki padaczki. Wprawdzie epileptycy wiedzą, że nie należy korzystać z komputera przy zgaszonym świetle, niemniej jednak instrukcja WCAG 2.0 stara się obejmować również osoby zagrożone daną przypadłością, które nie są jej jeszcze świadome. Aby zminimalizować ryzyko napadów padaczkowych nie należy tworzyć treści, które migają więcej niż 3 razy na sekundę.

2.3.2 Trzy błyski
Strona www lub system informatyczny jest całkowicie pozbawiony elementów migających z większą częstotliwością, jak trzy razy na sekundę.

 

Jeśli interesuje Państwa audyt WCAG 2.0 zgodny z Rozporządzeniem Rady Ministrów z dnia 12 kwietnia 2012 r. w sprawie Krajowych Ram Interoperacyjności, zachęcamy do zapoznania się z metodyką prowadzonego przez nas audytu dostępności stron www zgodnego z tym rozporządzeniem, dostępną pod tym odnośnikiem: Audyt WCAG 2.0

Dla wszystkich śledzących nasz cykl wpisów „Kompendium WCAG 2.0” przygotowaliśmy także bezpłatną aplikację mobilną Pomocnik WCAG 2.0, stanowiącą uzupełnienie tego cyklu. Aplikacja kierowana jest do webmasterów i osób odpowiedzialnych w jednostkach publicznych za dostosowanie stron www do wymagań WCAG 2.0 zgodnie z Rozporządzeniem Rady Ministrów w sprawie Krajowych Ram Interoperacyjności.

 

Kompendium WCAG 2.0, Wytyczna 2.2 Wystarczająca ilość czasu

Dosłowny przekład instrukcji WCAG 2.0 Guideline brzmi:

Zapewnij użytkownikom wystarczającą ilość czasu do spokojnego przeczytania, interpretacji i przetworzenia treści.

2.2.1 Możliwość ustawienia ilości czasu – WCAG 2.0 poziom A

Zapewnij użytkownikom taką ilość czasu na wykonanie czynności, jakiej potrzebują, bez nagłego zmieniania treści w wyniku nałożonego limitu czasowego. Jeśli strona www lub system teleinformatyczny ma limit czasu na wykonanie określonej czynności należy zapewnić opcję wyłączenia lub zwiększenia tego limitu. Wytycznej tej nie podlegają zdarzenia na stronie www zachodzące w czasie rzeczywistym, gdzie limit czasu stanowi funkcjonalność serwisu. Dobrym przykładem będzie tu aukcja internetowa.

2.2.2 Przerwa, stop, schowaj – WCAG 2.0 poziom A

Wszystkie treści informacyjne automatycznie przewijane, przesuwane, migające, widoczne dłużej jak 5 sekund, a jednocześnie prezentowane równolegle z inną treścią muszą być możliwe do zatrzymania, wyłączenia lub ukrycia. Wyjątek jest dopuszczalny w sytuacji, kiedy przesuwanie lub miganie treści jest nieodzowną częścią wykonywanej czynności, np. animacja widoczna w czasie wczytywania treści. Wówczas jej zatrzymanie mogłoby wprowadzić użytkownika w błąd, sugerując przerwanie wczytywania. Dopuszczalne jest użycie elementów ruchu, migania lub przewijania w celu zwrócenia uwagi użytkownika lub wyróżnienia treści, jeśli nie trwają dłużej, niż 3 sekundy.

2.2.3 Bez limitu czasu – WCAG 2.0 poziom AAA

Zapewnij użytkownikom tyle czasu ile potrzebują na wykonanie każdego zadania na stronie www lub w systemie teleinformatycznym. Na tym poziomie WCAG 2.0, na stronie www nie występują żadne limity czasu.

2.2.4 Brak zakłóceń – WCAG 2.0 poziom AAA

Na stronie www lub w systemie teleinformatycznym istnieje możliwość odłożenia w czasie lub wyłączenia wszystkich komunikatów, informacji itp. elementów, mogących rozpraszać użytkownika i przeszkadzać w trakcie korzystania ze strony w każdym jej elemencie i funkcjonalności. Wyjątkiem są sytuacje, takie jak użyteczne, pilne alarmy np. przypomnienia zadefiniowane przez samego użytkownika o ważnym terminie lub spodziewane potwierdzenia w czasie wprowadzania zmian.

2.2.5 Ponowne potwierdzenie autentyczności – WCAG 2.0 poziom AAA

Gdy kończy się czas sesji użytkownika (np. po zalogowaniu do portalu) i system poprosi o ponowną autoryzację, użytkownik będzie móg kontynuować czynności bez utraty danych z aktualnie otwartej strony.

Jeśli interesuje Państwa audyt WCAG 2.0 zgodny z Rozporządzeniem Rady Ministrów z dnia 12 kwietnia 2012 r. w sprawie Krajowych Ram Interoperacyjności, zachęcamy do zapoznania się z metodyką prowadzonego przez nas audytu dostępności stron www zgodnego z tym rozporządzeniem, dostępną pod tym odnośnikiem: Audyt WCAG 2.0

Dla wszystkich śledzących nasz cykl wpisów „Kompendium WCAG 2.0” przygotowaliśmy także bezpłatną aplikację mobilną Pomocnik WCAG 2.0, stanowiącą uzupełnienie tego cyklu. Aplikacja kierowana jest do webmasterów i osób odpowiedzialnych w jednostkach publicznych za dostosowanie stron www do wymagań WCAG 2.0 zgodnie z Rozporządzeniem Rady Ministrów w sprawie Krajowych Ram Interoperacyjności.

 

Kompendium WCAG 2.0 Zasada 2: Funkcjonalność

Przedstawiliśmy Wam już zasadę 1 WCAG: Percepcja. Czas na poznanie zasady 2: Funkcjonalność. Zatem zaczynamy 🙂
Dosłowne tłumaczenie z instrukcji WCAG 2.0 Guideline brzmi:

Zadbaj, aby cała funkcjonalność strony www była możliwa do obsłużenia za pomocą klawiatury.

2.1.1 Klawiatura – WCAG 2.0 poziom A

Każdy element strony www, czy systemu teleinformatycznego i każda oferowana przez nie funkcjonalność musi być dostępna i możliwa do obsłużenia tylko przy pomocy klawiatury. Wyjątek mogą stanowić tylko te elementy, które nie mogą być wykonane klawiaturą ze swej natury (np. oprogramowanie do rysowania odręcznego palcem na ekranie dotykowym).
Użyte na stronie skróty klawiaturowe nie powinny wchodzić w konflikty ze skrótami używanymi w przeglądarkach internetowych i czytnikach ekranu. Specyfikacja WCAG 2.0 nie zaleca jednak stosowania własnych skrótów klawiaturowych, chociaż ich nie wyklucza.

Spełnienie powyższej wytycznej ma kluczowe znaczenie dla użytkowników niewidomych, korzystających tylko z klawiatury i użytkowników z zaburzeniami koordynacji ruchowej stosujących rozmaite manipulatory manualne do obsługi komputera.

Ponadto zalecane jest, by zwrócić szczególną uwagę na wykonywanie zdarzeń typu: onclick, onmouseover, czyli po kliknięciu i po najechaniu myszką. Zwłaszcza dotyczy to najazdu wskaźnika na element i podwójnego kliknięcia. Jeśli jakaś ważna z punktu widzenia funkcjonalności serwisu funkcja będzie wykonywana po podwójnym kliknięciu lub po najechaniu myszką, funkcja ta może stać się niedostępna dla użytkowników korzystających wyłącznie z klawiatury lub manipulatora dotykowego. Nie ma bowiem jak wykonać podwójnego kliknięcia klawiaturą, a na ekranie dotykowym nie można na element najechać wskaźnikiem, gdyż automatycznie ten element zostaje „kliknięty” dotknięciem.

2.1.2 Niezablokowana klawiatura – WCAG 2.0 poziom A

Użytkownik powinien móc nawigować po wszystkich elementach strony www lub systemu teleinformatycznego przy użyciu wyłącznie klawiatury. Niedopuszczalna jest sytuacja, w której najpierw należy wykonać akcję myszką, aby przejść do elementu aktywnego obsługiwanego klawiaturą.

2.1.3 Wyłącznie klawiatura – WCAG 2.0 poziom AAA

Cała funkcjonalność strony www lub systemu teleinformatycznego, w 100 procentach musi być dostępna wyłącznie z klawiatury.

 

Jeśli interesuje Państwa audyt WCAG 2.0 zgodny z Rozporządzeniem Rady Ministrów z dnia 12 kwietnia 2012 r. w sprawie Krajowych Ram Interoperacyjności, zachęcamy do zapoznania się z metodyką prowadzonego przez nas audytu dostępności stron www zgodnego z tym rozporządzeniem, dostępną pod tym odnośnikiem: Audyt WCAG 2.0

 

Kompendium WCAG 2.0: Wytyczna 1.4 Treść łatwa do rozróżnienia

Przekład z instrukcji WCAG 2.0 Guideline brzmi:

Ułatw użytkownikom oglądanie i słuchanie treści poprzez oddzielenie pierwszego planu (informacji istotnej) od tła (informacji drugorzędnej).

1.4.1 Użycie koloru – WCAG 2.0 poziom A

Nie stosuj koloru jako jedynego wyróżnienia przekazywanych treści i do rozróżniania elementów wizualnych. Dlaczego? Wyobraź sobie, że osoba niewidząca kolorów lub niewidoma wypełnia formularz rejestracyjny na stronie www, a w owym formularzu niewypełnione pola wymagane zmieniają kolor na niebieski i jest to jedyne wyróżnienie, że dane pole jest obowiązkowe. Użytkownik nie odbierający informacji przekazywanej kolorem nie będzie w stanie wypełnić formularza jeśli pominie pole wymagane. Możesz naturalnie użyć wyróżnienia kolorem, jeśli obok dopiszesz prostą informację „Pole wymagane”.

1.4.2 Kontrola dźwięku – WCAG 2.0 poziom A

Zapewnij możliwość spauzowania, wyłączenia, wyciszenia lub zmienienia głośności dźwięków automatycznie odtwarzanych na stronie. Użytkownikom niewidomym dźwięki odtwarzane na stronie www nakładają się na głos lektora płynący z czytnika ekranowego.

1.4.3 Minimalny kontrast – WCAG 2.0 poziom AA

Kontrast pomiędzy treścią tekstową strony www (dotyczy to także grafik z zawartością tekstową), a tłem strony powinien wynosić co najmniej 4,5:1. Specyfikacja WCAG 2.0 umożliwia odstępstwo od tej wytycznej tylko w następujących wypadkach:

– teksty pisane dużą czcionką – 14 punktów dla koloru czarnego i 18 punktów dla kolorów pozostałych – mogą mieć kontrast w stosunku minimum 3:1.
– teksty będące częścią logotypów i znaków handlowych są wyłączone z wymagań minimalnych dotyczących kontrastu.
– wymagań dotyczących kontrastu nie muszą spełniać teksty i grafiki z zawartością tekstu będące nieaktywnymi fragmentami interfejsu użytkownika, pełnią rolę czysto dekoracyjną, są częścią obrazka lub zdjęcia.

Jeżeli nie można zapewnić wymaganego kontrastu np. z powodu konieczności utrzymania identyfikacji wizualnej właściciela strony należy wprowadzić przełączniki zmieniające wyświetlanie serwisu w trybie wysokiego kontrastu (w praktyce oznacza to zazwyczaj przełączenie szablonu graficznego lub dynamiczną zmianę arkusza stylu CSS). Wymagane jest, aby kontrolki zmiany kontrastu same w sobie spełniały wymagania stosunku kontrastu 4,5:1 . Wersja strony www o wysokim kontraście musi posiadać taką samą zawartość i funkcjonalność, jak wersja podstawowa serwisu.

1.4.4 Zmiana rozmiaru tekstu – WCAG 2.0 poziom AA

Tekst na stronie www musi dać się powiększyć o 200% bez utraty czytelności, zawartości i funkcjonalności strony.
Niedopuszczalne jest np. obcinanie fragmentów tekstu, zmiana położenia pól formularzy, czy ich wychodzenie poza krawędzie przeglądarki, itd.

Nie jest to wprawdzie wymagane, jednak specyfikacja WCAG 2.0 zaleca zapewnienie na stronie www kontrolek umożliwiających stopniowe powiększanie rozmiaru czcionki. Wprowadzenie tych zaleceń ułatwia odbiór serwisu nie tylko osobom niedowidzącym, ale także pełnosprawnym mającym ograniczoną percepcję wizualną, np. starszym.

1.4.5 Grafiki tekstowe – WCAG 2.0 poziom AA

Do przedstawiania tekstu na stronie www nie należy używać grafiki, jeśli ta sama informacja może być zaprezentowana tylko przy użyciu tekstu. Np. zamiast umieszczania obrazka z zaproszeniem na jakieś wydarzenie, na którym to obrazku będzie napisana data i miejsce tego wydarzenia, można zamieścić tekst: „zapraszamy na wydarzenie, które odbędzie się dnia tego, a tego, tu i tu” lub przynajmniej umieścić ten teks obok grafiki. Wyjątek od tej wytycznej stanowią teksty będące częścią logo, znaku towarowego lub nazwy własnej produktu.

1.4.6 Kontrast podwyższony – WCAG 2.0 poziom AAA

Wytyczna ta jest tożsama z wytyczną 1.4.3, z tą różnicą, że współczynnik kontrastu pomiędzy tekstem lub grafikami tekstowymi na stronie www, a tłem powinien być w stosunku 7:1.
Z wytycznej wyłączone są:
– teksty pisane dużą czcionką – 14 punktów dla koloru czarnego i 18 punktów dla kolorów pozostałych – mogą mieć kontrast w stosunku minimum 3:1.
– teksty będące częścią logotypów i znaków handlowych są wyłączone z wymagań minimalnych dotyczących kontrastu.
– wymagań dotyczących kontrastu nie muszą spełniać teksty i grafiki z zawartością tekstu będące nieaktywnymi fragmentami interfejsu użytkownika, pełnią rolę czysto dekoracyjną, są częścią obrazka lub zdjęcia.

1.4.7 Brak treści audio w tle strony lub niska głośność tła – WCAG 2.0 poziom AAA

Dla następujących rodzajów plików dźwiękowych publikowanych na stronie internetowej, które zawierają głównie mowę, nie są zabezpieczeniami antyspamowymi w postaci dźwiękowej, nie są oczekiwanymi przez użytkownika utworami muzycznymi, należy spełnić przynajmniej jedno z założeń:
– nagranie audio nie posiada tła dźwiękowego utrudniającego odbiór,
– dźwięki w tle mogą zostać wyłączone przez użytkownika,
– dźwięki w tle są co najmniej czterokrotnie cichsze, niż głośność mowy będącej treścią nagrania. Wyjątkowo można używać krótkich dźwięków ilustracyjnych, nie dłuższych jednak, niż 2 sekundy.

1.4.8 Prezentacja wizualna – WCAG 2.0 poziom AAA

Tekst na stronie www trzeba formatować tak, aby użytkownicy z problemami poznawczymi, mający trudności w uczeniu się, wady wzroku, itp. nie odczuwali problemów z jego odczytaniem.
Zalecane są następujące działania i mechanizmy dla bloków tekstu:
– możliwość wybierania przez użytkownika kolorów na pierwszym planie oraz kolorów tła,
– szerokość bloku tekstu nie przekracza 80 znaków,
– tekst niejustowany,
– interlinia wynosi przynajmniej 150%, odstęp między paragrafami 1,5 razy wartości interlinii.
– rozmiar tekstu może zostać powiększony do 200% bez używania technologii wspomagających, nie wymagając od użytkownika przesuwania tekstu horyzontalnie przy widoku w pełnym oknie – nie trzeba używać przewijania poziomego, aby przeczytać blok tekstu.

1.4.9 Grafiki tekstowe wyeliminowane całkowicie – WCAG 2.0 poziom AAA

Nie używaj grafik tekstowych do przekazania jakiejkolwiek informacji. Dopuszczalne są jedynie jako dekoracje, lub gdy informacja nie może zostać przekazana w inny sposób, np. z powodów prawnych: gdy tekst jest częścią znaku towarowego lub logo.

Jeśli interesuje Państwa audyt WCAG 2.0 zgodny z Rozporządzeniem Rady Ministrów z dnia 12 kwietnia 2012 r. w sprawie Krajowych Ram Interoperacyjności, zachęcamy do zapoznania się z metodyką prowadzonego przez nas audytu dostępności stron www zgodnego z tym rozporządzeniem, dostępną pod tym odnośnikiem: Audyt WCAG 2.0

Kompendium WCAG 2.0: Wytyczna 1.3 Możliwość dokonania adaptacji

Dosłowne tłumaczenie instrukcji WCAG 2.0 Guideline ma postać:

Publikuj treści z możliwością prezentacji w różny sposób i w różnym układzie bez utraty informacji, czy struktury.

1.3.1 Informacje i jej związki – WCAG 2.0 poziom A

– Unikaj tworzenia layoutu strony www opartego o tabele.
– Stosuj nagłówki w hierarchii ważności dbając o sematyczność układu treści.
– Stosuj tytuły i nagłówki do informacji zawartych w tabelach, jeśli ich używasz.
– Dodawaj etykiety opisowe przy polach formularzy.
– Buduj menu jako listę.

Wbrew intensywnemu rozwojowi internetowych multimediów, podstawowym sposobem przekazywania informacji na stronie internetowej jest treść w formie tekstu. Warto zatem dbać, aby znaczniki HTML używane do formatowania tekstu zapewniły logiczną strukturę przekazywanych informacji. W tym miejscu uwaga do webmasterów: wprawdzie łatwo formatować tekst stosując znaczniki formatujące pogrubienia b, podkreślenia u, czy kursywy i, tylko po co, skoro w kaskadowych stylach CSS można zmienić wygląd każdego elementu strony www? I na dokładkę zrobić to raz dla całej strony w sposób jednolity. Znacznie szybszym i bardziej spójnym sposobem z punktu widzenia semantyki kodu jest stosowanie najzwyklejszych znaczników stylowanych w CSS: strong, h1 h2 table label itd. Pozwala to równie efektywnie sformatować treść na stronie, a ma pewną zaletę: programy czytające tzw. czytniki ekranu, używane przez osoby niewidome i niedowidzące, interpretują prawidłowo znaczniki semantyczne, co umożliwia poprawne odczytanie treści strony. Znaczniki formatujące HTML b u i są przez czytniki zazwyczaj pomijane, zatem najlepiej wogóle ich nie używać. Czytniki działają bowiem podobnie do przeglądarki tekstowej, takiej jak Lynx. Znacznik np. b przez Lynxa zostanie pominięty, tekst oznaczony znacznikiem np. strong będzie wyróżniony kolorem.

1.3.2 Zrozumiała kolejność – WCAG 2.0 poziom A

Dbaj o kolejność nawigacji i czytania treści bezpośrednio w kodzie HTML, PHP, czy innym narzędziu bazowym, którego używasz. Nie projektuj układu treści w stylach CSS. Jeśli zaprojektujesz układ treści w arkuszach styli, w normalnej przeglądarce, takiej jak FireFox, czy Internet Explorer, wizualnie na stronie wszystko będzie OK. Jeśli jednak wyłączysz stylowanie CSS cała zawartość strony stanie się niezrozumiała, gdyż elementy, których położenie określał CSS zmienią swoje miejsce. Większość czytników ekranu wyłącza stylowanie CSS, ponieważ osobom niewidomym estetyka strony jest do niczego potrzebna.

1.3.3 Charakterystyki zmysłowe – WCAG 2.0 poziom A

Unikaj na stronie www projektowania nawigacji zależnej od tzw. komponentów zmysłowych. Tzn. nie używaj do nawigacji elementów nietekstowych, które nie mogą być opisane poprawnie w tekście alternatywnym umieszczonym w znaczniku „alt”. Jak myślisz, czy osoba niewidoma jest w stanie wykonać taką instrukcję: „aby przejść do menu głównego kliknij ikonę w kształcie okręgu”, gdy owa ikona nie jest opisana w sposób zrozumiały dla jej czytnika ekranu? Zatem nie projektuj nawigacji opartej na charakterystykach zmysłowych – instrukcje i komunikaty nie mogą zależeć od kształtu (patrz przykład z ikoną w kształcie okręgu), lokalizacji wizualnej miejsca (np. opis znajdziesz w lewej kolumnie tabeli po prawej stronie) i dźwięku (np. gdy usłyszysz gong, będziesz mógł przejść dalej).

Jeśli interesuje Państwa audyt WCAG 2.0 zgodny z Rozporządzeniem Rady Ministrów z dnia 12 kwietnia 2012 r. w sprawie Krajowych Ram Interoperacyjności, zachęcamy do zapoznania z metodyką prowadzonego przez nas audytu dostępności stron www zgodnego z tym rozporządzeniem, dostępną pod tym odnośnikiem: Audyt WCAG 2.0

Kompendium WCAG 2.0 - Zasada 1: Percepcja, Wytyczna 1.2 Media zależne od czasu

Kolejny odcinek naszego cyklu „Przybliżamy WCAG 2.0″. Przypominamy, że układ kolejnych wpisów w tym cyklu jest tożsamy z samą instrukcją WCAG 2.0 – aby zawęzić kryteria wyszukiwania i ułatwić odbiór dla osób zainteresowanych wyłącznie tą tematyką, czy hasłem audyt WCAG 2.0, stworzyliśmy nową kategorię bloga: Kompendium WCAG 2.0, gdzie znajdą się wpisy tylko z tego cyklu.

W omawianej dziś wytycznej znajduje się kilka podwytycznych, mających wpływ na osiągany poziom zgodności strony www z WCAG 2.0. Jak zapewne pamiętacie, stopni zgodności są trzy: A, AA oraz AAA, gdzie AAA oznacza najwyższą możliwą dostępność strony. Przy każdej podwytycznej zaznaczyliśmy do jakiego stopnia zgodności instrukcja WCAG 2.0 zalicza jej wdrożenie. Ma to praktyczne znaczenie dla osób zainteresowanych tematyką audytu WCAG 2.0 wymaganego prawem UE. Dla przypomnienia – w Polsce poziom zgodności musi osiągnąć stopień AA.

Zasada 1: Percepcja, Wytyczna 1.2 Media zależne od czasu

Dosłowny przekład instrukcji WCAG 2.0 Guideline brzmi:

Należy zapewnić alternatywę dla wszystkich mediów zależnych od czasu.

1.2.1 Tylko nagranie dźwiękowe lub tylko film wideo – WCAG 2.0 poziom A
Przy wszystkich materiałach dźwiękowych i wideo (nie dotyczy streamingu, czyli przekazu na żywo) na stronie www, czy w systemie teleinformatycznym należy opublikować transkrypcję opisową nagranego dźwięku. Dotyczy to plików mp3, podcastów itp. Transkrypcja zapewnia dostęp do informacji użytkownikom niesłyszącym. Podobnie przy materiałach wideo należy zapewnić dodatkowy opis: dla wideo, które nie zawiera ścieżki dźwiękowej – dźwiękowy i tekstowy, dla wideo zawierającego ścieżkę dźwiękową – tekstowy, aby osoby niewidome i niesłyszące także miały dostęp do prezentowanej informacji.

1.2.2 Napisy w nagraniu – WCAG 2.0 poziom A
Wszystkie materiały wideo publikowane na stronie www, takie ja np. film z YouTube, powinny zostać wzbogacone o napisy z dialogami oraz napisy opisujące istotne dla treści i odbioru wideo informacje dźwiękowe. Np. na ekranie nie widać zamykanych drzwi, jednak słychać trzaśnięcie drzwiami. Widz o normalnej percepcji wie, że ktoś wyszedł z pomieszczenia, gdyż słyszał odgłos zamykanych drzwi. Osoba niesłysząca jest tej informacji pozbawiona, zatem w napisach powinien pojawić się opis: „słychać trzaśnięcie drzwiami”.

1.2.3 Audiodeskrypcje, zamiennie treści alternatywne multimediów – WCAG 2.0 poziom A
Dla mediów zmiennych w czasie należy zapewnić alternatywę, dla nagrań wideo w multimediach zsynchronizowanych należy zapewnić audiodeskrypcję.
Mówiąc prościej – dla każdej zawartości multimedialnej (np. film), należy zapewnić opis alternatywny niosący tą samą informację, co zastępowana treść multimedialna – np. tekstowy opis filmu (akcja, dialogi, kontekst) dla osób, które filmu nie obejrzą i nie usłyszą, np. osoby niesłyszącej i niewidomej. Wytyczna ta dotyczy także wszelkich interaktywnych elementów strony: formularzy, pól wyboru itp. – każdy z nich powinien zawierać przynajmniej deskrypcję audio.

1.2.4 Napisy w transmisjach i multimediach transmitowanych na żywo – WCAG 2.0 poziom AA
Każdą treść multimedialną, udostępnianą na stronie www w formie transmisji na żywo (wideokonferencje, webcasty, konferencje audio itp.) trzeba uzupełnić o napisy zsynchronizowane z dźwiękiem.

1.2.5 Audiodeskrypcje w nagraniach – WCAG 2.0 poziom AA
Dla każdego materiału wideo na stronie www należy zapewnić ścieżkę audio z lektorem opisującym wideo dla osób niewidomych. Użytkownicy niewidomi powinni móc włączyć ścieżkę audio z nagraniem lektorskim opisującym treść wideo z dodatkowymi informacjami, skupiającymi się na działaniach, postaciach, zmianach scen, które są ważne dla zrozumienia treści wideo. W skrócie mówiąc: tekstowy opis filmu (akcja, dialogi, kontekst).

1.2.6 Język migowy w nagraniach – WCAG 2.0 poziom AAA
Każdą treść multimedialną, która posiada dźwięk, należy wzbogacić w przekład tłumacza na język migowy.

1.2.7 Audiodeskrypcja poszerzona – WCAG 2.0 poziom AAA
Jeśli nie ma możliwości dodania ścieżki z audiodeskrypcją do oryginalnego materiału wideo z powodu niemożliwości synchronizacji ścieżki dźwiękowej, należy udostępnić wersję alternatywną tego wideo z audiodeskrypcją, np. wideo tylko z audiodeskrypcją pozbawione oryginalnej ścieżki dźwiękowej.

1.2.8 Alternatywy dla multimediów – WCAG 2.0 poziom AAA
Wszystkie treści multimedialne ze ścieżką wideo na stronie www muszą posiadać alternatywę w postaci transkrypcji opisowej.

1.2.9 Tylko dźwięk w przekazie na żywo – WCAG 2.0 poziom AAA
Dla każdej treści dźwiękowej prezentowanej na żywo trzeba zapewnić alternatywę z transkrypcją opisową. Przykładem może być np. transmisja opery: obok okienka z transmisją ze sceny powinien pojawić się scenariusz przedstawienia lub odnośnik do scenariusza.

Jeśli interesuje Państwa audyt WCAG 2.0 zgodny z Rozporządzeniem Rady Ministrów z dnia 12 kwietnia 2012 r. w sprawie Krajowych Ram Interoperacyjności, zachęcamy do zapoznania się z metodyką prowadzonego przez nas audytu dostępności stron www zgodnego z tym rozporządzeniem, dostępną pod tym odnośnikiem: Audyt WCAG 2.0

Kompendium WCAG 2.0 - Zasada 1: Percepcja, Wytyczna 1.1 Tekst alternatywny

Dziś pierwszy odcinek naszego cyklu „Przybliżamy WCAG 2.0”. Układ kolejnych wpisów w tym cyklu jest tożsamy z samą instrukcją WCAG 2.0, tak, aby po opublikowaniu tej serii artykułów powstało swoiste, polskie kompendium wiedzy na temat WCAG 2.0.

WCAG 2.0 Zasada 1: Percepcja

Dosłowne tłumaczenie instrukcji WCAG 2.0 Guideline brzmi:

Dla każdej informacji nietekstowej zapewnij tekst alternatywny, tak aby przyjął formę zrozumiałą. Może być to np. większa czcionka, synteza mowy, symbol, czy alfabet Braille’a. Stosuj język prosty do zrozumienia.

Wytyczna 1.1 Tekst alternatywny

Pod pojęciem „tekst alternatywny” kryje się technika, dzięki której wszelkie elementy nie będące na stronie internetowej czystym tekstem (grafiki, zdjęcia, wykresy, filmy itd.) mogą być przetworzone przez oprogramowanie użytkownika kończowego i zapewnić mu komplet informacji nawet, gdy użytkownik nie ma możliwości zobaczenia elementu nietekstowego. Oznacza to bezwzględny nakaz stosowania zrozumiałego opisu elementu umieszczonego w atrybucie „alt”, jednak tylko tam, gdzie jest on potrzebny i niesie istotną, użyteczną informację. Dlaczego? Oprogramowanie wspomagające osoby niepełnosprawne, np. czytniki ekranowe, czy syntezatory mowy nie widzą np. grafiki. Umieją jednak odczytać informację tekstową zawartą w atrybucie „alt”. I stąd nacisk na „stosowanie zrozumiałego opisu umieszczonego w atrybucie alt”. Nic bowiem nie da „alt” umieszczony przy obrazku, będący nazwą pliku (co np. automatycznie wstawia większość popularnych systemów CMS): internauta niepełnosprawny usłyszy bowiem od swojego czytnika np. tekst „obraz_logo.jpg”. Mało zrozumiałe prawda? Co innego jeśli czytnik oznajmi „Obrazek przedstawiający logo Kancelarii Premiera Rady Ministrów”. Krótko rzecz ujmując w atrybucie powinien znaleźć się krótki opis szczegółów, jakie przedstawia ilustracja w zależności od kontekstu. Zawsze warto się zastanowić, co w atrybucie wpisać i czy w ogóle jest w nim potrzebna jakakolwiek informacja. Jeśli grafika pełni rolę czysto dekoracyjną, bez znaczenia dla przekazu, lepiej „alt” pozostawić pusty. Informacja typu „ramka ozdobna w kolorze brązowym” nie jest raczej potrzebna do prawidłowego odbioru strony wwww, a tylko ten odbiór zaciemnia. Jeśli natomiast opis ma być bardziej szczegółowy, obrazek może być linkiem do osobnej strony z opisem, lub opis można zamieścić sobok obrazka w postaci tekstowej.

Jeśli interesuje Państwa audyt WCAG 2.0 zgodny z Rozporządzeniem Rady Ministrów z dnia 12 kwietnia 2012 r. w sprawie Krajowych Ram Interoperacyjności, zachęcamy do zapoznania się z metodyką prowadzonego przez nas audytu dostępności stron www zgodnego z tym rozporządzeniem, dostępną pod tym odnośnikiem: Audyt WCAG 2.0

Entera Studio WWW - Przybliżamy standard WCAG 2.0

Zgodnie z rozporządzeniem Rady Ministrów z dnia 12 kwietnia 2012 r. w sprawie Krajowych Ram Interoperacyjności jednostki i organy administracji publicznej oferujące ogólnodostępne systemy informatyczne mają obowiązek przystosowania swoich stron www do standardów WCAG2.0, czyli zadbania o ich dostępność dla osób niepełnosprawnych. Termin na wprowadzenie zmian wyznaczono do 2015 r. Również po tym terminie każdy nowo powstający serwis będzie musiał być dostosowany do standardu WCAG 2.0 już na etapie tworzenia, a każda większa modernizacja będzie musiała być prowadzona zgodnie z regułami dostępności. Po przeprowadzeniu setek audytów dostępności strony internetowej, bazując na doświadczeniu zyskanemu dzięki kontaktom z webmasterami i włascicielami stron postanowiliśmy na naszym blogu przybliżyć Wam standard WCAG 2.0. Przez kolejne miesiące będziemy wyjaśniać kolejne zalecenia i punkty specyfikacji, tak aby wyjaśnić skąd biorą się i dlaczego podczas budowy dostępnych stron wwww, zgodnych z WCAG 2.0, stosuje się specyficzne techniki mające na celu poprawę odbioru witryn przez osoby niepełnosprawne.

Zacznijmy od wyjaśnienia czym jest WCAG 2.0? To instrukcja dla webdesignerów, opracowana przez agendę Organizacji Narodów Zjednoczonych UNDP, dotycząca dostępności stron www dla osób niepełnosprawnych z rozmaitymi dysfunkcjami. Specyfikację tę można porównać do dokumentów opisujących zasady likwidacji barier architektonicznych w urzędach, czy szkołach – opisuje, jak budować podjazdy, windy dla wózków inwalidzkich i inne udogodnienia sprawiające, że dany obiekt staje się dostępny dla osób niepełnosprawnych, jednak w odniesieniu do strony www, czy systemu informatycznego. Stronę zgodną z WCAG 2.0 powinny prawidłowo odczytywać syntezatory mowy używane przez osoby niedowidzące i niewidome, kontrasty tekstu i czcionki muszą być na tyle duże, aby stronę www mogli odczytać ludzie o słabym wzroku, a całość musi dać się obsłużyć nie tylko myszką, ale i klawiaturą oraz innymi urządzeniami wejścia-wyjścia. Numeracja 2.0 oznacza, że jest to druga, rozszerzona i poprawiona wersja dokumentu. Obecnie specyfikacja wraz z załącznikami liczy ponad 1500 stron zaleceń.

Układ kolejnych wpisów, dodawanych systematycznie, będzie tożsamy z samą instrukcją WCAG 2.0, tak, aby po skończeniu tego cyklu powstało swoiste polskie kompendium wiedzy na temat tej agendy (sam WCAG 2.0 Guideline w oryginale rozwijany jest i publikowany w języku angielskim).

Gotowi? Zatem zaczynamy: WCAG 2.0 Zasada 1: Percepcja

Jeśli interesuje Państwa audyt WCAG 2.0 zgodny z Rozporządzeniem Rady Ministrów z dnia 12 kwietnia 2012 r. w sprawie Krajowych Ram Interoperacyjności, zachęcamy do zapoznania się z metodyką prowadzonego przez nas audytu dostępności stron www zgodnego z tym rozporządzeniem, dostępną pod tym odnośnikiem: Audyt WCAG 2.0

Strona www zgodna z wytyczną WCAG 2.0

Postaramy się dziś odpowiedzieć na pozornie proste pytanie, które często słyszymy od inwestorów – dlaczego koszt wykonania strony www zgodnej z WCAG 2.0 jest przeciętnie trzykrotnie wyższy, niż koszt wykonania zwykłej strony? Za przykład posłużą nam jedne z naszych ostatnich stron www zgodnych ze specyfikacją WCAG 2.0 do poziomu AA+: Asystent Warszawa i Ośrodek Nowolipie. Obie zostały zaprojektowane dla Miasta Stołecznego Warszawa i służą do obsługi instytucji i programów przeznaczonych dla osób niepełnosprawnych.

Internauci przyzwyczajeni do współczesnych stron internetowych pełnych multimediów, animacji i atrakcyjnych wizualnie technik, po odwiedzeniu strony zgodnej z WCAG 2.0 często w pierwszym odruchu stwierdzają, że taka strona jest nieefektowna. Z punktu widzenia przeciętnego użytkownika rzeczywiście można tak pomyśleć, jednak wystarczy przypomnieć sobie, że percepcja osób niepełnosprawnych w wielu kwestiach znacznie różni się od odbioru świata przez ludzi pełnosprawnych. Strony WCAG 2.0 wizualnie mogą być co najwyżej estetyczne i nie jest to wynik nieudolności projektanta, a wynik pełnej implementacji szczegółowych zasad dostępności stron www opisanych na ponad tysiącu stron instrukcji WCAG 2.0. Dostępność w tej specyfikacji jest tymczasem rozumiana jako dostępność dla osób z wszystkimi możliwymi rodzajami niepełnosprawności – narządów ruchu, zmysłów i postrzegania.

Wracając do wspomnianych stron www Ośrodek Nowolipie oraz Asystent Warszawa. Zajrzyjcie – zobaczycie na pierwszy rzut oka proste, nieskomplikowane witryny. Czy aby tak jest naprawdę? No cóż, jak mawia Jonathan Ive, główny projektant Apple – Prostota nie jest prosta. Każda z tych witryn składa się z przynajmniej czterech pełnych stron www – wersji podstawowej, wersji o podwyższonym kontraście, wersji o podwyższonym poziomie rozumienia i wersji dla czytników ekranowych. Do tego ma wbudowane warstwy o stałej szerokości, elastyczne i mobilne dla każdego z wariantów, tak, aby były dostępne dla jak najszerszej grupy odbiorców.

W pracach nad stroną obsługującą WCAG 2.0 udział bierze zespół trzykrotnie większy, niż nad zwykłą, nawet najbardziej efektowną, stroną www. Do konsultacji zapraszani są również użytkownicy niepełnosprawni, gdyż to głównie dla nich takie strony są projektowane. W tle pracuje także kilkanaście technologii, których po prostu nie widać, bo nie mają służyć użytkownikom widzącym. Np. gdy stronę ogląda przeciętny internauta, witryna otwiera się jak każda inna strona www. Gdy jednak odwiedzi ją osoba niewidoma korzystająca z czytnika ekranowego, strona się przedstawi, poinformuje gdzie użytkownik się znalazł i poda krótką instrukcje obsługi – informacje te czytnik musi odczytać poprawnie głosem lektora – użytkownik przecież strony www, jako takiej, nie widzi.
Siłą rzeczy taka struktura projektu oznacza większy nakład pracy i większy zespół do wynagrodzenia, a to ma swój wyraz w kosztach, choć – możecie nam wierzyć lub nie – strony www WCAG 2.0. robimy po kosztach, bo też tam, gdzie koszty są największe, pieniędzy zazwyczaj jest najmniej. Komisja EU, Parlament i ministerstwa nakazały dostosowanie stron www do wymagań WCAG 2.0, jednak, jak to zwykle bywa „zapomnieli”, czy też raczej nikt tego po prostu nie sprawdził, że takie dostosowanie oznacza spore koszty. Kwestię kosztów zostawiono zatem tym, których nowe prawo dotyczy najbardziej – głównie instytucjom sprawującym opiekę nad osobami niepełnosprawnymi, a w ich budżecie strony www to ostatnia pozycja, bo na co dzień środków nie wystarcza na pilniejsze potrzeby, związane choćby z rehabilitacją.