Przejdź do treści
A11ySignal

Jak uczynić witrynę WordPress dostępną

Programiści WordPressa i osoby utrzymujące witryny · 7 min · zaktualizowano

Rdzeń WordPressa jest w przyzwoitym stanie i ma zespół dostępności z prawdziwymi wymaganiami. Prawie nic z tego, co zawodzi na witrynie WordPress, nie pochodzi z rdzenia.

Pochodzi z szablonu, z kreatora stron, z wtyczek i z dwunastu lat wgrywanych obrazów bez tekstu alternatywnego. To są te cztery miejsca, w które trzeba spojrzeć.

Biblioteka mediów to największy pojedynczy zysk

Każdy kiedykolwiek wgrany obraz ma pole alt, a na większości witryn większość z nich jest pusta. To jedna edycja zbiorcza dzieli cię od dużej poprawy, i jest to praca, którą redaktor wykona bez programisty.

Dwie zasady robią to szybko: jeśli obraz niesie informację, napisz to, co powiedziałbyś, czytając stronę na głos; jeśli jest dekoracją, zostaw alt puste, zamiast wpisywać nazwę pliku. Puste jest poprawne i ciche — brakujące nie jest.

Kreatory stron

Elementor, Divi, WPBakery i im podobne generują głębokie struktury `div` ze stylowaniem, które tylko wygląda jak semantyka. Nagłówki stają się ostylowanym tekstem, przyciski — linkowanymi divami, a akordeony wychodzą bez `aria-expanded`.

Zwykle nie przepiszesz tego, co generuje kreator, ale możesz starannie wybierać jego komponenty: komponent nagłówka zamiast ostylowanego bloku tekstu, komponent przycisku zamiast linkowanego obrazu — i sprawdzić, co każdy z nich generuje, zanim trafi na pięćdziesiąt stron.

  • nie takKomponenty nagłówka z poziomem dobranym pod rozmiar, a nie pod miejsce w konspekcie.
  • nie takBoksy z ikoną i boksy z obrazem, które zamykają całą kartę w linku bez dostępnej nazwy.
  • nie takKaruzele z automatycznym odtwarzaniem i bez kontrolki pauzy.
  • nie takZakładki i akordeony bez obsługi klawiatury i bez stanu ARIA.

Szablony

Sprawdź, czy szablon deklaruje `accessibility-ready` — WordPress.org weryfikuje ten znacznik względem prawdziwej listy kontrolnej, i to sensowny sygnał. Większość komercyjnych szablonów go nie ma.

Niezależnie od szablonu cztery rzeczy trzeba sprawdzić wprost: czy link pomijający istnieje i czy staje się widoczny przy fokusie; czy fokus jest widoczny na każdej kontrolce; czy menu mobilne działa z klawiatury; i czy poziomy nagłówków w szablonach układają się w konspekt.

Wtyczki

Formularze, banery cookies, wyskakujące okienka i widżety wyszukiwania to miejsca, w których pojawia się wstrzykiwany kod. Zwłaszcza wtyczki formularzy kontaktowych różnią się ogromnie: jedne generują porządne etykiety i powiązania błędów, inne teksty podpowiedzi i czerwoną ramkę.

Przetestuj formularz, wysyłając go pustego z uruchomionym czytnikiem ekranu. Jeśli nic nie zostaje ogłoszone, a fokus się nie rusza, wtyczka łamie 3.3.1 i z poziomu szablonu tego nie naprawisz.

Od czego zacząć

W tej kolejności, bo każdy krok jest tańszy od następnego.

  • róbPrzeskanuj stronę główną, wpis, szablon strony, wyniki wyszukiwania i stronę kontaktu.
  • róbNapraw kontrast w zmiennych CSS szablonu — jedna zmiana, cała witryna.
  • róbPrzejdź bibliotekę mediów dla obrazów, które są faktycznie używane.
  • róbPrzetestuj formularz kontaktowy klawiaturą i czytnikiem ekranu. Wymień wtyczkę, jeśli nie zdaje.
  • róbUstaw cotygodniowe skanowanie, żeby aktualizacja wtyczki po cichu tego nie cofnęła.

Pytania

Czy WordPress jest dostępny?
Rdzeń jest w rozsądnym stanie, a edytor bloków się poprawia. Do odwiedzających trafia rdzeń plus twój szablon plus twoje wtyczki plus twoja treść, a błędy prawie zawsze pochodzą z trzech ostatnich.
Czy wtyczki dostępnościowe naprawiają dostępność WordPressa?
Wtyczki, które pomagają dobrze redagować — przypomnienia o tekście alternatywnym, sprawdzanie kontrastu w edytorze — są naprawdę użyteczne. Te, które wstrzykują widżet nakładki, nie naprawiają kodu pod spodem.
Co znaczy „accessibility-ready” przy szablonie?
To znacznik, który WordPress.org weryfikuje względem opublikowanej listy obejmującej nawigację klawiaturą, kontrast, nagłówki i formularze. To nie gwarancja zgodności, ale znaczy, że ktoś sprawdził.

Czytaj dalej