Jak włączyć dostępność sieciową do swojej witryny WordPress?

Opublikowany: 2020-02-15

WordPress to najpopularniejsza platforma do tworzenia stron internetowych. Według W3techs, 35,7% wszystkich stron internetowych korzysta z WordPressa, co daje mu aż 62,5% udziału w globalnym rynku systemów zarządzania treścią (CMS).

Jednak podczas tworzenia witryny WP dostępność sieci jest prawdopodobnie ostatnią rzeczą, o której myślisz.

Jednak WordPress Accessibility Coding Standards stwierdza, że „ Wszelki nowy lub zaktualizowany kod wydany w WordPress musi być zgodny z Wytycznymi dotyczącymi dostępności treści internetowych 2.0 na poziomie AA. ”

Innymi słowy, dostępność jest krytycznym czynnikiem, jeśli masz witrynę WP.

Na szczęście udostępnienie witryny WP nie jest niemożliwe. Ale zanim omówimy, jak to zrobić, zrozummy, na czym polega dostępność sieci.

A. Cztery filary dostępności internetowej

Konsorcjum World Wide Web (W3C), które opracowuje międzynarodowe standardy dla sieci, już opracowało następujące cztery zasady dostępności sieci:

Dostrzegalny: Musisz prezentować wszystkie informacje i elementy na swojej stronie w sposób, który każdy może je dostrzec.
Możliwość obsługi: wszystkie elementy nawigacyjne i interaktywne muszą być obsługiwane przez różnych użytkowników.
Zrozumiałe: każdy powinien być w stanie zrozumieć informacje i interfejs użytkownika w Twojej witrynie.
Solidny: Różne rodzaje technologii wspomagających i użytkownicy powinni być w stanie odczytać zawartość Twojej witryny.

B. Najlepsze praktyki dotyczące dostępności sieci WordPress

Mając na uwadze powyższe zasady, możesz podjąć następujące kroki, aby Twoja witryna WordPress była dostępna dla osób niepełnosprawnych:

Popraw dostępność tekstu

Każdy, także niedowidzący, powinien być w stanie przeczytać tekst na Twojej stronie. Chociaż możesz domyślnie używać czcionek o dużym rozmiarze, udostępnienie tekstu o zmiennym rozmiarze jeszcze bardziej zwiększy czytelność. Użytkownicy niedowidzący mogą zwiększyć rozmiar czcionki zgodnie ze swoją wygodą, korzystając z tej funkcji.

Pamiętaj też, aby w razie potrzeby dodać alternatywy tekstowe, takie jak Tagi Alt. WP Accessibility to jedna z wtyczek ułatwień dostępu WordPress, która może pomóc w dodawaniu tekstu o zmiennym rozmiarze, kontrastu kolorów, dodawaniu tytułów postów, aby przeczytać więcej linków i zapewnić odpowiedni tekst alternatywny.

Strukturalny przód i tył

Każda z Twoich stron internetowych musi mieć dobrze zorganizowany front i backend. Nie tylko zwiększa ogólną czytelność treści, ale także ułatwia narzędziom pomocniczym przekazywanie wiadomości niepełnosprawnym użytkownikom. Możesz użyć elementów HTML, takich jak semantyczne tagi nagłówków i meta-opisy, aby ulepszyć zaplecze.

Upewnij się, że używasz wypunktowanych list, krótkich akapitów oraz dobrze zorganizowanej i rzeczowej treści, która powinna pomóc ulepszyć interfejs. Powinieneś także użyć odpowiednich nagłówków i tytułów, aby zdefiniować różne podsekcje treści. Unikaj używania krzykliwych animacji i GIF-ów, ponieważ nie są one przyjazne dla ułatwień dostępu.

Dodaj także linki pomijania, aby ułatwić nawigację po zawartości dla użytkowników czytników ekranu. Ta prosta funkcja ułatwień dostępu pozwala użytkownikom przeskakiwać z jednej sekcji treści do drugiej bez konieczności przechodzenia przez niepotrzebne materiały.

Nawigacja za pomocą klawiatury dla lepszej interakcji

Musisz także upewnić się, że po witrynie można nawigować za pomocą klawiatury. Powinien zawierać łącza i menu, zwłaszcza menu rozwijane. Wszyscy użytkownicy powinni mieć dostęp do elementów takich jak łącza, menu, przyciski i formularze za pomocą Tab (do przodu) i Shift+Tab (do tyłu).

Musisz także użyć widocznego wskaźnika ostrości, który pokazuje niepełnosprawnym użytkownikom, gdzie się znajdują na stronie internetowej. Motywy WordPress mogą często resetować domyślny styl ostrości. Upewnij się, że używasz motywu WordPress, który nie resetuje tej funkcji. Motyw dostępności Divi może pomóc w skonfigurowaniu nawigacji przyjaznej dla klawiatury z dostępnymi menu rozwijanymi i wizualnymi konturami elementów, które można ustawić.

Dodaj punkty orientacyjne ARIA

ARIA to skrót od Accessible Rich Internet Applications. Dzięki roli punktów orientacyjnych ARIA możesz zdefiniować różne regiony strony internetowej, umożliwiając użytkownikom technologii wspomagającej łatwe poruszanie się po witrynie.

Najczęstsze role charakterystyczne ARIA obejmują baner, główny, uzupełniający, informacje o treści, wyszukiwanie i nawigację.

Baner: Definiuje nagłówek witryny, taki jak logo, nazwa firmy lub tytuł witryny.
Główna: Definiuje główną zawartość strony internetowej.
Uzupełniające: Wykrywa treści pomocnicze, które są istotną częścią treści głównej.
Informacje o zawartości: Zawiera informacje o dokumentach nadrzędnych, takie jak przypisy, prawa autorskie i oświadczenia o ochronie prywatności.
Szukaj: oznacza formularz wyszukiwania w Twojej witrynie.
Nawigacja: Zaznacza elementy nawigacyjne strony internetowej.

Największą zaletą korzystania z punktów orientacyjnych ARIA jest to, że mogą pracować z już semantycznymi elementami HTML5. W rezultacie możesz ich używać z elementami HTML5 w istniejących motywach WordPress.

Elementy interaktywne: kontrast kolorów

W przypadku elementów interaktywnych, takich jak wezwania do działania i formularze, zawsze używaj kolorów o wysokim kontraście jako tła tekstu. Podczas gdy WCAG 2.0 poziom AA wymaga współczynnika kontrastu co najmniej 4:5:1 dla normalnego tekstu i 3:1 dla dużego tekstu, poziom AAA wymaga współczynnika kontrastu co najmniej 7:1 dla normalnego tekstu i 4:5: 1 dla dużego tekstu.

Zwykle czarny tekst na białym tle zapewnia najlepszy kontrast kolorów. Możesz również użyć czarnego tekstu na żółtym tle i odwrotnie. Unikaj jednak kombinacji, takich jak zielony tekst na czerwonym tle lub czerwony tekst na zielonym tle.

Pożegnalne słowa

Dostępność witryny obejmuje również inne elementy interaktywne, takie jak multimedia, w Twojej witrynie. Upewnij się, że żaden z multimediów, takich jak wideo, audio, slidery czy karuzele, nie ma domyślnej opcji autoodtwarzania, ponieważ jest to znacząca bariera dla niepełnosprawnych użytkowników. Zamiast tego wszystkie treści multimedialne powinny zacząć się odtwarzać dopiero po interakcji użytkownika.

Oprócz transkrypcji wideo, audiodeskrypcji i podpisów upewnij się, że korzystasz z dostępnych odtwarzaczy multimedialnych. Możesz użyć wtyczki, takiej jak Able Player, która umożliwia dodawanie filmów i audio zawartych w dostępnym odtwarzaczu multimedialnym na dowolnej stronie witryny WordPress.

Udostępnienie witryny WordPress będzie wymagało zmiany procesu projektowania i rozwoju i można to zrobić ręcznie z doradcą. Automatyczne rozwiązania dostępności sieci wymagają niewielkiej inwestycji czasu i zasobów, przyniosą wiele korzyści, w tym pozytywny wizerunek marki, szerszy zasięg rynkowy, lepszy ranking w wyszukiwarkach, a także wzrost sprzedaży.

Jeśli nadal masz wątpliwości, jak udostępnić swoją witrynę WordPress, możesz umieścić swoje zapytania w komentarzach.