Czy twój WordPress jest dostępny?

Dostępność stron internetowych to temat rzeka. W sieci jest bardzo dużo materiałów dotyczących dostosowania stron internetowych do potrzeb osób niepełnosprawnych. Wytyczne dotyczące tworzenia dostępnych stron internetowych zostały zawarte w WCAG (pl.Wytyczne dotyczące dostępności treści internetowych).

Polska jako jeden z wielu krajów zobligowała się do dostosowania stron administracji publicznej do wymagań WCAG na poziomie AA. Jest jeszcze trzeci poziom, który zapewne przez wiele lat nie będzie osiągnięty przez żadną instytucję.

Jeżeli wczytacie się w specyfikację WCAG zobaczycie, że tych wymagań nie ma zbyt wiele. Większość z nich została postawiona dla redaktorów witryn niż programistów. A jak się to ma do WordPress-a.

Niedostępne szablony

O ile sam WordPress dba o dostępność to już autorzy szablonów nie. Jeżeli kupiliście szablon w themeforest lub innym sklepie możecie być pewni, ze szablon jest źle zaprojektowany. Pierwszy błąd, z którym możemy się spotkać to brak możliwości przechodzenia pomiędzy slajdami tabulatorem. O tak. Tabulator i ja czasami używam. Z lenistwa.

Inny problem, to wszystkie animacje. FadeIn czy SlideUp korzystają z właściwości display: none. Dla programów czytających to informacja, żeby taki element pomijać, dlatego ważne jest zastosowanie właściwej metody ukrywania obiektu lub tekstu.

Wszystkie treści muszą mieć również właściwy kontrast do tła. Czyli zastosowanie koloru #888 do tła #FFF będzie niepoprawny. Do sprawdzania poprawności kontrastu możemy użyć narzędzia dostępnego na tej stronie. Zaprogramowana wersja kontrastowa jak powiększanie czcionki nie jest wymagane. To tylko zalecenie.

W powyższym akapicie popełniłem błąd ponieważ użyłem sformułowania „na tej stronie”. Taki zapis jest nieprawidłowy. Podobnie jak czytaj więcej. Jak tworzyć poprawne linki. Wszystkie linki muszą mieć unikalny tytuł, dlatego trzeba je tworzyć w  taki sposób:

<a href="#link">Czytaj wiecej<span class="wai-hide"> o: Dostępność stron internetowych</span></a>
<style>
.wai-hide {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}
</style>

W przypadku odnośników nie możemy stosować linków „czytaj więcej”, ponieważ osoba niewidoma nie wie co pod tym linkiem się znajduje, dlatego ważne jest zastosowanie takiego mechanizmu a nie innego.

Niedostępne wtyczki

Oprócz samego szablonu problem stanowią wtyczki. Przykładowo wtyczki do tworzenia formularzy muszą być również poprawnie zaprojektowane. Nie może być takiej sytuacji, że etykieta nie jest połączona z polem tekstowym lub informacja o błędzie pojawia się pod polem.

Nie będę wymieniał wszystkich problemów związanych z dostępnością ponieważ w internecie jest mnóstwo materiałów na ten teemat. Dla leniwych lista obowiązkowych stron:

  1. Fundacja Widzialni
  2. Polska Akademia Dostępności
  3. Forum Dostępnej Cyberprzestrzeni
  4. Informaton

You may also like...