Już nastała era inkluzyjności, kiedy ważne są potrzeby nie tylko przeciętnej większości, ale i każdego pojedynczego człowieka. Szczególnie ważny jest ten proces dla pełnoprawnego życia osób z niepełnosprawnością — a to całe 10% całej populacji Ziemi. Przy czym liczba ta odnosi się tylko do oficjalnie uznanej niepełnosprawności. Dodajcie do tego tych, którzy nie mają formalnego dokumentu o problemach ze zdrowiem i starszych ludzi, u których z wiekiem pogarsza się słuch, wzrok i ruchomość.
To duża kategoria, których prawa do normalnego poziomu życia i dostępności informacji należy szanować i realizować.
Coraz częściej w społeczności IT mówi się o tym, że wśród użytkowników internetu jest wiele osób z niepełnosprawnościami, w tym z zaburzeniami wzroku. Aktywnie odwiedzają strony internetowe i korzystają ze wszystkich dobrodziejstw sieci, stosując specjalne oprogramowanie. Właściciele stron internetowych i programiści mogą zrobić krok w ich stronę, dostosowując swoje zasoby do wygodniejszego korzystania przez osoby z całkowitą lub częściową utratą wzroku.
W tym artykule nie używamy określenia "ślepy", jak i innych słów lub terminów, które dyskryminują człowieka i redukują jego osobowość do jednej cechy. Zaburzenie wzroku — to nie jedyna cecha ludzi, o których dzisiaj mówimy. Należy trzymać się zasady "najpierw — człowiek". Poprawna formuła, którą stosujemy — "człowiek z zaburzeniem wzroku". O tym, jak poprawnie mówić i jakie terminy używać, można dowiedzieć się w przewodniku bezbarierności.
Istnieje "Wytyczne dotyczące zapewnienia dostępności treści internetowych (WCAG)", opracowane przez Konsorcjum W3C. W nim dokładnie opisano wszystkie wymagania dotyczące treści stron internetowych i ich formatowania, aby maksymalna liczba osób mogła komfortowo korzystać z informacji.
Opowiemy o podstawowych zasadach tworzenia inkluzyjnych stron internetowych i poprawy już istniejących zasobów. Artykuł został przygotowany we współpracy z Dmytrem Popowem, specjalistą ds. dostępności cyfrowej.
-
Czy potrzebna jest oddzielna wersja strony dla osób z zaburzeniami wzroku?
-
Jak uczynić swoją stronę dostępną dla osób z zaburzeniami wzroku
Jakie zaburzenia wzroku mogą występować?
Kiedy mówimy o osobach z zaburzeniami wzroku, głównie przypomina się tylko o dwóch sytuacjach — częściowej i całkowitej utracie wzroku. Ale istnieją także inne zaburzenia, takie jak:
- Daleko wzroczność — niemożność zobaczenia obiektów z bliskiej odległości.
- Astygmatyzm — wszystkie obiekty są rozmyte, obrazy nieostre.
- Daltonizm — niemożność rozpoznawania niektórych kolorów.
- Dysleksja — to nie zaburzenie wzroku, a raczej cecha mózgu, wpływająca na postrzeganie tekstu. Litery skaczą i się mylą, przez co osoba widzi tekst, ale nie może go przeczytać. Potrzeby osób z dysleksją również są brane pod uwagę przy dostosowywaniu stron.
Jak osoby z zaburzeniami wzroku widzą treści w internecie
Istnieją specjalne strony i wtyczki, które pomagają zrozumieć, jak widzą osoby z zaburzeniami wzroku. Oto takie rozszerzenia dostępne w przeglądarce Google Chrome.
Zainstalowaliśmy Web Disability Simulator, aby go przetestować. Tak użytkownicy z określonymi zaburzeniami mogą widzieć stronę Cityhost.
Warianty oznaczone są cyframi, gdzie:
- Oryginalna wersja
- Daltonizm żółto-niebieski
- Daleko wzroczność
- Całkowity daltonizm
Czy potrzebna jest oddzielna wersja strony dla osób z zaburzeniami wzroku?
Wersja strony dla osób z całkowitą lub częściową utratą wzroku umieszczana jest na tym samym domenie i realizowana jako oddzielna wersja układu bez obrazów (lub z minimalną ilością zdjęć), z prostą nawigacją, możliwością zmiany kolorów i rozmiaru liter. Oznaczana jest ikoną w postaci okularów (lub po prostu tekstem "Wersja kontrastowa"), umieszczając link na górze strony.
Na ukraińskich stronach podobnych przykładów jest niewiele, najczęściej występują na specjalistycznych zasobach. Na przykład, oddzielna wersja jest dostępna na stronie Lwowskiego oddziału "Ukraińskiego związku osób z niepełnosprawnością".
Na obrazku przedstawiony jest cały ekran z maksymalnym powiększeniem tekstu.
Ale jeśli mówimy o rzeczywistej praktyce, to specjalne wersje nie spełniają swojego przeznaczenia. W zachodnim świecie, znanym z bardziej uważnego podejścia do inkluzyjności, praktycznie się nie spotyka.
Często w rezultacie powstaje informacyjnie okrojona modyfikacja, a docelowa publiczność nadal korzysta z normalnej wersji. I nie należy zapominać, że wśród odwiedzających są osoby z różnymi zaburzeniami wzroku. Dla wielu z nich nie są potrzebne specjalne wersje, wystarczy podjąć kilka kroków w celu dostosowania głównej strony.
Jeśli jednak zdecydowano się na stworzenie takiej wersji, lepiej nie nazywać jej "Wersja dla słabowidzących", ponieważ to dyskryminuje ludzi. Lepiej, aby nazwa opierała się nie na zaburzeniach u człowieka, ale na funkcji, na przykład "Wersja kontrastowa", "Wybór schematu kolorów", "Ustawienia czcionki".
Ponadto, z wersji kontrastowej mogą korzystać nie tylko osoby z zaburzeniami wzroku, ale ktokolwiek, będąc na przykład na plaży w jasnym słońcu.
Przeczytaj także: Historie naszych użytkowników: jak fundacja charytatywna «99 PROBLEMS» pomaga ludziom z stwardnieniem rozsianym
Jak uczynić swoją stronę dostępną dla osób z zaburzeniami wzroku
Zalecenia dotyczące tworzenia inkluzyjnych stron internetowych były opracowywane wspólnie z testerami, którzy mają całkowitą lub częściową utratę wzroku. Tacy specjaliści już pracują w nowoczesnych firmach i pomagają innym uzyskać bardziej komfortowy dostęp do zasobów internetowych.
"Powietrzny" design
Taki design coraz częściej można spotkać na stronach. Nowoczesne układy zakładają jedną kolumnę na cały ekran, minimalistyczny układ, dużo przestrzeni między elementami, duże zdjęcia. To hołd modzie, ale jednocześnie taki wizualny układ jest wygodny także dla odwiedzających z zaburzeniami wzroku.
Aby stworzyć taką stronę, nie trzeba zatrudniać wysoko opłacanych programistów: wystarczy stworzyć stronę na Wordpressie lub wybrać inną CMS — w nich są szablony z "powietrznym" designem.
Rozwiązania kolorystyczne
Kontrastowe kolory również pomagają odwiedzającym lepiej rozróżniać treści strony. Można pójść dwiema drogami: albo od razu zrobić stronę kontrastową, albo zintegrować możliwość przełączania motywów kolorystycznych. Zwykle stosuje się trzy warianty dla odwiedzających z zaburzeniami wzroku: czarny tekst na białym tle, biały na czarnym i żółty tekst na niebieskim tle.
Sprawdzić kontrast strony można za pomocą analizatora.
Jest wielu użytkowników, którym biały kolor razi w oczy, dla nich wygodniejsza będzie ciemna tematyka.
Jeśli tekst znajduje się na tle obrazu, muszą być spełnione wymagania dotyczące kontrastu w odniesieniu do tła (współczynnik nie mniejszy niż 4.5:1).
Specjaliści ds. dostosowywania stron zalecają, aby nie używać kolorów jako elementów znaczeniowych, aby nie utrudniać zadania osobom z zaburzeniami percepcji kolorów. Jeśli osoba źle rozróżnia kolory, dla niej instrukcja "Naciśnij niebieski przycisk" będzie niezrozumiała.
Czytelna czcionka
Na stronach coraz rzadziej spotyka się ozdobne czcionki — to jest niewygodne dla wszystkich, a nie tylko dla osób z zaburzeniami wzroku. Dlatego, używając prostych i czytelnych czcionek, projektanci ułatwiają pracę z tekstem wszystkim użytkownikom zasobu.
Możliwość powiększania strony i zmiany rozmiaru liter
W nowoczesnych przeglądarkach dostępna jest funkcja powiększania stron za pomocą kombinacji klawiszy Ctrl+ i Ctrl-. Zadaniem programistów — jest dostosowanie układu tak, aby przy powiększaniu lub pomniejszaniu skali strona nie "zjeżdżała", elementy nie znikały z pola widzenia, nie pojawiała się pozioma przewijanie.
Można również wbudować możliwość zmiany rozmiaru liter i odstępów między nimi. Na przykład, osobom z dysleksją łatwiej jest czytać, jeśli zwiększone są odstępy między wierszami.
Sterowanie z klawiatury
Niektórzy użytkownicy nie mogą zobaczyć kursora myszy na ekranie, ale dobrze radzą sobie z klawiaturą na dotyk. Należy im zapewnić możliwość interakcji ze stroną za pomocą klawiszy — przewijania, wypełniania pól, naciskania przycisków i sekcji menu, bez użycia myszy. Ta funkcja jest ważna także dla osób z zaburzeniami motorycznymi.
Ważne jest, aby pamiętać o wizualnym wskaźniku fokusu klawiatury. Wszystkie interaktywne elementy (linki, przyciski, pola) powinny wizualnie się wyróżniać (za pomocą ramki lub krótkich podpowiedzi tekstowych) podczas przechodzenia przez strukturę strony za pomocą klawisza Tab.
Programiści często wyłączają fokus w CSS przez {outline: none}, ale nie należy tego robić. W ten sposób część użytkowników traci możliwość interakcji ze stroną.
Dostosowanie do programów czytających ekrany (screen readerów)
Osoby, które nie mogą czytać nawet powiększonego tekstu, korzystają ze specjalnych programów (JAWS, NVDA, SuperNova). Screen readery odczytują stronę i odtwarzają ją w trybie głosowym. To znaczy, że użytkownicy nie czytają strony, a słuchają jej.
Programy widzą tekst nie tak jak ludzie, rozpoznają układ. Dlatego ważne jest, aby poprawnie formatować strukturę HTML:
-
Przypisywać odpowiednie tagi wszystkim elementom układu. Nagłówki powinny mieć ścisłą hierarchię H1, H2, H3. Nie używaj układu nagłówków do zwiększania czcionek. Przyciski powinny być formatowane przez tag , menu — przez i tak dalej. Kiedy układ jest wizualnie zrozumiały, ale używane są nielogiczne tagi, screen reader nie może ich poprawnie odczytać.
-
Używać w tabelach specjalnego układu. Screen readery pozwalają poruszać się po komórkach w dowolnym kierunku. Przy tym przed tekstem komórki odczytywana jest odpowiednia nazwa nagłówka kolumny lub wiersza, co pozwala zrozumieć informacje. Jeśli dane tabelaryczne przedstawić bez układu tabeli, użytkownikom screen readerów będzie trudno je zrozumieć.
-
Bez plików w formacie PDF. Mamy na myśli teksty, które są sformatowane w PDF w postaci obrazów. Taki tekst screen reader nie będzie w stanie odczytać. Najlepiej umieszczać wszystkie artykuły na stronach internetowych, ale jeśli konieczne jest użycie plików PDF, należy je tworzyć w postaci prawdziwego tekstu.
-
Poprawny układ dla okien modalnych. Wbudowując w układ dodatkowe elementy, takie jak okna popup, należy koniecznie zapoznać się ze specjalnym językiem układu ARIA. Pozwala to uczynić dostępnym każdy najbardziej skomplikowany interaktywny element. Bez tego okna modalne nie będą dostępne dla użytkowników screen readerów.
-
Opisać alt wszystkim obrazom. Atrybut alt został stworzony, aby opisywać, co jest narysowane na obrazku — tekst staje się alternatywą dla obrazu, jeśli nie można go poprawnie wyświetlić. Obecnie zamiast tego wpisuje się w nim słowa kluczowe. Użytkownicy będą mogli dowiedzieć się o istocie elementów wizualnych, jeśli w alt będzie zawarte rzeczywiste opisanie obrazu.
Po takich prostych ulepszeniach zasób internetowy stanie się dostępny dla większej liczby osób. Tworzenie inkluzywnej strony przynosi korzyści zarówno odwiedzającym, jak i webmasterom — dzięki możliwości zwiększenia ruchu i przyciągnięcia nowych klientów. I nie należy zapominać, że troska o bliźnich i dobre uczynki zawsze się opłacają.
Cityhost oferuje hosting dla stron dostosowanych do użytkowników z zaburzeniami wzroku. Jeśli jesteś właścicielem takiej strony – napisz e-mail na adres support@cityhost.net.ua i otrzymaj hosting za darmo.
Podobał Ci się artykuł? Powiedz o nim znajomym: 
