Wprowadzenie do dostępności cyfrowej stron internetowych
Spis treści
Ten wpis nie posiada podtytułów. Twoja przeglądarka może również nie obsługiwać JavaScript.
Strony internetowe towarzyszą nam codziennie, dlatego też sposób, w jaki działają jest istotny — a dobrą stronę możemy zdefiniować jako szybką, przejrzystą, na temat. Zależy nam przecież na bezpośrednich informacjach, bez niepotrzebnych dodatków. Znalezienie złotego środka nie zawsze jednak jest możliwe, a wynika to między innymi z braku czasu (bo musi być na szybko) czy też chęci zakończenia kolejnego etapu prac — jeżeli działa, to czy warto angażować kolejne siły? Odpowiedź z reguły brzmi nie, ale gdyby istniał jakiś standard, który pozwala na łatwiejsze wdrażanie rzeczy w życie…
Sposobów obcowania z portalami internetowymi jest mnóstwo. Czasami musimy coś sprawdzić z samego rana, gdzie nie do końca kojarzymy, co dokładnie klikamy. Niekiedy jest to centrum miasta — w samo południe na telefonie nic nie widać, a czasami późna noc, kiedy okazuje się, że ilość zabawnych kotów w sieci jeszcze się nie skończyła. Bywają również sytuacje, gdzie chcemy odsłuchać fragment wywiadu, ale nie mamy słuchawek.
Łatwo zauważyć, że w każdej z tych sytuacji mamy do czynienia z pewnymi utrudnieniami, które towarzyszą nam po cichu każdego dnia. Proces powstawania stron internetowych uwzględnia responsywność (dzięki czemu wygodnie przeglądamy portale na urządzeniach mobilnych), ale nie zawsze bierze pod uwagę sytuacji, w jakich korzystamy z tych treści. Dlatego też od zawsze stronom towarzyszy nic innego jak dostępność.
Dostępność cyfrowa w stronach
Tak jak wspomniałem wcześniej, okoliczności, w których korzystamy z portali internetowych są różne. Osobiście uważam, że dostępność najłatwiej jest zrozumieć poprzez przykłady — a więc sytuacje, miejsca, wydarzenia, w których zastosowanie pewnych dobrych praktyk sprawia, że osoba korzystająca z informacji nie jest w żaden sposób wykluczona.
Sytuacja numer jeden. Wyobraźmy sobie portal internetowy, który dostarcza informacje o pogodzie. Portal sprawdzamy codziennie rano i zawsze mamy jeden kłopot: tekst znajdujący się w ramach strony jest napisany tak małym fontem, że potrzeba chwili skupienia, aby odebrać przekaz. To samo dotyczy ikon, które pokazują informacje dotyczące kolejnych dni — najlepiej klika się je wykałaczką, ponieważ wtedy mamy pewność co do zatwierdzonego pola. Można zatem założyć, że strona nie jest dostępna — elementy powinny być łatwo klikalne, a tekst czytelny bez silnego skupienia. Myślę, że każdy zna takie portale — czasami coś się przesunie, czasami coś nie da się wybrać — i tak w koło, niestety…
Sytuacja numer dwa. Wracamy do przykładów z początku, a więc jesteśmy w centrum miasta, na horyzoncie nie ma żadnego cienia, jesteśmy w środku trasy — nie znamy dokładnego adresu, do którego się kierujemy. Co teraz? Sięgamy po telefon i z informacji niewiele się udało dostać. Jest tak jasno, że szlag trafia stronę wraz z jej treścią — ta jest po prostu niewidoczna. W ten sposób jasno (hehe) obrazujemy kolejny klasyczny przykład problemu z dostępnością, jakim jest kontrast. Bez zachowania różnic między kolorami może dojść do sytuacji, gdzie treści są niemożliwe do odebrania. Kolejny problem powiązany z dostępnością.
Ostatni przykład — słuchawki i wywiad. Każdemu się zdarzy zapomnieć słuchawek, to naturalne. Treści odbierane przez nas bardzo często potrzebują odtworzenia audio, a bezpośrednim przykładem może być podcast, wywiad, rolka na Instagramie. Tylko że my tych słuchawek nie mamy. Jaka jest szansa, że odsłuchamy/obejrzymy później? Raczej niska. Osoba odpowiedzialna za treści mogła mieć to jednak na uwadze, wystarczyłaby bowiem transkrypcja, a więc alternatywną do docelowej treść. Trend ten jest widoczny na Instagramie, gdzie do nagranej relacji są dostępne napisy. Problem znika, ponieważ poza audio mamy również tekst.
Nie jest to jednak koniec problemów. Co z denerwującymi animacjami na stronie, brakiem ciemnego motywu i wiecznie ładującymi się grafikami? To góra lodowa, której trudno zobaczyć koniec.
Wdrożenie dostępności cyfrowej w portalach internetowych
Czy są zatem sposoby na wdrożenie dostępności w stronach internetowych? Pewnie! Widziałem kilka fajnych narzędzi — jak się zainstaluje to mamy i ciemny motyw, i wybór czcionek, ba — nawet jest możliwość włączenia latającego śniegu. Rozwiązanie zawsze działa, o ile nie masz tej i tej wtyczki i nie odwiedzasz strony XYZ, ABC i XD. Rozwiązania gotowe, przykładowo UserWay czy też Adally są nieskuteczne ze względu na brak ich dopasowania. Pierwsze spojrzenie sprawi, że jesteśmy co do dostępności portalu spokojni, ale to tylko złudne stwierdzenie.
Strona z wcześniej wspomnianymi rozszerzeniami może być oparta o HTML4.x, zbudowana na tabelach, divach czy odpowiednio wystylizowanych paragrafach. Fakt posiadania wersji kontrastowej portalu nie poprawi sytuacji pod kątem technicznym, a możliwość przeczytania treści na stronie nie uzupełni grafik oraz innych plików o prawidłowe opisy.
Wdrożenie dostępności cyfrowej na stronie internetowej zaczyna się już na etapie jej projektowania. Bardzo ważnym krokiem podejmowanym podczas projektowania to font, jaki strona będzie używała. Font szeryfowy może być mniej czytelny na urządzeniach mobilnych, chociażby smartwatchu. A to początek — definicja wielkości nagłówków, tekstu zwykłego, pogrubionego… trudny etap, ale szalenie ważny.
Takie rozszerzenie nie poprawi również nagłówków, ważnych z punktu widzenia odbiorcy. To one określają układ strony pod kątem jej struktury. Źle określone mogą sprawić, że treści nie zostaną przedstawione w sposób logiczny, tym samym utrudnia jej odbiór.
To samo dotyczy opisów alternatywnych. Na przykład weźmy jeden wyraz, to jest: zamek. Pierwsze skojarzenie to budynek, z reguły zabytkowy (chyba że mamy na myśli ten z Poznania — cieplutko Was pozdrawiam!), z wieżami oraz bramą. Tak możemy zdefiniować zamek. To samo słowo może oznaczać jednak zamek błyskawiczny — taki, który jest umieszczony w torbie czy spodniach. Analogicznie to samo słowo może oznaczać rodzaj blokady drzwi, która chroni przed wejściem osoby niepożądanej. Wtyczki dostępności — jeżeli dostarczają jakiś opis alternatywny, to mało możliwe jest, aby opis jest miał jasno określony kontekst.
Inną cechą takich wtyczek jest np.: dodanie lektora do strony. Czy takie rozwiązanie ma sens? Nie do końca. Osoby, które potrzebują lektora na stronie posiadają dedykowane rozwiązania takie jak NVDA, czy też Google Talkback. Element w postaci lektora, który uatrakcyjnia odbiór treści, ale nie czyni go znacznie bardziej dostępnym.
Pojawia się zatem pytanie: Jak w wdrożyć dostępność cyfrową? Przede wszystkim to stosowanie się standardów. Dzięki nim strony są w stanie wyświetlać się prawidłowo we wszystkich przeglądarkach. Dalej — tworzyć jasne opisy alternatywne, oddające całość treści zawartej w prezentowanym pliku. Jasny podział treści z wykorzystaniem nagłówków to kolejny z ważnych elementów. Odpowiednio dobrane kolory, możliwość obsługi portalu z poziomu klawiatury oraz klarowny przekaz tworzą nam pełny charakter tego, jak powinna wyglądać dostępność cyfrowa strony internertowej..
Dawno temu zebrano to wszystko w jeden dokument, określony jako WCAG (Web Content Accessibility Guidelines). Pierwszą wersję dokumentu opublikowano w 1999 roku. Od tamtej pory Internet nieco się zmienił, powstały więc kolejne wersje — w tym momencie obowiązującą wersją jest 2.1, opublikowana 5 czerwca 2018 roku. Dokument ten dzieli się na pewne podsekcje, wytyczne oraz kryteria.
Co to wytyczne WCAG?
Wytyczne WCAG to nic innego jak zbiór dobrych praktyk określonych w kontekście lat doświadczeń zbieranych przez użytkowników. Jako że sposób obcowania ze stroną ma różny charakter, to samo Web Content Accessibility Guidelines dzieli te dobre praktyki na pewne zasady, to jest:
- postrzegalność — informacja oraz części interfejsu muszą być reprezentowane w sposób możliwy do odebrania przez użytkownika,
- funkcjonalność — zapewnienie, aby komponenty interfejsu oraz nawigacja były możliwe do użycia,
- zrozumiałość — zadbanie o to, aby informacja oraz obsługa interfejsu były zrozumiałe,
- solidność — tworzenie takich treści, aby mogły być skutecznie interpretowane przez różne programy użytkownika, w tym technologie wspomagające.
Wytyczne są dostępne w oficjalnym polskim tłumaczeniu wytycznych WCAG: https://www.w3.org/Translations/WCAG21-pl/.
Wcześniej wymienione zasady dzieli się na wytyczne, które stanowią pewną spójność kryteriów sukcesu. W istocie to one najbardziej są kojarzone wytycznymi. Przykład wytycznych są:
- Kryterium sukcesu 1.1.1 Treść nietekstowa,
- Kryterium sukcesu 1.4.6 Kontrast (wzmocniony),
- Kryterium sukcesu 2.2.4 Przerywanie.
Każdy z kryteriów ma konkretny opis, który wyjaśnia warunki jego spełnienia. Po szybkiej analizie da się zauważyć, że kryteria nie są sobie równe — niektóre są łatwe, niektóre niemożliwe w implementacji. Dlatego też wyróżnia się trzy poziomy kryteriów, to jest:
- Poziom A — najbardziej podstawowy zakres (obsługa klawiaturą, treści alternatywne),
- Poziom AA — dostępność m.in. w zakresie kontrastu czy wielkości obsługiwanego ekranu,
- Poziom AAA — zapewnienie dostępności dla m.in. multimediów nadawanych na żywo.
Czy zapewnienie dostępności cyfrowej poziomie AA jest trudne? Odpowiedź nie jest oczywista, ponieważ — na przykładzie mojego bloga — kwestia zapewnienia dostępności nie jest problematyczna. Treści posiadają opis alternatywny, struktura nagłówków pozwala na logiczny podział treści, kontrast elementów (raczej) jest zachowany, podobnie jak z responsywnością. Jeżeli w tym wszystkim dodamy jakieś elementy dynamiczne — zakładki, formularze, animacje w obrębie całej strony, to wtedy pojawia się pewnego rodzaju trudność w obsłudze portalu. Jeżeli jednak do wdrożenia mamy dostępność cyfrową w obrębie dużego portalu informacyjnego, w którym treści umieszcza sztab osób, a kolejny sztab odpowiada za stabilność działania, to może być wyzwanie, które może wymagać przepisania całego portalu od zera.
Czy dostępność dotyczy tylko osób z niepełnosprawnościami?
Temat dostępności cyfrowej bywa kontrowersyjny. Po co to komu? Przecież to strata czasu, ludzie uczą się interfejsów, a później i tak z nich korzystają. Jest w tym ziarno prawdy, pamiętajmy jednak, że jesteśmy w bardzo ciekawym miejscu pod kątem technologii — coraz więcej osób w podeszłym wieku wie, jak obsługiwać Internet. Bankowość internetowa to podstawa dla wielu młodych osób. Zamawianie jedzenia, zakupów, sprawdzenie rozkładu jazdy — to są rzeczy, z którymi stykamy się na co dzień, warto zatem zadbać o to, aby interfejs takich narzędzi był klarowny i łatwy do odbioru. Pamiętajmy, że dając solidną podstawę teraz, zapewniamy stabilny rozwój później — przecież też jesteśmy odbiorcami treści w Internecie i to, w jaki sposób je tworzymy, wpływa na inne, także tworzące w sieci osoby.
Za kilka, kilkanaście lat odsetek osób starszych, a także osób z problemami ze wzrokiem (a także ze słuchem) będzie coraz większy. Co więcej, osoby z niepełnosprawnościami są także częścią Internetu oraz budują społeczności. Zabieranie możliwości komukolwiek korzystania z dobrodziejstw, jakie dają nam obecne technologie to złe podejście. Dlatego też uważam, że dostępność dotyczy wszystkich, a przykłady z brakiem cienia czy braku kontekstu dla słowa zamek dobrze to uzasadniają.
Podsumowanie
Pamiętam, kiedy tworzyłem pierwszy projekt portalu internetowego. Miał wszystko, co trzeba: treści, linki, był kolorowy. I chociaż sentyment do tego typu rzeczy jest przeogromny, to teraz widzę mnóstwo wad tego projektu. Portal nie był responsywny, linki — niewidoczne, a kod napisany tak, aby działał — a nie był rozwijalny. Dostępność cyfrowa to nie tylko istotny temat z perspektywy użytkownika, ale także programisty.
Czy warto interesować się dostępnością? Pewnie! Z czasem pocieszające staje się, jak łatwo widzi się pewne wady działających interfejsów. Dostępność cyfrowa pozwala poszerzać wiedzę nie tylko w aspekcie budowania prawidłowych układów stron czy aplikacji, ale także budować żądania wokół tego, co faktycznie chcemy osiągnąć.
Radek
-
<< Poprzedni artykuł
Jak zmienić hasło w Wordpressie?