Badanie dostępności cyfrowej stron internetowej to żmudny, długotrwały, a zatem zazwyczaj kosztowny proces. Nie zawsze trzeba też badać kompleksowo, bo wystarczy sprawdzić tylko, czy są na stronie błędy. Tak może się dziać podczas odbierania nowej lub zmodernizowanej strony, w ramach kontroli lub przeglądu dostępności.
\n\n\n\nZebrałem kilkanaście testów, które możesz wykonać zupełnie samodzielnie, używając tylko przeglądarki internetowej. Czasem trzeba będzie poszukać w nich jakiejś funkcji, bo różne przeglądarki mają jednak odmienne interfejsy.
\n\n\n\nNa początek wybierz podstrony, którym chcesz się bliżej przyjrzeć. Zawsze powinna się tam znaleźć strona główna, czyli wczytywana po wpisaniu adresu domeny. Bardzo istotną jest podstrona kontaktu, gdzie znaleźć można formularz kontaktowy, dane kontaktowe, a ostatnio coraz częściej chat. A potem inne podstrony kluczowe dla tej strony internetowej.
\n\n\n\n\n\n\n\nSprawdź, czy na stronie internetowej są elementy migające lub błyskające. Na przykład migotanie kogutów policyjnych, błyski fleszy, szybko zmieniające się GIFy. Takie elementy mogą wywołać atak padaczki, a tego przecież nie chcesz.
\n\n\n\n\n\n\n\n\n\nPrzejrzyj stronę internetową pod kątem elementów, które się poruszają lub zmieniają równocześnie z główną treścią. Przykładami są slidery, karuzele, paski informacyjne, kursy walut. Dla wielu użytkowników może to być rozpraszające lub wręcz uniemożliwiające skorzystanie ze strony. Po odkryciu, a do tego pewnie już na głównej stronie, sprawdź czy możesz te elementy zatrzymać lub ukryć. I do tego w sposób prosty i za pomocą klawiatury.
\n\n\n\n\n\n\n\n\n\nPrzejrzyj podstrony i sprawdź, czy przypadkiem nie odtwarza się na nich dźwięk w sposób automatyczny. Może to się dziać od razu po wejściu na stronę, zaznaczeniu jakiegoś elementu lub inny, niezamierzony przez użytkownika sposób. Taki dźwięk skutecznie zagłusza syntezator mowy używanego przez osoby niewidome, a jednocześnie może wzbudzić podejrzenia szefa, że pracujesz akurat nad czymś innym, niż trzeba.
\n\n\n\n\n\n\n\n\n\nNajprościej - to taka ramka, wskazująca na element, który możesz obsłużyć klawiaturą. Takimi elementami są łącza, przyciski, pola wyboru, pola edycyjne, w których coś wpisujesz, czy pola hasła. Aby jednak móc używać klawiatury, użytkownik musi wiedzieć, gdzie znajduje się ten fokus. Dlatego musi być zawsze dobrze widoczny i przemieszczać się w logiczny sposób. Użyj zatem klawisza Tab i przemieszczaj się po stronie obserwując, czy zawsze masz pewność, gdzie jest ten fokus. Jeżeli jest za mało widoczny lub wręcz ukryty - jest to błąd i to dość poważny. Nielogiczna kolejność to utrudnienie, zwłaszcza dla osób słabowidzących.
\n\n\n\n\n\n\n\n\n\nSkoro już śmigasz tym fokusem, to warto sprawdzić, czy strony da się także używać. Sprawdź, czy menu rozwijają się po naciśnięciu Enter i czy możesz się przemieszczać klawiaturą pomiędzy elementami podmenu. No i sprawdź, czy możesz klawiszem Enter otworzyć podstronę spiętą z tym menu. Wypełnij za pomocą klawiatury jakiś formularz, by się upewnić, że da się to zrobić. Do zaznaczania wyboru służy Spacja. Strzałki służą dozmieniania wartości. Wreszcie znajdź przycisk zatwierdzania i kliknij go spacją. Jak się udało, to super.
\n\n\n\n\n\n\n\n\n\nZa pomocą klawisza Tab przejdź przez całą podstronę. Sprawdź, czy jesteś w stanie to zrobić. Jeżeli fokus klawiatury gdzieś się zablokuje, to kiepsko. W szczególności sprawdzaj formularze, bo tam taki problem zdarza się najczęściej. Taki błąd jest krytyczny, bo użytkownik korzystający tylko z klawiatury lub urządzeń wspomagających nie jest w stanie nic zrobić.
\n\n\n\n\n\n\n\n\n\nNa początku każdej podstrony powinien się znajdować skiplink. Jest to specjalne łącze, które przesuwa fokus klawiatury do głównej części, pomijając system nawigacji. To rozwiązanie służy użytkownikom korzystającym z klawiatury, ponieważ dzięki niemu mniej muszą się naklikać. Skiplink powinien być pierwszym elementem przyjmującym fokus klawiatury na każdej podstronie. No to dalej - upewnij się, czy tak faktycznie jest i czy skiplink działa z klawiaturą.
\n\n\n\n\n\n\n\n\n\nKażdy element formularza (pole wyboru, opcji, edycyjne, przycisk, lista wyboru) musi mieć etykietę tekstową. Powinna być zawsze widoczna i powiązana z polem edycyjnym. W przeglądarkach możesz sprawdzić powiązania za pomocą specjalnych narzędzi, ale nie musisz. Kliknij w etykietę i sprawdź, czy element formularza zareagował. Pole wyboru powinno zmienić stan, a w polu edycyjnym powinien się znaleźć kursor do pisania. Na przyciskach także powinny znajdować się etykiety tekstowe, a do tego zgodne z nazwą przypisaną do tego przycisku. Warto pożegnać się z lupkami i sitkami.
\n\n\n\n\n\n\n\n\n\nEtykiety to nie wszystko. One informują o tym, co należy wpisać, a czasem trzeba też wyjaśnić, jak to wpisać. Do tego służą instrukcje, które mogą podpowiadać, że numer konta bankowego ma 26 cyfr, format daty to \"rrrr-mm-dd\", a PESEL można znaleźć na dowodzie osobistym. Ważną, a często ignorowaną instrukcją są wymagania co do hasła. Często są wyświetlone dopiero po wpisaniu takiego, które nie spełnia tych wymagań. Przejrzyj formularze pod tym kątem, a może znajdziesz miejsca, w których niezbędne jest dodanie takich instrukcji.
\n\n\n\n\n\n\n\n\n\nSkoro masz już formularz otwarty, to spróbuj wypełnić go błędnie. Na przykład wpisz adres email bez znaku \"@\". Sprawdź, jak zachowuje się formularz. Jeżeli sprawdza poprawność danych, to powinien zasygnalizować błąd. Ważne jest przy tym, by ten komunikat był dostępny dla wszystkich. Samo oznaczenie czerwonym kolorem nie wystarczy, bo nie każdy zobaczy kolor. Napisanie \"Popraw błąd\" to też trochę za mało. Komunikat o błędzie powinien być wyświetlony za pomocą tekstu, możliwie najbliżej pola w którym ten błąd się znajduje, a treść powinna wyjaśniać, co użytkownik ma zrobić. Może to być na przykład \"Popraw adres email, bo jest w niepoprawnym formacie\".
\n\n\n\n\n\n\n\n\n\nUżytkownicy powiększają tekst w przeglądarce o wiele częściej, niż sądzisz. Służą do tego skróty klawiszowe Ctrl + i Ctrl -. Ustaw zatem przeglądarkę w domyślnej wielkości i powiększaj skrótem klawiszowym stopniowo, aż do osiągnięcia 200% wielkości. Sprawdzaj przy tym, czy powiększający się tekst nie wychodzi poza ekran lub przykrywa inne elementyy. Po prostu strona musi być nadal używalna. W czasach projektowania responsywnego coraz rzadziej zdarza się ten błąd, ale sprawdzić warto.
\n\n\n\n\n\n\n\n\n\nCzęść użytkowników korzysta z innych stylów wyglądu na stronie, niż to przewidział projektant. W niektórych przeglądarkach takie alternatywne style są już przygotowane, a w innych - użytkownik może je sobie dodać do przeglądarki. Twoim zadaniem jest sprawdzenie, czy z innymi stylami strona będzie nadawać się do użytku. Strona nie musi wyglądać tak samo, a przeważnie nawet nie wygląda tak samo. To ma jednak znaczenie drugorzędne. Najprościej sprawdzić jakość strony pod maskującymi stylami wyłączając je w ogóle. Wtedy przeglądarka wyświetli stronę w ustawieniach domyślnych. W różnych przeglądarkach wyłącza się style na różne sposoby.
\n\n\n\n\n\n\n\n\n\nSprawdź, czy opublikowane filmy są zrozumiałe dla osób, które nie widzą lub nie słyszą. Obejrzyj film z wyłączonym dźwiękiem, bo może jednak konieczne są napisy dla osób głuchych. Posłuchaj filmu z zamkniętymi oczami, by mieć jasność, czy potrzebna jest audiodeskrypcja lub przynajmniej tekstowy opis przeznaczony dla osób niewidomych. Nie każdy film wymaga niezbędnie napisów lub audiodeskrypcji, bo treść może wynikać z dźwięku lub obrazu.
\n\n\n\n\n\n\n\n\n\nRóżni użytkownicy potrzebują różnego czasu na zapoznanie się z treścią strony i wykonanie czynności. Czasem jednak niezbędne jest zastosowanie limitów czasowych, choćby ze względów bezpieczeństwa. Zawsze pomyśl, czy takie ograniczenie jest konieczne, a jeżeli tak, to jak sobie z nim poradzą użytkownicy pracujący wolniej. Najbardziej frustrujące bywa automatyczne wylogowanie. Może czas powinien być po prostu dłuższy lub jest przedłużany automatycznie, gdy użytkownik wykona jakąś akcję.
\n\n\n\n\n\n\n\nTen skrót oznacza automatyczny sposób odróżniania człowieka od maszyny. On jest automatyczny dla strony internetowej, ale dla użytkowników bywa utrapieniem. Rodzi też wiele problemów z dostępnością. Warto się dobrze zastanowić, czy taki mechanizm jest konieczny. Pamiętaj, że nie każdy odczyta rozmazane literki lub rozpozna rowery na zdjęciach. Jeżeli alternatywą jest zadanie dźwiękowe, to sprawdź, czy jest przynajmniej po polsku. Najczęściej jest to zaszumiony i bezsensowny zbitek słów po angielsku.
\n\n\n\n\n\n\n\nGrafiki niosą ze sobą pewne informacje, które odbierasz wzrokiem. Jeżeli nie wnoszą niczego nowego, to zostawmy je w spokoju. Warto jednak oznaczyć je jako dekoracyjne. Jeżeli zaś grafika przekazuje informacje, to taką informację powinno się przekazać także tym, którzy tej grafiki nie mogą zobaczyć. Służy do tego atrybut ALT, w którym umieszcza się taki opis. Nie można iść na skróty, kopiując do niego podpis zdjęcia lub tytuł artykułu, bo nie opisuje to zawartości graficznej. Nie ufaj też \"sztucznej inteligencji\" rozpoznającej obrazy. To - póki co - zwykła ściema. A jak podejrzeć teksty alternatywne? Można do tego użyć specjalnych narzędzi lub po prostu wyłączyć ładowanie grafiki. Ja wiem, że grafikiwkłada się na stronę różnymi metodami, ale warto chociaż spróbować. Zamiast grafik pojawią się prostokąty, a w nich powinien wyświetlić się tekst alternatywny przypisany do grafiki. Zwracaj szczególną uwagę na elementy do klikania, na przykład łącza i przyciski. Czy nadal wiesz, co się stanie po kliknięciu?
\n\n\n\n\n\n\n\n\n\n\n\n\n\nGrafiki niosą ze sobą pewne informacje, które odbierasz wzrokiem. Jeżeli nie wnoszą niczego nowego, to zostawmy je w spokoju. Warto jednak oznaczyć je jako dekoracyjne. Jeżeli zaś grafika przekazuje informacje, to taką informację powinno się przekazać także tym, którzy tej grafiki nie mogą zobaczyć. Służy do tego atrybut ALT, w którym umieszcza się taki opis. Nie można iść na skróty, kopiując do niego podpis zdjęcia lub tytuł artykułu, bo nie opisuje to zawartości graficznej. Nie ufaj też \"sztucznej inteligencji\" rozpoznającej obrazy. To - póki co - zwykła ściema. A jak podejrzeć teksty alternatywne? Można do tego użyć specjalnych narzędzi lub po prostu wyłączyć ładowanie grafiki. Ja wiem, że grafikiwkłada się na stronę różnymi metodami, ale warto chociaż spróbować. Zamiast grafik pojawią się prostokąty, a w nich powinien wyświetlić się tekst alternatywny przypisany do grafiki. Zwracaj szczególną uwagę na elementy do klikania, na przykład łącza i przyciski. Czy nadal wiesz, co się stanie po kliknięciu?
\n\n\n\n\n\n\n\n\n\nTen skrót oznacza automatyczny sposób odróżniania człowieka od maszyny. On jest automatyczny dla strony internetowej, ale dla użytkowników bywa utrapieniem. Rodzi też wiele problemów z dostępnością. Warto się dobrze zastanowić, czy taki mechanizm jest konieczny. Pamiętaj, że nie każdy odczyta rozmazane literki lub rozpozna rowery na zdjęciach. Jeżeli alternatywą jest zadanie dźwiękowe, to sprawdź, czy jest przynajmniej po polsku. Najczęściej jest to zaszumiony i bezsensowny zbitek słów po angielsku.
\n\n\n', 'Sprawdź samodzielnie dostępność strony internetowej za pomocą przeglądarki', '', 'inherit', 'closed', 'closed', '', '2753-revision-v1', '', '', '2022-06-12 17:49:49', '2022-06-12 15:49:49', '', 2753, 'https://informaton.blog/?p=2772', 0, 'revision', '', 0); INSERT INTO `wp_posts` (`ID`, `post_author`, `post_date`, `po