Dostępność w sieci: dlaczego standardy W3C są często ignorowane

Opublikowany: 2022-03-11

Termin du jour to dostępność sieci — moim zdaniem jeden z najczęściej źle rozumianych i niewłaściwie stosowanych aspektów projektowania stron internetowych. Powszechnym błędem jest przekonanie, że dostępność jest przeznaczona wyłącznie dla osób niepełnosprawnych. W rzeczywistości każdy korzysta z dostępnych treści , a Twoi odbiorcy zwiększą się, uzyskując dostęp do dostępnych treści na różnych platformach lub na różne sposoby, ponieważ mogą korzystać z Twoich treści z mniejszymi ograniczeniami.

Niestety, wielu twórców stron internetowych nie udostępnia swoich treści i nie przestrzega wytycznych dotyczących dostępności stron internetowych; w ten sposób wiele osób doświadcza niepotrzebnych trudności w korzystaniu z ich projektów i cieszeniu się treścią. W skrajnych przypadkach niektóre grupy użytkowników nie mogą w ogóle efektywnie korzystać z takiego serwisu.

Budowanie dostępnych treści powinno być drugą naturą każdego dewelopera, projektanta lub twórcy treści, tak samo jak rozważanie ramp, schodów i wind jest dla architekta projektującego nowy budynek.

Przyjrzyjmy się bliżej temu, co kryje się za kulisami i dlaczego tak wielu programistów wydaje się pomijać standardy dostępności sieci bez uzasadnionego powodu.

1. Co oznacza „dostępny projekt”?

Dostępna zawartość to zawartość, z której może korzystać każdy . Nie znamy wszystkich aspektów, w jaki sposób użytkownicy uzyskują dostęp do naszych treści, więc musimy zaprojektować z myślą o dostępności z wyprzedzeniem.

Jak podkreśliłem wcześniej, nie dotyczy to osób niepełnosprawnych, które stanowią około 15% światowej populacji. W prawdziwym życiu użytkownicy często nie konsumują treści i nie wchodzą w interakcję z urządzeniami w dokładnie taki sam sposób, jak przewidziano podczas tworzenia. Dostępna zawartość jest również wymagana ze względów prawnych w wielu jurysdykcjach. Przeczytaj „Czynniki prawne i polityczne w tworzeniu uzasadnienia biznesowego dotyczącego dostępności sieci Web dla Twojej organizacji”, aby uzyskać dodatkowe informacje na temat zgodności z ułatwieniami dostępu.

Rozważ następujące scenariusze, myśląc o dostępnych treściach dla użytkowników, którymi mogą być:

Nie słyszę dobrze. 360 milionów ludzi na całym świecie ma wadę słuchu. Treści audio powinny mieć transkrypcje, a wideo powinny mieć napisy.
Nie widzę dobrze. Szacuje się, że na całym świecie 285 milionów ludzi jest niedowidzących: 39 milionów to osoby niewidome, a 246 słabowidzące. Użytkownicy niedowidzący używają czytników ekranu (czytających treść za pomocą syntezatora mowy), monitorów brajlowskich z możliwością odświeżania (zawartość ekranu pojawia się na monitorze brajlowskim, a użytkownik może nawigować i wchodzić w interakcję ze swoim urządzeniem za pomocą klawiszy na wyświetlaczu) lub wysoki -tryb kontrastu.
Dotknięty dysleksją. Osoby z dysleksją mają trudności z czytaniem i rozumieniem treści, zwłaszcza np. tekstu justowanego lub wielkimi literami.
Cierpiący na fizyczne ograniczenia. Nie wszyscy ludzie mogą korzystać ze wszystkich urządzeń. Na przykład nawigacja po treści musi być dostępna nie tylko dla użytkowników myszy, ale także dla użytkowników, którzy nie mogą używać myszy.
Korzystanie z urządzeń mobilnych. Dostosuj zawartość do małych ekranów. Zezwól użytkownikowi na powiększanie lub zwiększanie rozmiaru czcionki.

2. Jak zapewnić dobrą dostępność sieci?

Ludzie korzystają z bardzo różnych sposobów nawigowania i konsumowania treści. Są użytkownicy, którzy muszą być wspierani przez dodatkowe narzędzia programowe, które ułatwiają im dostęp do treści. Narzędzia te, znane jako technologie wspomagające, obejmują czytniki ekranu, ekrany dotykowe i wskaźniki głowy.

Jednak Twoja aplikacja i technologia wspomagająca muszą ze sobą rozmawiać. Nie wszystko, co jest napisane w HTML, jest w pełni zrozumiałe dla technologii wspomagających. Aby pomóc w „przetłumaczeniu” treści z „języka technicznego” na język bardziej czytelny dla człowieka, stworzono dodatkowe standardy API dostępności.

Ten podstawowy diagram dostępności sieci powinien dać lepsze wyobrażenie o tym, jak działają technologie wspomagające.

Aby zilustrować, jak to działa, spójrzmy na prosty przykład kodu:

 <a href="#” class=”button”>Delete</a>

Ten prosty kod dla osób korzystających z czytnika ekranu niewiele znaczy. To nawet wprowadza w błąd i czyta się tylko jako łącze z tekstem „ Usuń ”. Aby pomóc użytkownikom zrozumieć, w jaki sposób wykonuje się akcję, możemy użyć atrybutów ARIA (Assistive Rich Internet Applications) (określonych na https://www.w3.org/TR/wai-aria/) do zastąpić pierwotną rolę. Zmieniamy znaczenie linku do przycisku, dodając atrybut role="button" . W ten sposób czytniki ekranu odczytają go jako przycisk, a nie link. Co jest bardziej odpowiednie.

Krótko mówiąc, przypisz ARIA:

Daje lub wzmacnia semantykę elementów niesemantycznych lub innych semantycznych,
Zapewnia, że zawartość dynamiczna (na żywo) jest nadal dostępna.
Zapewnia rolę do opisania typu zdefiniowanego widżetu (menu, pozycja drzewa, suwak, miernik postępu itp.).
Zapewnia rolę opisującą strukturę strony internetowej (nagłówki, regiony i tabele).
Podaje stan widżetów (zaznaczone, ma wyskakujące okienko itp.).
Zapewnia właściwości przeciągania i upuszczania, które opisują źródła przeciągania i cele upuszczania.

Czym jest dostępność w projektowaniu stron internetowych?

Za każdym razem, gdy projektujesz treść, pomyśl o dwóch rzeczach: o tym, jak treść jest postrzegana i jak działa . Przeanalizujmy kilka przykładów, aby zilustrować dostępność w projektowaniu stron internetowych.

Załóżmy, że zamierzasz zaprojektować niestandardowy element rozwijany wyboru. Oto rzeczy, które należy wziąć pod uwagę podczas projektowania elementu:

Zaznacz różne stany: włączony, wyłączony, tylko do odczytu.
Zaznacz element, gdy uzyska stan skupienia/najechania.
Zaznacz każdy element opcji, gdy uzyska stan skupienia/najechania.
Upewnij się, że treść jest nadal czytelna, gdy tylko tekst zostanie powiększony do poziomu 200%.
Upewnij się, że między tekstem a jego tłem jest wystarczający kontrast. Ułatwia czytanie treści osobom z umiarkowanie słabym wzrokiem lub korzystającym z urządzeń w ekstremalnych warunkach oświetleniowych, np. narażonych na bezpośrednie działanie promieni słonecznych lub na wyświetlaczu o niskiej jasności.

Innym przykładem może być wybór koloru opisującego stan. Oto rzeczy do rozważenia podczas projektowania sekcji, w której użytkownik będzie mógł wybrać kolor:

Są ludzie, którzy mają trudności z rozróżnieniem niektórych kolorów. Tak więc zielony nie oznacza zielony dla wszystkich odwiedzających. Aby to naprawić, dodaj opis dla każdego koloru, który opisuje cel.
Zaznacz każdy element, gdy uzyska stan skupienia/najechania.
Upewnij się, że między elementami jest wystarczająco dużo miejsca, aby każdy element można było łatwo aktywować, np. na urządzeniach z mniejszym rzutni.

3. Testowanie dostępności: od czego zacząć?

Nie ma jednego sposobu na sprawdzenie i upewnienie się, że zawartość internetowa jest w pełni dostępna. Aby zweryfikować i naprawić problemy z dostępnością, należy zastosować wiele technik. Możesz zacząć od zdefiniowania problemów , rozwiązań i priorytetów .

Definiowanie problemów

Pracując nad kwestiami dostępności, zawsze staraj się stworzyć jedno zgłoszenie na problem z wyraźnym tytułem. Powinno to uprościć zrozumienie problemu i pomóc w określeniu priorytetu.

Zły przykład: użytkownik nie może używać klawiatury na stronie.

Dobry przykład: nie można korzystać z nawigacji za pomocą klawiatury w menu głównym.

Zły przykład prowadzi do sprawy, która będzie dość trudna do zamknięcia w krótkim czasie. Dyskusje na wiele tematów mogą również rozpocząć się w sekcji komentarzy, ponieważ tytuł zgłoszenia jest zbyt ogólny.

Dobry przykład wskazuje dokładnie na problem i skupia się tylko na jednej rzeczy: nawigacji za pomocą klawiatury w menu głównym.

Priorytetowe problemy z dostępnością sieci

Priorytety są ważne, ponieważ określają, które problemy należy najpierw naprawić. Na przykład WCAG jest podzielony przez trzy poziomy zgodności: A, AA, AAA, co oznacza, że powinieneś zacząć od minimalnego poziomu A, ale nie oznacza to automatycznie, że poziomy AA i AAA są po prostu „miło mieć”. Wszystkie poziomy są ważne i ważne jest, aby nie ustalać priorytetów, zakładając, że sam poziom A jest wystarczający.

Jednak poziomy WCAG (lub jakiekolwiek inne wytyczne) mogą być czasami dość trudne do zrozumienia i aby go nieco uprościć, możesz również rozważyć następujące definicje priorytetów:

Krytyczne — problemy, które uniemożliwiają użytkownikom korzystanie z aplikacji. Brak dostępnych obejść.
Major — problemy, które utrudniają korzystanie z aplikacji i/lub powodują dezorientację, ale nie blokują możliwości ukończenia operacji przez użytkownika.
Drobne — problemy, które są irytujące, ale nie utrudniają użytkowania lub ulepszenia, które można wprowadzić w aplikacji.
Informacje — nie przestrzega najlepszych praktyk. Ogólne zalecenia dotyczące ulepszeń.

Rozwiązania

Żadna z wytycznych – przez które mam na myśli WCAG, Sekcja 508 lub ADA – nie daje prostego rozwiązania w zakresie kodu technicznego, w jaki sposób należy rozwiązać określony problem. Definiują tylko oczekiwane zachowanie. Jednak WCAG dodatkowo zdefiniowało procedury testowe, które powinny pomóc zrozumieć, jak odtworzyć problem, i istnieje grupa społeczności Automated WCAG Monitoring, społeczność W3C skupiająca się na tworzeniu niezawodnych reguł testowania dostępności sieci, zarówno automatycznych, jak i półautomatycznych.

Przykład dla techniki WCAG G4 („Zezwalanie na wstrzymanie i ponowne uruchomienie treści od miejsca, w którym została wstrzymana”):

Procedura testowa

Na stronie z poruszającą się lub przewijaną treścią,

Użyj mechanizmu udostępnionego na stronie internetowej lub przez klienta użytkownika, aby wstrzymać przesuwanie lub przewijanie treści.
Sprawdź, czy przenoszenie lub przewijanie zostało zatrzymane i nie uruchamia się samoczynnie.
Użyj dostarczonego mechanizmu, aby ponownie uruchomić ruchomą zawartość.
Sprawdź, czy ruch lub przewijanie zostało wznowione od miejsca, w którym zostało zatrzymane.

oczekiwane rezultaty

Punkty 2 i 4 są prawdziwe.

Jak widać nie ma rozwiązań technicznych, ale określone oczekiwane zachowanie. To, w jaki sposób zaimplementują to twórcy stron internetowych, zależy od nich.

Wytyczne dotyczące dostępności sieci i standardy W3C

Punktem wyjścia powinny być następujące podstawowe standardy sieciowe:

Najpopularniejszym z nich są Wytyczne dotyczące dostępności treści internetowych znane jako WCAG. WCAG 2.0 to „stabilny, możliwy do odniesienia standard techniczny. Zawiera 12 wytycznych, które są zorganizowane według 4 zasad: dostrzegalnych, operacyjnych, zrozumiałych i solidnych. Dla każdej wytycznej istnieją sprawdzalne kryteria sukcesu, które są na trzech poziomach: A, AA i AAA”.
Techniki dla WCAG 2.0 to obszerny przewodnik dla autorów treści internetowych.
Wymagania użytkownika dotyczące dostępności mediów W3C — Ten dokument przedstawia wymagania użytkowników z niepełnosprawnościami dotyczące dostępności w odniesieniu do audio i wideo w sieci.
Ustawa o komunikacji i dostępności wideo dwudziestego pierwszego wieku — CVAA dzieli się na dwa szerokie tytuły lub sekcje. Tytuł I dotyczy dostępu do komunikacji, aby produkty i usługi korzystające z łączy szerokopasmowych były w pełni dostępne dla osób niepełnosprawnych. Tytuł II ustawy o dostępności otwiera nowe możliwości, ułatwiając osobom niepełnosprawnym oglądanie programów wideo w telewizji i Internecie.
Sekcja 508 — wymagania dotyczące dostępności technologii informacyjno-komunikacyjnych (ICT), które mają zastosowanie do wszystkich agencji federalnych, gdy opracowują, nabywają, utrzymują lub wykorzystują technologię elektroniczną i informacyjną.
Dostępność stron internetowych zgodnie z Tytułem II Ustawy o Niepełnosprawnych Amerykanach (ADA) — dowiesz się tam, w jaki sposób wymogi dotyczące niedyskryminacji zawarte w Tytule II ADA odnoszą się do stron internetowych władz stanowych i lokalnych.

Testowanie dostępności sieci: Skąd mam wiedzieć, czy moja zawartość jest dostępna, czy nie?

Oto podstawowe, fundamentalne punkty kontrolne, które powinny pomóc w zwiększeniu dostępności treści internetowych od pierwszego kroku:

Sprawdź poprawność kodu HTML. Upewnij się, że struktura HTML nie zawiera błędów, ponieważ technologie pomocnicze mogą mieć problemy z interpretacją zawartości strony.
Przetestuj za pomocą samej klawiatury. Upewnij się, że wszystkie aktywne elementy są dostępne tylko za pomocą klawiatury. Musisz także umieć wykonywać wszystkie czynności za pomocą klawiatury, np. przesyłając formularz.
Testuj za pomocą narzędzi do testowania dostępności i walidatorów. Korzystaj z narzędzi, które skanują i weryfikują potencjalne błędy dostępności.
Treści dynamiczne. Powiadamiaj użytkowników czytników ekranu o dynamicznych zmianach, np. o zmianie wyników wyszukiwania.
Nie polegaj na kolorach, aby opisać znaczenie. Użyj koloru wraz z opisem, np. ostrzeżenie [żółte pole].
Nie usuwaj konturu na fokus. Jest to często usuwana funkcja przy użyciu outline: 0; Nie rób tego, ponieważ użytkownicy klawiatury stracą orientację na stronie. Możesz rozważyć usunięcie konspektu fokusa dla użytkowników nie korzystających z klawiatury, ale zawsze udostępniaj konspekt fokusu dla użytkowników klawiatury.
Komunikaty o błędach. Zawsze informuj użytkownika, jak poprawić błąd. Nie tylko stwierdzaj, że dane są nieprawidłowe.
Kolejność zakładek. Upewnij się, że nawigacja oparta na kartach jest zgodna z konwencjami ustalonymi w graficznym interfejsie użytkownika. Powinien być przynajmniej zgodny z kierunkiem czytania domyślnego języka aplikacji. Na przykład w języku angielskim kolejność czytania to od góry do dołu, od lewej do prawej; w języku arabskim to od góry do dołu, od prawej do lewej.
Powiększenie. Upewnij się, że zawartość strony jest nadal czytelna podczas powiększania tekstu do 200%.
Wyłącz obrazy. Czy nadal jesteś w stanie wygodnie korzystać ze strony? Czy istnieją alternatywne teksty dla wszystkich obrazów?
Czytnik ekranu. Sprawdź, czy możesz czytać zawartość i poruszać się po niej, używając co najmniej jednego czytnika ekranu, np. VoiceOver, Windows Narrator lub NVDA.
Tryb wysokiego kontrastu. Sprawdź, czy zawartość jest nadal czytelna po przełączeniu w tryb wysokiego kontrastu.
Rozmiar czcionki. Upewnij się, że rozmiar czcionki na stronie nie jest mniejszy niż 10px.

4. Częste błędy w dostępności sieci

Najczęstszym błędem jest niezidentyfikowanie wymagań dostępności przed opracowaniem . Niestety im później dostępność będzie częścią rozwoju, tym trudniej będzie wdrożyć rozwiązania.

Oto lista zawierająca niektóre z najczęstszych błędów popełnianych przez programistów podczas wdrażania ułatwień dostępu:

Brak możliwości poruszania się po treści za pomocą samej klawiatury .
Niewłaściwe użycie właściwości konturu CSS. W większości przypadków outline: 0; jest używany, co oznacza, że kontur wokół każdego elementu, którego można użyć, nie jest już widoczny. Nie używaj outline: 0; lub outline: 0 !important; . Użytkownik straci możliwość zobaczenia aktualnie skupionego elementu podczas poruszania się po treści, chyba że istnieje inna alternatywa, np. za pomocą właściwości CSS border .
Utrata skupienia z bieżącego elementu, np. z powodu manipulacji DOM lub użycia metody blur() . Dzieje się tak często w przypadku aplikacji jednostronicowych.
Brak powiadomień dla użytkowników czytników ekranu , że coś się zmieniło, np. treść została pobrana za pomocą interfejsu API XMLHttpRequest, a nowe zmiany w interfejsie użytkownika zostały wyrenderowane, ale użytkownik nie został powiadomiony. Dzieje się tak często w przypadku aplikacji jednostronicowych.
Niedostępny selektor dat. W wielu przypadkach wykorzystywane są niedostępne datowniki. Użytkownicy nie mogą poruszać się po opcjach kalendarza za pomocą klawiatury.
Korzystanie z rozszerzeń , które twierdzą, że automatycznie naprawiają problemy z ułatwieniami dostępu . Używaj ich ostrożnie i sprawdź wyniki. Ich niewłaściwe użycie może stworzyć więcej problemów niż rozwiązań.
Dodanie do elementu atrybutu tabindex o numerze indeksu większym niż 0. Zastosowanie tabindex o indeksie większym niż 0 ma głównie na celu „poprawienie” ścieżki nawigacji. Rozważ jednak zmianę struktury HTML, aby uzyskać naturalną ścieżkę nawigacji. Manipulowanie nim za pomocą tabindex może prowadzić do problemów z konserwacją i nieprzewidywalnej ścieżki nawigacji.
Niewłaściwa hierarchia nagłówków. Niestety nadal jest to dość często spotykane, ale hierarchia nagłówków nie jest poprawnie zbudowana, np. <h1> , <h5> i <h2> . Użytkownicy czytników ekranu używają nagłówków do poruszania się po sekcjach, a niewłaściwa struktura jest myląca, ponieważ trudno jest zrozumieć kontekst.
Brak wsparcia dla wysokiego kontrastu. Są ludzie, którzy używają swojego oprogramowania w trybie wysokiego kontrastu. Upewnij się, że Twoje treści są nadal widoczne.
Korzystanie z niedostępnego rozwiązania CAPTCHA. Niestety wszystkie znane mi CAPTCHA są albo niedostępne, albo bardzo trudne w użyciu.
Za dużo i/lub niewstrzymanych animacji. Automatyczne odtwarzanie filmów, reklam lub karuzeli obrazów bardzo rozprasza.
Duże fragmenty tekstu. Tekst skondensowany w bardzo dużym, pojedynczym bloku, bez spacji, przecinków i kropek. Bardzo trudne do odczytania. Dzielenie na mniejsze fragmenty, więcej akapitów i podtytułów pomaga lepiej zorganizować treść tekstową.
Problemy z powiększaniem. Upewnij się, że zawartość jest nadal czytelna i można ją nawigować po powiększeniu do 200%.
Poleganie na kolorach. Bardzo często stan elementu jest zaznaczony tylko kolorem, np. stan ostrzeżenia jest oznaczony tylko żółtym punktorem; kolor ten nie jest postrzegany w ten sam sposób przez osoby nierozróżniające kolorów.
Małe klikalne/dotykalne cele. Obszary, które można kliknąć/dotknij, są często zbyt małe. Powiększenie pozwala użytkownikom łatwiej je aktywować.

Ale jak poprawić dostępność sieci?

Zdefiniowanie problemów to jedno. Naprawienie go to zupełnie inna sprawa i bardzo często nie jest tak proste, jak się wydaje. Dzieje się tak, ponieważ implementacje API dostępności nie są spójne i czasami musimy znaleźć obejścia lub nawet zaakceptować fakt, że coś w ogóle nie będzie działać, gdy próbujemy rozwiązać problem.

Jeśli chodzi o narzędzia, nie ma jednego narzędzia, które może sprawdzić wszystkie możliwe kombinacje, ale na dobry początek te narzędzia powinny pomóc:

Usługa sprawdzania poprawności znaczników W3C — tylko po to, aby mieć pewność, że zawartość HTML nie zawiera błędów. Jeśli struktura HTML zawiera błędy, dane wyjściowe są nieprzewidywalne i nie mogą być poprawnie przetworzone, zwłaszcza przez różne technologie wspomagające.
https://www.w3.org/WAI/ER/tools/ — lista programów lub usług online, które pomagają określić, czy zawartość internetowa spełnia wytyczne dotyczące ułatwień dostępu.
A moje narzędzie, ASLint https://www.aslint.org/, pomaga znaleźć problemy z dostępnością.

Zawsze pamiętaj, że żadne narzędzie ułatwień dostępu nie zastąpi testowania ręcznego , ponieważ nie wszystkie scenariusze mogą być w pełni lub w ogóle zautomatyzowane, np. sprawdzanie współczynnika kontrastu luminancji na elementach z position: fixed; .

Skoncentruj się na problemach, które blokują korzystanie z Twojej aplikacji, np. użytkownik nie jest w stanie poruszać się po menu za pomocą klawiatury.

Dlaczego ważne jest, aby zawartość była dostępna

Każdy chce jak najszerzej rozpowszechniać swoje treści. Dostępność pomaga w tym obszarze, na wielu poziomach, od dotarcia do większej liczby odbiorców po poprawę komfortu użytkowania dla wszystkich użytkowników. Co więcej, dostępność dotyczy nie tylko osób, które tradycyjnie uważa się za osoby niepełnosprawne. Niezależnie od tego, czy jest to osoba starzejąca się i przechodząca towarzyszące jej zmiany fizyczne, ktoś biegający w słoneczny dzień, który potrzebuje automatycznej regulacji kontrastu w telefonie, czy rodzic z rękami pełnymi toreb z zakupami, który chce wysłać wiadomość tekstową za pomocą głosu, dostępny technologia to technologia, z której od czasu do czasu mogą korzystać wszyscy użytkownicy.

Dodatkowym plusem jest to, że dostępne treści, które w pełni spełniają standardy WCAG 2.0, są łatwiejsze do indeksowania i zrozumienia przez wyszukiwarki, co może mieć znaczący wpływ na pozycję witryny. W ten sposób dostępny projekt może generować dodatkowy ruch na stronie.

Oto kilka statystyk, które należy wziąć pod uwagę:

Ponad miliard ludzi na całym świecie doświadcza pewnego rodzaju niepełnosprawności.
Starzenie się populacji. Przewiduje się, że w latach 2015-2030 liczba osób starszych — osób w wieku 60 lat lub starszych — na świecie wzrośnie o 56 procent, z 901 milionów do ponad 1,4 miliarda.
Kluczem jest uniwersalny design. Projektowanie uniwersalne odnosi się do szerokiego spektrum pomysłów i praktyk związanych z wytwarzaniem usług, produktów i środowisk, które są z natury dostępne i użyteczne dla osób o wszystkich zdolnościach.
Rodzaje niepełnosprawności: Istnieje pięć szerokich kategorii niepełnosprawności, w tym wzroku, mobilności, mowy, poznania i słuchu.

Wszyscy wymagamy wysokiej jakości usług. Dostarczmy je też .