Rozszerzenia Drupala ułatwiające dostosowanie strony do wymagań WCAG

Osoby z różnymi niepełnosprawnościami również korzystają sieci. Jednak nie wszystkie strony i aplikacje internetowe są do nich dostosowane. Z tego powodu takim użytkownikom ciężko poruszać się po niektórych witrynach. Aby zapewnić równy dostęp do informacji i funkcji dla wszystkich, powstały międzynarodowe standardy dostępności, takie jak np. WCAG (Web Content Accessibility Guidelines).

Różne systemy CMS oferują wbudowane rozwiązania zapewniające dostępność lub posiadają rozszerzenia, które można zainstalować w systemie. Jednym z takich systemów jest Drupal. Platforma posiada wbudowane mechanizmy ułatwiające wdrażanie standardów WCAG, ale oferuje również mnóstwo modułów, które po instalacji rozszerzają istniejące mechanizmy lub dodają całkiem nowe funkcje.

W tym artykule przedstawimy kluczowe moduły Drupala, które ułatwiają pracę nad wdrażaniem dostępności w witrynach internetowych. Pokażemy, w jaki sposób je zainstalować oraz skonfigurować, a także omówimy ich korzyści z ich korzystania.

Osoby z jakąkolwiek niepełnosprawnością nie powinny być wykluczane z życia publicznego. Dlatego tworzenie stron internetowych z ułatwieniami powinno być etycznym obowiązkiem każdego właściciela witryny czy programisty. Takie podejście umożliwia aktywne uczestniczenie w życiu społecznym, a także zapewnia wszystkim równy dostęp do cyfrowych zasobów i usług.

Podmioty publiczne muszą przestrzegać standardów dostępności cyfrowej, jednak prywatne nie mają obowiązku ich wdrażania. Mimo to każdy biznes wypadnie lepiej w oczach użytkownika, jeśli bez problemu będzie mógł skorzystać z oferowanej usługi lub nabyć produkt. Wdrożenie standardów WCAG w podmiotach prywatnych to nie tylko ułatwienie dla osób z pewnymi dysfunkcjami, ale również większa szansa na pozyskanie potencjalnego klienta.

Każdy kraj ustanawia własne przepisy dotyczące dostępności, jednak wiele państw opiera się na międzynarodowych standardach WCAG, które zostały opracowane przez W3C. Unia Europejska dyrektywą 2016/2102 (norma EN 301 549) zobowiązuje organy sektora publicznego państw członkowskich do udostępniania stron internetowych i aplikacji mobilnych zgodnych z WCAG 2.1. Od października 2023 dostępne są już standardy WCAG 2.2. Wszystkie te przepisy mają na celu zapewnienie takiego samego dostępu do informacji i usług online zarówno dla osób w pełni sprawnych, jak i z niepełnosprawnościami. Za nieprzestrzeganie tych przepisów podmiotom publicznym grożą kary finansowe.

CMS Drupal od dawna kładzie duży nacisk na dostępność. Oto parę przykładów jak platforma ułatwianie budowanie tego typu stron.

Wbudowane funkcje dostępności

Drupal oferuje wiele wbudowanych funkcji wspierających dostępność, które są zintegrowane z każdą wersją platformy. Przykładowo system posiada semantyczne znaczniki HTML, które poprawiają interoperacyjność z narzędziami wspomagającymi, takimi jak czytniki ekranu.

Dodatkowo system zapewnia odpowiednie kontrasty kolorów oraz zastosowanie atrybutów ARIA, które są niezbędne do prawidłowego oznaczania elementów interfejsu użytkownika. W każdej wersji Drupal, od wersji 7, są dostępne funkcje takie jak poprawki formularzy, które są aktualizowane i rozszerzane o nowe funkcje zgodnie z najnowszymi standardami dostępności.

Przestrzeganie standardów WCAG i ARIA

Drupal umożliwia dodanie ARIA do każdego typu zawartości oraz pola. Natywne skórki mają już wbudowane takie atrybuty, a przy tworzeniu nowych rozszerzeń od podstaw również nie będziesz mieć z tym problemów. Atrybutów powinieneś używać przede wszystkim w głównych sekcjach, takich jak nagłówki, nawigacja, główna treść, czy w stopce.

Możesz natknąć się na sporo modułów, które wspomagają poprawę dostępności stron internetowych. Poniżej przedstawiamy te najprzydatniejsze.

Editoria11y

Editoria11y to narzędzie identyfikujące potencjalne błędy z dostępnością poprzez wyświetlanie informacji na stronie. Pokazuje m.in. to, czego brakuje lub co jest źle zaimplementowane. Dzięki temu edytor może poprawić błędy jeszcze przed publikacją treści.

Jak zaistalować i skonfigurować rozszerzenie?

1. Zainstaluj moduł z poziomu panelu administracyjnego Drupala lub użyj Drush.

2. Skonfiguruj ustawienia, aby moduł mógł skanować treści podczas edycji. Możesz ustawić, w jakich elementach rozszerzenie powinno sprawdzać dostępność, a w jakich pomijać.

3. Podczas edycji treści moduł dostarcza informacje o problemach z dostępnością oraz sugestie ich rozwiązania.

4. Nadaj odpowiednie uprawnienia.

Node Link Report

Moduł Node Link Report monitoruje niedziałające linki w treściach Drupala. Po wykryciu błędnego linku wyświetla powiadomienie, dzięki czemu możesz natychmiast poprawić odnośnik. To dobrze wpłynie nie tylko na dostępność, ale również na SEO.

Konfiguracja modułu Node Link Report:

1. Zainstaluj moduł za pomocą panelu administracyjnego Drupala lub Drush.

2. W układzie bloków wybierz miejsce, w którym ma się wyświetlić blok z informacjami z modułu.

3. Przeglądaj raporty i naprawiaj uszkodzone linki, aby poprawić nawigację i dostępność strony.

Text Resize

Text Resize to narzędzie skierowane do osób z problemami ze wzrokiem. Dzięki niemu użytkownik jest w stanie zmieniać rozmiar tekstu na stronie bez konieczności wchodzenia w ustawienia przeglądarki.

Jak zainstalować i skonfigurować moduł?

1. Zainstaluj moduł z poziomu panelu administracyjnego Drupala lub Drush.

2. Skonfiguruj rozszerzenie, aby dodać narzędzia do zmiany rozmiaru tekstu na stronach. W układzie bloków wybierz miejsce, gdzie mają się wyświetlać przyciski.

3. Zapewnij użytkownikom zmianę rozmiaru tekstu za pomocą dostępnych przycisków.

Fluidproject UI Options

Moduł oferuje użytkownikom narzędzia do dostosowania strony pod kątem dostępności, umożliwiając zmianę wielkości czcionki, odstępów między liniami, rodzaju czcionki, kontrastu czy stylu łączy. Wprowadzone modyfikacje są zapisywane przy użyciu plików cookies.

Jak zainstalować i skonfigurować moduł Fluidproject UI Options?

1. Zainstaluj moduł z poziomu panelu administracyjnego Drupala lub Drush.

2. Zdecyduj, na których stronach rozszerzenie ma się wyświetlać, a na których nie.

3. Moduł pozwala na zmianę rozmiaru tekstu, stylu czcionki, odstępów między liniami oraz zmianę kontrastu.

Wdrażając ułatwienia dostępności na stronach drupalowych, warto pamiętać o kilku aspektach.

1. Semantyczne znaczniki HTML – stosuj poprawnie znaczniki HTML, takie jak header, nav, main, article i aside. To pomoże narzędziom wspomagającym zrozumieć strukturę strony i ułatwi nawigację​.
2. Regularne testowanie – sprawdzanie poziomu dostępności strony pozwala wcześniej wykryć problemy i na nie zareagować.
3. Nawigacja klawiaturą – sporo osób z niepełnosprawnościami korzysta głównie z klawiatury. Upewnienie się, że wszystkie interaktywne elementy są dostępne za jej pomocą to klucz do dobrze stworzonej witryny internetowej. Ważna jest kolejność tabulacji. Powinna być logiczna i intuicyjna. Zapewnij również możliwość korzystania z serwisu bez konieczności użycia myszy.
4. Teksty alternatywne – obrazy, wideo i inne materiały multimedialne powinny mieć tekst alternatywny, opisujący co się na nich dzieje. Zadbaj również o transkrypcję w filmikach. W ten sposób osoby z problemami ze słuchem będą mogły bez problemu zrozumieć, o czym jest filmik.
5. Kontrast kolorów – kontrast pomiędzy tekstem a tłem jest ważny dla czytelności, szczególnie dla osób z wadami wzroku. Wartości powinny spełniać wymagania WCAG 2.1 na poziomie AA. Jeśli podstawowa szata graficzna nie spełnia takich wymagań, warto zaopatrzyć się w przełączanie pomiędzy wersją podstawową a kontrastową.
6. Formularze – aby zapewnić prawidłową dostępność cyfrową formularzy, zadbaj o prawidłowe etykietowanie pól, czytelne komunikatyi o błędach, a także nawigowanie między polami formularza.

Zastosowanie powyższych wskazówek spowoduje, że strona będzie bardziej przyjazna dla większej liczby użytkowników. Powyższe wskazówki powinny zastosować nie tylko podmioty publiczne, ale również prywatne.

Testowanie dostępności – narzędzia i metody

Regularne testowanie jest kluczem do zapewnienia dostępności cyfrowej jak największej liczbie użytkowników. W przypadku WCAG to testowanie manualne odgrywa kluczową rolę, jednak mogą w tym pomóc również narzędzia do testów automatycznych. Poniżej znajdziesz najpopularniejsze metody:

• testy automatyczne – korzystając z narzędzi takich jak WAVE, axe oraz lighthouse, możesz być pewny, że Twoja witryna spełnia podstawowe wymagania pod kątem standardów WCAG. Te narzędzia dostarczają szczegółowych raportów odnośnie do wykrytych błędów oraz podpowiadają, w jaki sposób wyeliminować dany problem,
• testy manualne – o ile narzędzia do testów automatycznych wychwycą dużą liczbę błędów, o tyle nie są w stanie przetestować w stu procentach witryny pod kątem dostępności. Dlatego ważne są również testy manualne. Przeprowadza się je na zasadzie nawigacji po stronie, korzystając z klawiatury, technologii asystujących (jak czytniki ekranu) oraz przeglądania kodu pod kątem poprawnej implementacji semantyki HTML i ARIA,
• testy użytkowników – osoby z dysfunkcjami najlepiej ocenią, czy dana witryna jest do nich dostosowana. Jeśli tylko masz możliwość skorzystania z pomocy takich osób, powinieneś ją rozważyć. Żadne narzędzie nie da tak cennych informacji, jak osoba, która na co dzień używa technologii asystujących.

Typowe błędy

Oto najczęstsze błędy przy stosowaniu dostępności cyfrowej na stronie internetowej:

1. Pomijanie tekstów alternatywnych dla grafik i innych treści multimedialnych.
2. Nieprawidłowa obsługa błędów formularzy.
3. Błędne zastosowanie kontrastu.
4. Używanie skomplikowanych i niejednoznacznych etykiet.
5. Przeładowanie witryny dynamicznymi treściami bez odpowiednich opisów ARIA.

Jeśli ich unikniesz, upewnisz się, że Twoja strona jest dostosowana do wszystkich osób.

Praca nad dostępnością witryn internetowych, niezależnie od wykorzystywanego CMSa, jest istotnym elementem budowania serwisów, które powinny służyć szerokiemu gronu użytkowników. System CMS Drupal oferuje wbudowane mechanizmy oraz bogatą ofertę modułów, które wspomagają tworzenie witryn zgodnie ze standardami WCAG.

Wdrażanie dostępności cyfrowej to nie tylko instalacja i konfiguracja modułów, ale również testowanie serwisu pod kątem udogodnień dla osób z niepełnosprawnościami. Powinno ono być częścią procesu developmentu. Im więcej wychwyconych błędów na poziomie tworzenia lub modyfikowania witryny, tym bardziej dopracowana strona trafi na środowisko produkcyjne.