Jak projektować dostępne strony

Transkrypt

1 Jak projektować dostępne strony Przemysław Marcinkowski

2 Plan prezentacji 1. Dlaczego powstał dokument WCAG? 2. Priorytety 3. Tworzenie tekstów 4. Linki 5. Nawigacja 6. Grafika 7. Formularze 8. Tabele 9. Flash 10. Czy Twój serwis jest dostępny? 11. Pełne testowanie

3 Dlaczego powstał dokument WCAG? (Web Content Accessibility Guidelines) Zapewnienie płynnej transformacji Odseparowanie struktury od prezentacji (CSS) Dostarczenie w pełni samodzielnego tekstu. Jeśli część treści lub nawigacji ma inną formę należy dostarczyć tekstowy odpowiednik. Tworzenie dokumentów, które działają nawet gdy odbiorca nie widzi czy nie słyszy Tworzenie dokumentów, które nie wymagają tylko jednego rodzaju sprzętu do odczytania Tworzenie treści zrozumiałej i łatwej w nawigacji wyrazistość języka i jego prostota zrozumiały mechanizm nawigacyjny do przemieszczania się pomiędzy stronami plan orientacyjny

4 Priorytety 1. Priorytet 1 (WAI poziom A) Autorzy stron muszą zastosować się do tego punktu. W przeciwnym razie, jedna lub więcej grup nie będzie miała dostępu do informacji w dokumencie. 2. Priorytet 2 (WAI poziom AA) Autorzy stron powinni zastosować się do tego punktu. W przeciwnym razie, jedna lub więcej grup będzie miała utrudniony dostęp do informacji zawartych w dokumencie. Zastosowanie tego punktu usunie znaczne bariery dostępu do dokumentów. 3. Priorytet 3 (WAI poziom AAA) Autorzy stron mogą zastosować się do tego punktu. W przeciwnym razie, jedna lub więcej grup będzie miała poniekąd utrudniony dostęp do informacji zawartych w dokumencie. Zastosowanie jego poprawi dostęp do dokumentów.

5 Tworzenie tekstów W języku HTML wyróżniamy dwa podstawowe typy elementów określających atrybuty tekstu: Znaczniki formatujące - zmieniają wygląd tekstu, np.: pogrubienie - <b> pochylenie - <i> podkreślenie - <u> czcionka - <font> Znaczniki semantyczne - określają charakter (znaczenie) tekstu, np.: nagłówek - <h1>, <h2> mocne wyróżnienie - <strong> zmiany - <ins>, <del>

6 Linki Treść linku powinna wyraźnie informować użytkownika, dokąd go doprowadzi lub jaką akcję wywoła.

7 Linki - treść Należy unikać stosowania zwrotów, które poza kontekstem nic nie mówią: kliknij tutaj, więcej, jak również samych znaków nietekstowych: >. Treść linku powinna być zrozumiała poza kontekstem.

8 Linki - wyróżnienie Link powinien być wyróżniony od reszty tekstu (podkreślenie, pogrubienie, inny kolor), ale nigdy tylko kolorem.

9 Linki graficzne Najważniejszym elementem linku graficznego jest atrybut alt w znaczniku <img>. <a href="index.php" title="strona główna"> <img src="images/logoshadok.jpg" alt="strona główna"/> </a> Widok standardowy Widok dla czytnika ekranu (screen reader) Widok w przeglądarce tekstowej Lynx

10 Linki graficzne Gdy brak atrybutu alt w znaczniku <img>. <a href="index.php"><img src="images/logoshadok.jpg" /></a> Widok standardowy Widok dla czytnika ekranu (screen reader) Widok w przeglądarce tekstowej Lynx

11 Nawigacja Tworzenie jednoznacznych tytułów stron <title>usłyszeć Teatr - Wydarzenia - Dla niesłyszących - Udogodnienia dla widzów z dysfunkcjami w Teatrze Polskim</title> <title>bezpieczny lek na ból - APAP apap.pl</title>

12 Nawigacja Tworzenie ścieżki okruszków Jesteś tutaj: <a href="strona-glowna">strona główna</a>» <a href="informacje" >Informacje</a>» <a href="godziny-urzedowania">godziny urzędowania</a>

13 Nawigacja pomijanie powtarzających się elementów HTML <div class="hide"> <a href="#mm">przejdź do menu głównego</a> <a href="#txt">przeskocz do treści</a> <a href="?p=map#txt">mapa strony</a>... </div> <h2><a name="mm">menu</a></h2>... <h2><a name="txt">o nas</a></h2> CSS.hide {position:absolute; left:-10000px;}

14 Grafika element estetyczny Dla graficznych elementów estetycznych lub pozycjonujących należy użyć pusty atrybut alt. <img src="images/ozdobnik.jpg" alt=""/>

15 Grafika ilustracja Jak bardzo szczegółowy powinien być opis alt ilustracji? W atrybucie alt powinien znaleźć się krótki opis szczegółów, jakie przedstawia ilustracja w zależności od kontekstu. Co zrobić kiedy opis ma być bardziej szczegółowy? Ilustracja może być linkiem do osobnej strony z opisem Opis może znaleźć się obok ilustracji

16 Formularze Widok standardowy Widok z wyłączonymi stylami Wszystkie pola powinny być powiązane z etykietami <label> Jeśli przyciski osadzone są jako type= image muszą posiadać atrybut alt opisujący akcję jaka będzie wykonana Jeśli formularz jest rozbudowany należy pogrupować pola w tematyczne bloki <fieldset>, <legend> Należy unikać automatyzacji formularzy, np. wysyłanie formularza przy pomocy onchange

17 Tabele caption tytuł tabeli th nagłówki tabeli abbr - skrótowy opis zawartości komórki w tabeli summary - streszczenie tabeli

18 Flash niedostępny dla... Dla użytkowników korzystających z czytników ekranu osadzony flash jest niewidoczny. Szansa na odczytanie zaistnieje jeśli: posiada przeglądarkę Internet Explorer posiada wtyczkę flash w wersji nie mniejszej niż 6 posiada czytnik JAWS lub Window-Eyes przy tworzeniu animacji flash zostały wzięte pod uwagę zalecenia firmy Adobe dotyczące zagadnień dostępności Użytkowników starszych i niedowidzących korzystających z ułatwień dostępnych w przeglądarkach Urządzeń mobilnych (np. telefony komórkowe) w zależności od wersji oprogramowania Przeglądarek tekstowych

19 Sprawdzanie dostępności serwisu Sprawdź czy serwis jest zgodny ze standardami internetowymi. Posłużą nam walidatory dostępne na stronach W3C. HTML, XHTML - CSS - Przy użyciu analizatorów dostępnych w sieci sprawdź czy kontrast na stronie jest wystarczający. Sprawdź czy stronę można bez problemu obsłużyć tylko za pomocą klawiatury, bez użycia myszki. W ten sposób możemy wychwycić czy na stronie występują elementy uzależnione od urządzenia (np. zdarzenia onmouseover, onclick, itp.) Wykorzystując np. przeglądarkę Opera lub FireFox możemy wyłączyć na stronie style, grafikę, javascript i przekonać się czy w dalszym ciągu jest swobodny dostęp do wszystkich informacji. Na koniec możemy posłużyć się walidatorami dostępności, np. Cynthia: WAVE: W tym wypadku jednak musimy prześledzić zwrócone wyniki. Tylko część wytycznych z listy kontrolnej WCAG można poddać automatycznej walidacji.

20 Pełne testowanie Analiza ekspercka Ekspert sprawdza serwis uwzględniając różne poziomy dostępności określone w dokumencie WCAG. Analiza może składać się z następujących kroków: sprawdzenie zgodności z W3C, W3C CSS sprawdzenie zgodności z WAI (WCAG) analiza kontrastu sprawdzenie poprawności działania w: systemach Windows, Mac OS X, Linux, przeglądarkach współczesnych i starszych wersjach, przeglądarce tekstowej, przeglądarce mobilnej sprawdzenie szybkości działania serwisu na łączach o różnej prędkości Do każdego opisywanego problemu ekspert określa sposoby ich usunięcia lub wskazówki.

21 Pełne testowanie User experience Serwis trafia do niewidomych, niedowidzących oraz głuchych audytorów. Kontroli podlegają m.in. ergonomia strony dostępność zawartych informacji czytelność struktury serwisu (menu, nagłówki, etc.) prawidłowe opisy w tekstach alternatywnych linków i grafik Osoby głuche sprawdzają czy treści prezentowane za pomocą plików dźwiękowych mają swoje odpowiedniki tekstowe. Analizują również stopień skomplikowania tekstu

22 Dziękuję za uwagę Przemysław Marcinkowski