blog na temat dostępności stron internetowych

Przejdź do głównej treści

Przydatne narzędzia do sprawdzania dostępności

W poprzednim artykule opisałam trzy różne metody oceny dostępności serwisu internetowego. Jak wspomniałam, jedną z podstawowych metod jest manualny test przeprowadzany przez specjalistę do spraw dostępności. W tym artykule chciałam pokrótce opisać kilka narzędzi, którymi najczęściej posługuję się przy przeprowadzaniu audytu.

Inspekcja kodu

Ocena dostępności strony internetowej opiera się w znacznej mierze na analizie kodu, dlatego też potrzebne jest narzędzie pozwalające na jego inspekcję. Każda z współczesnych przeglądarek posiada tego typu narzędzia; w Internet Explorer wciśnięcie klawisza F12 otwiera okno “Narzędzia deweloperskie”, a w Chrome i Firefox kliknięcie prawym przyciskiem myszy (lub wciśnięcie Shift + F10) pozwala na wybranie opcji inspekcji elementu. Ja osobiście najbardziej jednak lubię posługiwać się darmowym dodatkiem “Firebug” dostępnym w przeglądarce Firefox.

Kolejnym przydatnym narzędziem (zapewne dobrze znanym wszystkim front-end developerom) jest pasek narzędziowy “Web Developer”, również dla przeglądarki Firefox. Uważam go za niezastąpione narzędzie w przeprowadzaniu audytu strony. Oferuje on mnóstwo użytecznych opcji, takich jak podgląd strony z wyłączonymi stylami, wyświetlenie wartości atrybutu “alt” obok każdego obrazu, zaznaczenie elementów <img> bez atrybutu “alt”, wyróżnianie pól formularzy bez etykiet, wyświetlanie struktury nagłówków strony, i wiele innych. Dodatek ten korzysta również z walidatora W3C, umożliwiając sprawdzenie poprawności kodu HTML i CSS.

Pokazany jest pasek narzędzi Web Developer, zawierający takie opcje jak: Wyłącz, Ciasteczka, CSS, Formularze, Obrazki, Informacja, Różne, Wyróżnianie, Rozmiar, Narzędzia, Pokaż źródło i Opcje

Fragment okna przeglądarki Firefox z zaznaczonym paskiem “Web Developer”

Sprawdzając strukturę nagłówków strony napisanej w HTML5, warto skorzystać z kolejnego dodatku na Firefox – “HeadingsMap”.

Powiększanie treści strony

Innym pomocnym dodatkiem do Firefoxa jest “NoSquint”. Pozwala on na powiększenie treści całej strony (tzw. opcja Page Zoom), bądź też na zwiększenie rozmiaru tekstu (Text zoom). Dzięki temu można sprawdzić, czy powiększenie tekstu nie powoduje utraty treści bądź też funkcji na danej stronie. Jest to istotne dla użytkowników niedowidzących, dla których domyślna wielkość tekstu jest niewystarczająca.

Sprawdzanie kontrastu

Jednym z wymagań dostępności jest zapewnienie odpowiedniego kontrastu pomiędzy tekstem a tłem, na którym jest on wyświetlony. Moim ulubionym narzędziem do sprawdzania kontrastu między wybranymi elementami jest Colour Contrast Analyser, darmowy program autorstwa grupy Paciello. Umożliwia on sprawdzenie kontrastu pomiędzy dwoma elementami przez wprowadzenie kodów koloru, bądź też przez użycie tzw. pipety.

Okno programu Colour Contrast Analyser, pokazujące wartość kontrastu pomiędzy dwoma wybranymi kolorami, i informację, czy kontrast ten jest zgodny z WCAG

Okno programu Colour Contrast Analyser

Technologie asystujące

Częścią każdego audytu dostępności powinien być test z użyciem technologii asystujących, a szczególnie z czytnikami ekranu. Najpopularniejszym czytnikiem ekranu na świecie jest JAWS, niestety oprogramowanie to jest dość drogie. Na szczęście jest dostępna jego wersja demo, z której można korzystać przez 40 minut (aby kontynuować korzystanie z tej wersji należy zestartować komputer). Zamiast JAWS możemy wybrać czytnik NVDA, który można pobrać za darmo (aczkolwiek zalecane jest dokonanie dotacji na poczet dalszych prac nad jego rozwojem). Posiadacze urządzeń Apple mogą z kolei korzystać z darmowego czytnika VoiceOver, który jest wbudowany w system Mac OS X.

Inne propozycje?

To są narzędzia, których ja najczęściej używam w pracy. Jeśli chcielibyście polecić te, których sami używacie na codzień, zapraszam do komentarzy.

Dodaj komentarz

Należy wypełnić wszystkie pola oznaczone asteryskiem (*).
Zanim komentarz zostanie opublikowany będzie musiał zostać zatwierdzony przez moderatora.

Możesz wykorzystać następujące elementy HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>