Dostępnik o porządnym badaniu stron internetowych

W piątek zrobiłem webinar na temat metodyki badania cyfrowej dostępności stron internetowych. 45 minut to mało i pozostał niedosyt. Dlatego dzisiaj napiszę i dodam łącza. Dzisiaj o WCAG EM.

Audyt od oceny różni się tym samym, czym gotowanie zgodnie z przepisem od wrzucania na patelnię składników wyciągniętych na chybił-trafił z lodówki. Przy badaniu dostępności strony internetowej warto korzystać z przepisu, żeby wynik był wiarygodny i powtarzalny.

Ciągnąc dalej tę kuchenną przenośnię - różne są książki kucharskie, a w nich różne przepisy na sernik. Tak samo jest z metodykami badania stron internetowych. Jednak jest jedna szczególna, bo stworzona przez Web Accessibility Initiative (WAI), czyli tę samą grupę, która stworzyła same WCAG. I to właśnie o niej będę pisał.

Wprowadzenie, czyli po co i dla kogo jest WCAG-EM

Metodyka WCAG-EM jest podejściem do oceny zgodności stron internetowych z Wytycznymi dostępności treści internetowych (WCAG). Opisuje procedurę oceny stron internetowych, zawiera wskazówki dla oceniających i promuje dobre praktyki. Jednak nie podaje instrukcji, jak oceniać poszczególne elementy stron internetowych, pozostawiając to kompetencji oceniających. Na szczęście mamy narzędzia, które mogą Cię w tym procesie wesprzeć.

Metodyka jest głównie zaprojektowana do oceny istniejących stron internetowych. Może być również przydatna na wcześniejszych etapach projektowania i tworzenia stron internetowych. Nie określa konkretnych technologii sieciowych, narzędzi oceny, przeglądarek internetowych, technologii wspomagających wykorzystanych w ocenie. Jest odpowiednia do stosowania w różnych kontekstach oceny, w tym samooceny i oceny zewnętrznej.

Pomimo że metodyka jest skierowana głównie do specjalistów, to nic nie stoi na przeszkodzie, by użyć jej do oceny przez osoby, które nie czują się specjalistami. Pozwala na usystematyzowane ocenianie, nawet jeżeli niezbyt dokładne. Dlatego zachęcam Cię przynajmniej do spróbowania.

Etapy badania, czyli krok po kroku

Metodyka WCAG-EM opisuje pięć etapów badania:

1. Zdefiniuj zakres oceny - określ cel, poziom zgodności i zakres ocenianej strony internetowej.

2. Rozpoznaj zasoby strony internetowej - zidentyfikuj wszystkie typy podstron, elementów i funkcji na ocenianej stronie internetowej.

3. Wybierz reprezentatywną próbkę podstron internetowych - wybierz podzbiór podstron internetowych, który reprezentuje całą ocenianą stronę internetową.

4. Oceń próbkę podstron internetowych - sprawdź, czy każda podstrona w próbce spełnia kryteria sukcesu WCAG na wybranym poziomie zgodności.

5. Opisz wyniki oceny - sporządź raport zawierający informacje o zakresie, metodzie i wynikach oceny.

Te etapy nie są równorzędne pod względem pracochłonności i czasochłonności. Nie każdy wymaga też bardzo wysokich kwalifikacji w cyfrowej dostępności. W dalszej części opiszę dokładniej te etapy i podpowiem, czy są trudne, czy do zrobienia dla każdego. Proponuję od razu skorzystać z narzędzia WCAG-EM Report Tool, aby ułatwić sobie stosowanie metodyki WCAG-EM, rejestrować wyniki i pobierać raport oceny. Polską wersję zawdzięczamy Stefanowi Wajdzie.

Otwórz generator w oddzielnej zakładce lub oknie przeglądarki i zaczynamy. Co pewien czas zapisuj postępy pracy, bo dane nie zapisują się nigdzie indziej. Użyj skrótu Ctrl + s lub wybierz opcję zapisania, a na Twoim dysku wyląduje plik JSON, który możesz potem wczytać z powrotem do generatora.

Etap 1, czyli co właściwie badamy

Etap 1 polega na zdefiniowaniu zakresu oceny. W generatorze musisz wprowadzić następujące informacje:

1. Nazwa strony internetowej, na przykład “Strona internetowa szkoły podstawowej nr 1 w Wilamowicach”.

2. Zakres oceny. Tu koniecznie musisz określić, co właściwie badasz. W zależności od tego dobierzesz próbkę w kolejnych etapach. Możesz wpisać tutaj “Badanie całej strony internetowej” lub ograniczyć, na przykład “Badanie obejmie formularz rekrutacyjny do szkół i przedszkoli”. Ustal to dokładnie z zamawiającym.

3. Wersja i poziom WCAG. W polskich warunkach zazwyczaj będzie to WCAG 2.1 i poziom AA.

4. Technologie użyte w badaniu. W tym polu wpisz, czego będziesz używać podczas oceny. Absolutnym minimum jest wskazanie systemu operacyjnego i przeglądarki, na przykład “Chrome pod Windows”. Porządne badanie musi być przeprowadzone także z użyciem czytników ekranu, na kilku przeglądarkach. Podanie tych danych pozwoli na odtworzenie błędów przez inną osobę.

5. Dodatkowe wymagania mogą być wskazane przez zamawiającego. Może sobie zażyczyć, by dostać wykaz wszystkich błędów, a nie tylko przykładów lub wskazania gotowych rozwiązań do wdrożenia (fragment kodu). Przy samoocenie niczego tu nie wpisuj.

Ten ekran generatora nie powinien nastręczać problemów. No ale to tylko bardzo wstępny etap, więc przejdź do drugiego.

Etap 2, czyli poznawanie strony internetowej

Etap 2 polega na poznaniu zasobów strony internetowej. W tym etapie musisz zidentyfikować wszystkie typy podstron, elementów i funkcji na ocenianej stronie internetowej, które mogą mieć wpływ na zgodność z WCAG. Możesz to osiągnąć między innymi przez:

1. Przeskanowanie strony internetowej, o czym nieco dalej.

2. Przeklikanie się przez stronę internetową, by ją lepiej poznać. Nawet jeżeli to Twoja strona internetowa, to jeszcze nie znaczy, że ją znasz! Czy wiesz, ile ma podstron? Pytam retorycznie.

3. obejrzenie różnych podstron pod kątem ich wyglądu i funkcji. Przeciętna strona internetowa ma zaledwie kilka lub kilkanaście szablonów. Każdy z nich musi się potem znaleźć w próbce do badania.

Skanowanie strony internetowej

Teraz kilka słów o ułatwianiu sobie życia. Dobry obraz strony internetowej daje mapa strony, czyli plik zawierający wszystkie łącza do zasobów na stronie internetowej. Pozwala oszacować wielkość strony, a przy użyciu dodatkowych narzędzi także podstrony generujące problemy, którym warto się lepiej przyjrzeć.

Mapa strony internetowej to najczęściej plik XML umieszczony w głównym katalogu strony. Sprawdź jej obecność wpisując adres strony, a za tym odwołanie do pliku, na przykład https://informaton.blog/sitemap.xml. Jeżeli takiej mapy nie ma, to musisz uruchomić narzędzie zwane crawlerem, które przekopie się przez stronę i poda Ci na tacy listę wszystkich adresów URL do zbadania. Takich narzędzi jest bardzo dużo. Jeżeli chcesz to robić na swoim komputerze z Windows, to możesz użyć My Sitemap Generator ze sklepu z aplikacjami. Są też narzędzia dostępne na stronach internetowych, które mogą także się sprawdzić.

Niezależnie od tego, jak zdobędziesz mapę strony, możesz przeprowadzić ogólny test dostępności zgromadzonych podstron. Prosto mówiąc - uruchamiasz aplikację, karmisz ją tymi adresami i spokojnie czekasz na wynik. Na koniec otrzymasz raport z badania automatycznego, który pozwoli Ci na rozpoznanie problematycznych obszarów.

Obecnie używam do tego narzędzia o nazwie Evaluatory, które zawiera w sobie 4 moduły, w tym Axe do znajdowania błędów dostępności i HTML Validate do sprawdzania poprawności kodu HTML. Narzędzie jest bezpłatne i szybkie. Jeżeli na stronie internetowej jest mapa, to wystarczy proste polecenie w terminaluu. Teraz możesz zrobić sobie kawę i poczekać, a po pewnym czasie wyskoczy Ci strona z zestawieniem, w którym jest tabela z wszystkimi podstronami z mapy strony. W tabelce masz także liczbę problemów i łącze do raportu opisującego błędy na tej konkretnej podstronie. To łącze prowadzi do raportu ze skanowania mojej strony internetowej i nie będzie wisiało wiecznie. Jako ćwiczenie możesz wskazać, które błędy są powtarzalne, a zatem systemowe, a jakie incydentalne. No i jakiego rodzaju są te błędy.

Jeżeli nie pasuje Ci Evaluatory, to do dyspozycji masz wiele innych podobnych narzędzi, jak Axe-Scan, PA11Y-CI, czy Auto-Lighthouse. Ten ostatni zajmie się nie tylko dostępnością, ale też wydajnością, bezpieczeństwem i SEO.

W generatorze raportu możesz już podać kolejne informacje:

1. Zastosowane technologie. Możesz zaznaczyć technologie używane na stronie internetowej, w tym HTML, CSS, a być może gdzieś nawet Flash. Jeżeli nie umiesz rozpoznać tych technologii, to pomiń ten fragment i zostaw go specjalistom.

2. Możesz też dodać uwagi o stronie internetowej. Rekomenduję wpisanie tu kluczowej funkcji strony internetowej, bo to wokół niej powinno koncentrować się badanie. Taką kluczową funkcją może być informowanie mieszkańców miasta o wydarzeniach, robienie zakupów, składanie deklaracji podatkowych i podobne. Gdy znajdziesz tę kluczową funkcję, skup się przede wszystkim na niej.

Zbadanie zasobów strony internetowej pomoże Ci wybrać reprezentatywną próbkę stron internetowych do oceny w następnym etapie.

Etap 3, czyli dobieramy próbki do badania

Etap 3 polega na wyborze reprezentatywnej próbki podstron. W tym etapie musisz wybrać podzbiór stron internetowych, który reprezentuje całą ocenianą stronę internetową. Wykorzystaj do tego zebrane wcześniej informacje.

1. Raport z automatycznego przeglądu. Powtarzające się błędy mają raczej charakter systemowy, więc wystarczy w próbce jedna podstrona, na której jest konkretny błąd. Ważne są podstrony, gdzie błędów jest dużo, pomijając te systemowe. Często dotyczy to formularzy.

2. Kluczowa funkcja strony wskaże Ci, jakie podstrony włączyć do badania. Możesz tu nawet uwzględnić cały proces, a nie pojedynczą podstronę. W sklepie internetowym może to być choćby proces składania zamówienia i płacenia.

3. Szablony podstron na stronie internetowej. Wybierz przynajmniej po jednej podstronie reprezentującej szablon. Na stronie informacyjnej mogą to być strona domowa, wyświetlona aktualność, podstrona z kontaktem, formularz kontaktowy, wyniki wyszukiwania itp. A jeżeli jest to strona podmiotu publicznego - koniecznie dodaj podstronę z deklaracją dostępności.

Wybór reprezentatywnej próbki podstron internetowych jest konieczny wtedy, gdy nie jest możliwe lub praktyczne ocenienie całej zawartości strony internetowej. Jeśli jednak jest to możliwe i praktyczne, metodyka zaleca ocenienie wszystkich podstron internetowych w ramach zakresu oceny. Co to oznacza w praktyce? Moim zdaniem badanie całej strony jest sensowne tylko wtedy, gdy strona jest bardzo mała, składa się z najwyżej 20 podstron. Wielkość próbki zależy zaś od sposobu jej doboru, wielkości strony internetowej i wymagań dodatkowych zamawiającego. Przeciętna strona internetowa wymaga zbadania do kilkunastu podstron.

Ekran generatora dotyczący tego etapu nie wymaga wyjaśnień. Nazwa i adres lub opis każdej strony wybranej do próbki. Z tym na pewno każdy sobie poradzi. Trudniej jest w następnym etapie.

Etap 4, czyli zaczynamy badanie

Etap 4 polega na ocenie próbki stron internetowych. W tym etapie musisz sprawdzić, czy każda podstrona w próbce spełnia kryteria sukcesu WCAG na wybranym poziomie. To jest ten moment, kiedy do pracy musi usiąść specjalista od dostępności. To jest długi proces, wymagający sporej wiedzy.

Możesz zapytać - to po co mnie tu zaprowadziłeś? Uważam, że kompletny audyt może zrobić tylko dobry specjalista od cyfrowej dostępności. Jednak Ty możesz zrobić taki ciut gorszy, a za to samodzielnie. Przy okazji dużo się nauczysz i może z czasem staniesz się guru dostępności. Teraz podpowiem, jak zacząć.

Tak jak metodyka WCAG-EM prowadzi Cię przez całość procesu badania, tak są narzędzia specjalnie przygotowane do realizacji tego konkretnego etapu. Wydaje mi się, że nie ma żadnego po polsku, a przynajmniej ja nie znalazłem. Z tych po angielsku proponuję Accessibility Insights od firmy Microsoft. Link prowadzi do magazynu z rozszerzeniami dla przeglądarki Edge, ale możesz je zainstalować także w Chrome.

Działanie jest następujące: otwierasz podstronę z próbki i klikasz na ikonę rozszerzenia. Wyświetli Ci się strona, na której możesz wybrać jedną z 3 opcji badania:

1. FastPass, czyli całkowicie automatyczny test.

2. Quick Assess, czyli wspomagane podstawowe testy.

3. Assessment, czyli pełne badanie.

Pierwsze narzędzie niewiele wnosi, bo takie automatyczne testy zostały już wykonane wcześniej. Poza tym i tak będą zrobione przy 2 kolejnych opcjach. Quick Assess, jak sama nazwa wskazuje, służy do szybkiego badania. I właśnie to proponuję Ci na początek. Liczba testów jest ograniczona, wszystkie są ładnie wyjaśnione, a rozszerzenie podpowiada na każdym kroku, jak zrobić test. Assessment to już zdecydowanie więcej pracy i kompetencji. Jeżeli zaczynasz z dostępnością i jej badaniem, możesz się łatwo zgubić. Zachęcam Cię jednak przynajmniej do zerknięcia.

Wydaje mi się, że sposobu używania nie trzeba wyjaśniać, bo każde z tych narzędzi jest bardzo intuicyjne. Na bieżąco informuje Cię, co jest jeszcze do zrobienia. Każdy ekran z testem ma wyjaśnienie, jak taki test przeprowadzić, pokazuje elementy do sprawdzenia. Chociaż zatem proces bywa długi i żmudny, to przynajmniej nie trzeba walczyć z samym narzędziem.

Wyniki testów zapisuj od razu w generatorze raportu. Rozszerzenie podpowie, którego kryterium sukcesu dotyczy problem.

W generatorze raportu możesz zaznaczać, jaki jest wynik testu. Do wyboru masz następujące możliwości:

1. Nie sprawdzane.

2. Zaliczone, w sytuacji gdy wszystko jest w porządku.

3. Defekt, gdy pojawił się błąd.

4. Nie dotyczy, gdy nie ma elementu do zbadania, na przykład nie ma filmu.

5. Nie można powiedzieć - w sytuacji, gdy nie umiesz zdecydować. To może być informacja dla programisty lub kogoś znającego się na dostępności.

Niezależnie od wyboru, dodaj informację opisową w polu obserwacji. Może być bardzo prosta, na przykład “Nie widzę kursora w formularzu kontaktowym.”

Nie będę opisywał, jakich narzędzi używać przy badaniu, bo to temat na książkę. Zawsze warto zrobić przynajmniej pobieżne testy z użytkownikami, na przykład przesłać link osobie słabowidzącej. A jak już się napracujesz, to przejdź do ostatniego etapu.

Etap 5, czyli piszemy raport

Etap 5 polega na zgłoszeniu wyników oceny. W tym etapie należy sporządzić raport zawierający informacje o zakresie, metodzie i wynikach oceny. Większość tych informacji już masz w raporcie, jeżeli korzystasz w procesie badania z narzędzia do raportowania. Pozostanie Ci tylko wprowadzić informacje podsumowujące.

1. Tytuł raportu. Generator zaproponuje jego treść, ale zazwyczaj nie jest to zbyt gramatyczne.

2. Zlecający badanie. Tu wpisz dane osoby, komórki lub organizacji. Może to być “Adam Pietrasiewicz”, “wydział zamówień publicznych” lub “Ministerstwo Funduszy i Polityki Regionalnej”.

3. Oceniający. Tu wpisz swoje imię i nazwisko. Moim zdaniem brak autora raportu oznacza, że autor nie chce wziąć odpowiedzialności za wykonaną pracę.

4. Data badania. To bardzo ważny element, bo strony internetowe szybko się zmieniają i badanie zawsze jest istotne w konkretnym momencie.

5. Podsumowanie badania. Tu wpisz swoją ogólną ocenę i wskaż najbardziej istotne błędy do usunięcia. Na szczegóły jest inne miejsce. Wystarczy dosłownie kilka zdań.

6. Szczegóły oceny. To pole jest opcjonalne, ale dla mnie jest ważne i zawsze wprowadzam tu informacje. Mogę w tym miejscu posegregować problemy na krytyczne, istotne i mniejszej wagi. Zazwyczaj proponuję także konkretną kolejność wprowadzania poprawek, jeżeli nie jest możliwe poprawienie wszystkich.

Cała reszta jest już w raporcie. Teraz możesz cały raport pobrać w formacie HTML i JSON. Plik HTML możesz opublikować w deklaracji dostępności lub w innym miejscu ocenianej strony. Plik JSON jest idealny do dalszego przetwarzania, na przykład w bugtrackerze. Zachowaj go dla osoby, której zadaniem będzie poprawianie błędów technicznych.

Okropnie długi mi wyszedł ten Dostępnik. Starałem się rzetelnie opisać proces badania i praktycznie podpowiedzieć, jak go przejść. Poważnie rozważam też uruchomienie szkolenia na ten temat, więc napisz do mnie, czy warto. A jeszcze bardziej mi pomożesz, jeżeli popytasz o to także innych znajomych. To spore wyzwanie organizacyjne i nie chcę go podejmować bez sensu.

Ze względów metodologicznych zadam konkretne pytanie: czy chciałabyś/chciałbyś wziąć udział w takim szkoleniu?

Wieści o dostępności

Niezawodna Justyna Mańkowska z Fundacji Katarynka zaprasza do poradnika i kolejnego odcinka podcastu. Temat jest wspólny i dotyczy korzystania z kultury przez osoby w kryzysie zdrowia psychicznego. A była też konferencja, ale jak się nie czyta Dostępnika, to potem się żałuje.

W zeszłym tygodniu działo się bardzo dużo w związku z dniem dostępności. Mateusz Różański zorganizował wydarzenie Polityk bez myszy, w którym brałem udział i jeszcze ściągnąłem Wojtka Kutyłę. Na koniec Mateusz zmusił nas do nagrania podcastu, ale chyba go na razie nie opublikował. Może słabo wyszliśmy…

Pytasz, gdzie są nagrania z webinarów, które zrobiliśmy w piątek? Zanim do tego przejdę, to pochwalę się cyferkami. Na to nasze wydarzenie zarejestrowało się ponad 500 osób. Ile uczestniczyło - do końca nie wiemy, bo ludzie dołączali także poza rejestracją. Ale było ich co najmniej 460. 300 osób dostanie certyfikaty uczestnictwa. A nagrania będą, ale jeszcze potrzebujemy chwili. Dam oczywiście znać.

Z prywatnych rzeczy - zostałem członkiem grupy roboczej do spraw sztucznej inteligencji w dostępności. Powstało takie ciało przy Radzie Dostępności i bardzo chętnie dołączyłem. Ostatniego dnia maja jest pierwsze spotkanie, więc skrobnę kilka zdań na ten temat, jeżeli będzie o czym pisać…