Jak uczynić stronę internetową dostępną i co oznacza zgodność z WCAG

Co oznacza dostępność strony internetowej

Dostępność strony internetowej oznacza, że ludzie mogą korzystać z witryny bez walki z nią. Użytkownik czytnika ekranu, odwiedzający korzystający tylko z klawiatury, ktoś na telefonie w jasnym świetle i osoba z niskim wzrokiem wszyscy spotykają tę samą stronę z różnymi potrzebami, a strona powinna działać dla każdego z nich.

To brzmi prosto. Rzadko tak jest.

Dobre podejście do dostępności nie zaczyna się tylko od technologii. Zaczyna się od jednego pytania: czy osoba może wykonać zadanie w 3 kliknięcia, za pomocą myszy, tylko za pomocą klawiatury lub z pomocą oprogramowania wspomagającego? Jeśli odpowiedź brzmi nie dla nawet jednej ścieżki, strona internetowa jest trudniejsza, niż powinna być.

Dostępność pomaga również zwykłym użytkownikom w zwykłych sytuacjach. Napisy pomagają komuś w hałaśliwej stacji kolejowej. Wyraźne stany fokusu pomagają komuś, kto zgubił ślad kursora. Dobre nagłówki pomagają czytelnikowi przeszukać długą stronę w 20 sekund zamiast 2 minut.

Zespoły często traktują dostępność jako specjalną funkcję. To jest zły kształt. Należy do struktury, tekstu, formularzy, mediów i nawigacji. Jeśli już pracowałeś nad strona internetowa firmy, już wiesz, że struktura wpływa na każdą stronę; dostępność sprawia, że ta struktura jest użyteczna dla większej liczby osób.

Co oznacza zgodność z WCAG

WCAG oznacza Wytyczne dotyczące dostępności treści internetowych. To opublikowany standard mający na celu uczynienie treści internetowych bardziej dostępnymi, a ludzie często mówią o zgodności z WCAG, jakby to był jeden przełącznik. To nie jest prawda.

Zgodność z WCAG oznacza, że strona internetowa spełnia odpowiednie kryteria sukcesu na określonym poziomie. Większość zespołów dąży do poziomu AA, ponieważ równoważy praktyczny wysiłek i rzeczywisty wpływ. Strona może być częściowo zgodna, prawie zgodna lub w pełni zgodna w zależności od tego, co zostało przetestowane, a co nadal nie działa.

Istnieje również różnica między przestrzeganiem niektórych wytycznych a przestrzeganiem standardu jako całości. Strona z tekstem alternatywnym na obrazach, ale z uszkodzoną obsługą klawiatury, nie jest „wystarczająco dostępna” tylko dlatego, że jedno pole zostało zaznaczone. Strona z pięknym kontrastem, ale bez etykietowanych pól formularzy, wciąż pozostawia ludzi w martwym punkcie działania.

Myśl o zgodności z WCAG jako o dyscyplinie, a nie odznace. Standard daje ci kryteria do przetestowania, a te kryteria pomagają zespołom unikać niejasnych obietnic. Jeśli przegląd wspomina o „tym, jak uczynić stronę internetową dostępną i co oznacza zgodność z WCAG”, powinien połączyć te dwa elementy: jedno to praca praktyczna, drugie to standard, który to mierzy.

Zacznij od audytu dostępności

Audyt dostępności daje ci pierwszą listę problemów. Zacznij od próbki 10 do 20 ważnych stron, a nie całej witryny naraz, ponieważ powszechne bariery zazwyczaj się powtarzają: brak tekstu alternatywnego, niski kontrast, pułapki klawiaturowe, nieoznakowane formularze i nagłówki, które skaczą z H2 do H4 bez żadnego powodu.

Użyj zarówno automatycznych kontroli, jak i przeglądu ludzkiego. Automatyzacja szybko wychwytuje wzorce, ale nie powie ci, czy etykieta przycisku ma sens w kontekście, czy modal zamyka się płynnie. Jeden szybki test manualny z użyciem klawiatury może ujawnić więcej niż 50 automatycznych alertów.

Sprawdzaj obrazy jeden po drugim. Obrazy dekoracyjne powinny być zazwyczaj ignorowane przez technologie wspomagające, podczas gdy znaczące obrazy potrzebują tekstu alternatywnego, który mówi, co jest ważne. „Wykres pokazujący wzrost sprzedaży w 2024 roku” jest lepszy niż „wykres”, a „Zdjęcie zespołu” jest lepsze niż „obraz123”.

Formularze wymagają szczególnej uwagi. Każde pole wejściowe musi mieć wyraźną etykietę, a nie tylko tekst zastępczy, ponieważ teksty zastępcze znikają, gdy ludzie zaczynają pisać. Pole logowania bez etykiety staje się grą w zgadywanie. To jest porażka na pierwszym kroku.

Nagłówki audytu z prostą mapą. Strona nie powinna używać nagłówków tylko do stylizacji, a użytkownik powinien móc przeglądać zarys w kolejności. Jeśli struktura jest chaotyczna, strona jest trudniejsza do zrozumienia dla użytkowników czytników ekranu oraz dla każdego, kto próbuje czytać szybko.

Zbuduj dostępną strukturę treści

Dostępna struktura treści zaczyna się od semantycznych nagłówków. Używaj H2 dla głównych sekcji i H3 dla podtematów. Chodzi o nawigację, a nie dekorację. Użytkownicy czytników ekranu przeskakują przez nagłówki, a jasny zarys pozwala im poruszać się po stronie w kilka sekund zamiast czytać każdą linię.

Organizacja strony ma równie duże znaczenie. Umieść główne zadanie blisko góry, trzymaj powiązaną treść razem i unikaj rozpraszania kluczowych działań w pięciu niepowiązanych blokach. Jedna jasna ścieżka jest lepsza niż trzy konkurujące. Chaotyczny układ może sprawić, że prosta akcja będzie przypominać łamigłówkę.

Linki powinny mówić, dokąd prowadzą. „Czytaj więcej” jest słabe samo w sobie. „Czytaj więcej o wsparciu strony po uruchomieniu” informuje użytkownika, co otrzyma, a to ma znaczenie, gdy strona zawiera 12 linków. Używaj opisowego tekstu za każdym razem, gdy cel nie jest oczywisty z otaczającego zdania.

Dla praktycznego przykładu porównaj „pobierz” z „pobierz PDF listy kontrolnej dostępności.” Druga wersja jest dłuższa, ale jest użyteczna. W liście linków czytnika ekranu dodatkowe słowa nie są zbędne; są mapą.

Tekst alternatywny powinien być znaczący, a nie teatralny. Zdjęcie produktu może potrzebować nazwy produktu i jednego wyróżniającego szczegółu. Zrzut ekranu może potrzebować krótkiego wyjaśnienia stanu interfejsu. Dekoracyjny akcent może pozostać cichy. Ta różnica oszczędza czas użytkownikom, którzy słyszą każdy opis obrazu w kolejności.

Czytelna treść ma znaczenie. Krótkie akapity pomagają. Proste terminy pomagają jeszcze bardziej. Jeśli zdanie pełni rolę akapitu, podziel je. Jeśli zdanie ma trzy pomysły, podziel je na 2 zdania. Czytniki ekranu mogą obsługiwać długie treści, ale ludzka uwaga ma swoje ograniczenia.

Strona zbudowana w ten sposób wspiera również projekty bogate w treść, w tym portal treści dotyczący inwestowania, gdzie użytkownicy potrzebują szybkiego skanowania, wyraźnego podziału na sekcje i terminologii, która nie zmienia się z strony na stronę.

Uczyń nawigację i kontrolki przyjaznymi dla klawiatury

Dostępność za pomocą klawiatury nie jest opcjonalna. Menu, przyciski, okna dialogowe i formularze muszą działać bez myszy. Jeśli ktoś może przejść do kontrolki za pomocą klawisza Tab, ale nie może jej aktywować, kontrolka jest uszkodzona.

Najpierw przetestuj kolejność tabulacji. Naciśnij Tab na stronie i sprawdź, czy fokus porusza się w logicznej kolejności od góry do dołu, z lewej do prawej. Jeśli fokus przeskakuje do ukrytego elementu lub pomija kluczowy przycisk, strona wymaga dostosowania. Widoczność fokusu ma równie duże znaczenie; jeśli nie widzisz, gdzie znajduje się klawiatura, zgadujesz.

Okna dialogowe potrzebują klawisza Escape lub innej wyraźnej akcji zamykającej. Fokus powinien przechodzić do okna dialogowego, gdy się otwiera, a następnie wracać do wyzwalacza, gdy się zamyka. Bez tego zachowania użytkownicy klawiatury mogą utknąć lub się zgubić. Nikt nie chce naciskać Tab 18 razy, aby znaleźć wyjście.

Menu powinny otwierać się i zamykać w przewidywalny sposób. Menu działające tylko na najeżdżanie nie wystarczy. Rozwijane menu, które zależy od wskaźnika myszy, może wykluczyć użytkowników klawiatury i dotykowych jednocześnie. Zasada jest prosta: jeśli kontrolka istnieje, powinna być obsługiwana na więcej niż jeden sposób.

Formularze zasługują na jeszcze jedną kontrolę. Komunikaty o błędach muszą pojawiać się w pobliżu pola, używać jasnego języka i być powiązane z samym polem. Komunikat, który tylko mówi „nieprawidłowe dane”, nikomu nie pomaga. Powiedz, co poszło nie tak. Powiedz, jak to naprawić. Dwa zdania mogą uratować zgłoszenie wsparcia.

W przypadku większych projektów pomocne jest połączenie pracy nad dostępnością z witryną, która już obsługuje złożone przepływy, takie jak infrastrukturę prywatnej sieci, ponieważ ta sama dyscyplina, która utrzymuje wewnętrzne systemy przewidywalnymi, również utrzymuje publiczne interfejsy użytecznymi.

Popraw dostępność kolorów, kontrastu i mediów

Kontrast kolorów ma bezpośredni wpływ na czytelność. Tekst, który zlewa się z tłem, może wyglądać stylowo w makiecie, ale zawodzi w codziennym użytkowaniu. Sprawdź kontrast za pomocą narzędzia, a następnie sprawdź go na rzeczywistych ekranach.

Nie polegaj tylko na kolorze, aby przekazać znaczenie. Jeśli wymagane pola są czerwone, oznacz je również tekstem lub ikoną plus tekst. Jeśli wykres używa czerwonego i zielonego, dodaj etykiety lub wzory. Jeden sygnał kolorystyczny może zniknąć dla osób z daltonizmem, ale zadanie powinno nadal mieć sens.

Napisy to pierwszy krok dla wideo. Pomagają osobom, które nie słyszą dźwięku, oraz osobom, które wyłączają dźwięk w miejscach publicznych. Transkrypcja pomaga jeszcze bardziej, gdy użytkownik chce wyszukiwać, cytować lub przeglądać szczegóły później. Opisy dźwiękowe mają znaczenie dla filmów, w których informacje wizualne nie są wypowiadane na głos.

Obrazy z tekstem wewnątrz wymagają dodatkowej uwagi. Jeśli tekst jest istotny, umieść go również w treści strony. Baner, który mówi „Zarejestruj się do piątku”, nie powinien zmuszać kogoś do dekodowania zrzutu ekranu tylko po to, aby znaleźć termin. Mała decyzja, duża różnica.

Kontrole kolorów i mediów powinny również być częścią przeglądów bezpieczeństwa strony internetowej, ponieważ strona, która wygląda na bezpieczną, ale ukrywa kluczowy tekst lub ma uszkodzone media, często budzi tę samą nieufność użytkowników, co błąd techniczny. Jeśli już śledzisz bezpieczeństwie strony internetowej, włącz kontrole dostępności do tego samego okna przeglądu.

Testuj, naprawiaj i utrzymuj dostępność w czasie

Dostępność to nie jednorazowe sprzątanie. Strony zmieniają się co tydzień, czasami codziennie. Nowy baner, aktualizacja formularza lub przeprojektowane menu mogą wprowadzić te same stare problemy w 30 minut.

Zbuduj prosty proces roboczy. Po pierwsze, uruchom automatyczne kontrole na zmienionych stronach. Po drugie, przetestuj kluczowe ścieżki użytkowników ręcznie za pomocą klawiatury i czytnika ekranu. Po trzecie, zbierz opinie użytkowników i zarejestruj problem z adresem URL strony, przeglądarką i dokładnym krokiem, w którym pojawia się problem. Cztery pola w zgłoszeniu przewyższają jedną niejasną skargę.

Utrzymanie staje się łatwiejsze, gdy dostępność jest częścią regularnej pracy wydaniowej. Jeśli deweloperzy dodają komponenty, te komponenty muszą mieć etykiety, stany fokusowe i zachowanie klawiatury przed ich wdrożeniem. Jeśli redaktorzy przesyłają obrazy, muszą mieć nawyk dodawania tekstu alternatywnego. Jeśli marketerzy dodają bloki promocyjne, muszą sprawdzić kontrast i tekst linków.

Używaj wersjonowanych szablonów tam, gdzie to możliwe. Stała nagłówek, standardowy blok formularza i przetestowany wzór modalny zmniejszają powtarzające się błędy. To jeden z powodów, dla których zespoły, które dbają o wsparcie strony internetowej po uruchomieniu często lepiej radzą sobie z dostępnością: praca jest wbudowana w wsparcie, a nie łatana po skargach.

Opinie prawdziwych użytkowników to najsurowszy test. Użytkownik klawiatury szybciej znajdzie pułapkę w menu z trzema pozycjami niż jakiekolwiek narzędzie audytowe. Użytkownik czytnika ekranu usłyszy, czy etykieta przycisku ma sens przy pierwszym użyciu. Jeśli 2 osoby zgłoszą tę samą blokadę, traktuj to jak wzór, a nie przypadek.

Jedna ostatnia nawyk bardzo pomaga: trzymaj kontrole dostępności związane z każdą aktualizacją treści. Jeśli zespół publikuje nową stronę bez sprawdzania nagłówków, etykiet i mediów, strona powoli cofa się w czasie. Lista konserwacyjna z 5 pozycjami może zatrzymać ten regres, zanim rozprzestrzeni się na każdą stronę.