Dostępność serwisów internetowych cz.2

W pierwszej części artykułu dotyczącego dostępności stron internetowych opisałam ogólnie pojęcie dostępności, korzyści oraz koszty wdrożenia. W drugiej części skupię się na wybranych podstawowych zasadach, którymi należy się kierować, by nasz serwis uczynić bardziej dostępnym.

Zalecenia odnośnie dostępności stron WWW sformułowane w dokumencie WCAG 2.0 są dosyć zwięzłe, jednak razem z dokumentami uzupełniającymi: Understanding WCAG 2.0 oraz Techniques for WCAG 2.0 liczą około tysiąca stron. Ze względu na tak dużą objętość, niewielu programistów zagłębia się w zalecenia dotyczące dostępności. Dlatego też ich wiedza w tym temacie jest znikoma.

W dzisiejszym artykule przytoczę najważniejsze moim zdaniem zasady dotyczące dostępności stron internetowych.

Zrozumiałość tekstów

Podstawową zasadą dostępności jest sformułowanie tekstu w taki sposób, aby był zrozumiały dla wszystkich, bez względu na poziom wykształcenia oraz ograniczenia fizyczne i intelektualne.

Aby było to możliwe, należy używać prostego i zwięzłego języka, unikając specjalistycznej terminologii oraz zdań wielokrotnie złożonych. Jeśli konieczne jest wprowadzenie specjalistycznych pojęć, powinny one być wyjaśnione w załączonym na stronie słowniczku. Jeśli używamy skrótów literowych, powinniśmy je rozwinąć przy pierwszym użyciu.

Formatowanie tekstu

Kolejnym krokiem na drodze do dostępności serwisu jest takie sformatowanie zamieszczonego na nim tekstu, które ułatwi jego przyswojenie.

Tutaj szczególnie istotny jest podział na akapity, ponieważ tekst staje się wtedy bardziej przejrzysty dla czytelnika. W jednym akapicie powinno się zawierać nie więcej niż 10 linijek tekstu. Poza akapitami warto również stosować nagłówki, które pozwolą na wstępne rozeznanie, czego będą dotyczyły poszczególne akapity. Bardzo pomocne jest także stosowanie uporządkowanych oraz nieuporządkowanych list.

Mimo iż ze względów estetycznych najbardziej upodobaliśmy sobie akapity wyjustowane zarówno do prawej jak i lewej strony, tekst powinno się justować wyłącznie do lewej strony. Taki układ sprawia, że łatwiej się go czyta, a w razie zagubienia się szybciej możemy zlokalizować zgubioną linijkę.

Ze względu na fakt, iż przeciętny użytkownik internetu nie czyta tekstu, a jedynie skanuje go wzrokiem w poszukiwaniu najistotniejszych informacji, warto jest pogrubić czcionkę wskazując na najważniejsze treści.

Zapisz się do newslettera

i pobierz checklistę
wdrożeniową GA4

Dzięki niej prawidłowo wdrożysz Google
Analytics 4 na swojej stronie!

Tak, zapisz mnie!

email marketing powered by FreshMail

Wyrażam zgodę na przetwarzanie przez 4PEOPLE Sp. z o.o. z siedzibą w Katowicach moich danych osobowych w celu realizacji usługi NewsletterRozwiń całość

Do wybranych fragmentów można również zastosować kursywę, trzeba jednak pamiętać, że tekst pisany kursywą jest mało czytelny, szczególnie dla niektórych osób z dysleksją. Poza tym jest on głównie zarezerwowany, wraz z cudzysłowem, do oznaczania cytatów lub form zapożyczonych z innych języków.

Czcionka powinna być na tyle duża, aby człowiek ze sprawnym (bez zdiagnozowanej wady), ale przemęczonym narządem wzroku widział wyraźnie i mógł swobodnie przeczytać treść zamieszczoną na stronie. Dodatkowo na witrynie można również zamieścić przycisk służący do powiększania wielkości czcionki.

Kontrast

Kontrast kolorystyczny to bardzo istotny czynnik, który ma ogromny wpływ na dostępność serwisu i w związku z tym został precyzyjnie określony. Kontrast kolorystyczny określa się poprzez obliczenie stosunku jasności tekstu do jasności tła. Minimalny kontrast to 4,5 do 1, natomiast zaleca się stosowanie 7 do 1. Dla przykładu, czarny font na białym tle to kontrast 21:1. Kontrast swojego serwisu możesz sprawdzić za pomocą narzędzi, np.: Color Contrast Analyzer.

Odnośniki

Osoby niewidome i z zaawansowaną wadą wzroku, które zmuszone są do korzystania z syntezatora mowy, będą miały problem z poruszaniem się po stronie, jeśli odnośniki nie będą skonstruowane w odpowiedni sposób.

Bardzo istotne jest, aby nazwa odnośnika wskazywała jednoznacznie na miejsce, w które przenosi bez konieczności wnikania w kontekst. Każda nazwa odnośnika powinna być unikalna i w miarę krótka (nie należy wstawiać długich adresów URL). Jeżeli odnośniki kierują do plików lub otwierają się w nowym oknie, użytkownik powinien zostać o tym poinformowany. Odnośniki graficzne powinny mieć prawidłowo uzupełniony tekst alternatywny.

Grafika

Wszystkie elementy graficzne, które mają znaczenie inne poza wyłącznie estetycznym, powinny być opatrzone w zwięzły i trafnie opisujący tekst alternatywny (atrybut alt dla znacznika <img>).

Grafiki informacyjne powinny zawierać opis tego, co przedstawiają, natomiast grafiki klikalne, pełniące jakąś konkretną funkcję, powinny swoim opisem wskazywać, co się stanie po ich kliknięciu. Jeżeli grafika jest umieszczona wyłącznie w celach dekoracyjnych, atrybut alt powinien zostać pusty.

Pliki wideo i dźwiękowe

Wszystkie pliki wideo prezentujące treści mówione powinny zawierać napisy, a w miarę możliwości także tłumacza migowego. Obsługa filmu powinna być dostępna z poziomu klawiatury oraz dla czytników ekranu. Pliki dźwiękowe warto uzupełnić o transkrypcję do tekstu. Należy również zadbać o to, by obsługa takich plików była możliwa za pomocą klawiatury.

Pliki doc i PDF

W przypadku dokumentów, które zamieszczamy na stronie najważniejsza jest ich odpowiednia struktura, aby osoby korzystające z czytników ekranu mogły w łatwy sposób rozeznać się w treści. Istotne jest właściwe zatytułowanie dokumentu oraz opisanie części tekstu odpowiednimi nagłówkami. Ponadto każda tabela powinna zawierać nagłówki opisujące zawartość poszczególnych kolumn i wierszy.

Banery i animacje

Większość użytkowników internetu nie przepada za migającymi i nachalnymi elementami na stronie. Migające fragmenty odwracają uwagę i są uciążliwe zwłaszcza dla osób z ADHD, padaczką fotogenną oraz dla ludzi z problemami ze skupieniem uwagi. Wytyczne WCAG 2.0 odnośnie migania elementów animowanych precyzyjnie określają, że nie mogą one migać szybciej niż 3 razy na sekundę. Dodatkowo banery często nie są dostępne z poziomu klawiatury, co uniemożliwia osobom nie korzystającym z myszki dotarcie do treści, którą prezentują.

Nawigacja i focus

Nawigacja przede wszystkim powinna być dostępna z poziomu klawiatury oraz dla czytnika ekranu. Powinna być także intuicyjna, niezmienna w obrębie całego serwisu i tak, jak w przypadku całego tekstu, ważny jest w niej kontrast oraz zrozumiałość.

Istotne jest również to, aby każdy aktywny w danej chwili element nawigacji miał wyraźne obramowanie (fokus).

CAPTCHA

CAPTCHA, czyli jedna z technik zabezpieczenia formularzy przed spamem, jest całkowicie niedostępna dla osób niewidomych, które korzystają z czytników ekranu. Często sprawia trudność także sprawnej osobie, nie mówiąc już o ludziach starszych, niedowidzących oraz z zaburzeniami koncentracji. Stosowanie tego rodzaju zabezpieczenia z pewnością nie idzie w parze z dostępnością.

CSS

Serwis powinien być dostępny w przeglądarce z wyłączoną obsługą CSS, dlatego też należy zadbać o rozdział wyglądu od treści.

Poprawność kodu html

Tytuł strony <title>, mimo iż nie jest wyświetlany bezpośrednio na stronie, jest bardzo istotnym elementem zarówno dla osób niepełnosprawnych, jak i tych zupełnie sprawnych. Osoby niewidome korzystające z czytników ekranu jako pierwszy słyszą właśnie tytuł strony, dzięki czemu mogą się zorientować w tematyce konkretnej strony.

Osoby pełnosprawne korzystające najczęściej z kilku otwartych okienek, mając do dyspozycji jasno określony tytuł, mogą łatwiej odnaleźć pożądane okienko. Ponadto po dodaniu strony do Ulubionych. od razu wiadomo, która zapisana pozycja czego dotyczy. Każda strona powinna mieć swój unikalny tytuły, który dokładnie charakteryzuje tematykę strony.

W konstrukcji strony istotne jest również stosowanie nagłówków <h>, dzięki czemu tytuły mają odpowiednią hierarchię ważności, a strona staje się bardziej czytelna dla wszystkich użytkowników internetu. Osoby korzystające z czytników ekranu mogą dowolnie przemieszczać się pomiędzy samymi nagłówkami, poznając w ten sposób strukturę strony.

Zgodność kodu html ze standardami możesz sprawdzić korzystając np. z walidatora.

Podsumowanie

Strona dostępna daje wiele korzyści zarówno osobom z niepełnosprawnościami, jak i tym w pełni zdrowym. Dbając o przekazywanie informacji w sposób zrozumiały, spójny, przejrzysty oraz zgodny ze standardami, zjednujemy sobie kolejnych użytkowników serwisu, którzy mogą stać się naszymi klientami.