Jak dostosować landing page do wytycznych WCAG 2.1

Web Content Accessibility Guidelines, w skrócie WCAG, to zbiór wytycznych dotyczący dostępności treści internetowych. Dostępność cyfrowa ma na celu ułatwić osobom z niepełnosprawnościami korzystanie z serwisów internetowych oraz aplikacji. Wszystkie podmioty publiczne są prawnie zobligowane do stosowania się do tych wymogów, jednak pozostałe podmioty dostosowując swoje strony, ułatwiają dostęp do swoich treści szerszej grupie użytkowników.

Dostępność cyfrowa a polskie prawo

Obecnie w Polsce obowiązuje wersja WCAG 2.1. Więcej szczegółów znajdziesz na stronie Serwisu Rzeczypospolitej Polskiej. Możesz także zapoznać się z treścią Ustawy z dnia 4 kwietnia 2019 r., która reguluje zakres wymogów dla podmiotów publicznych. Strony internetowe dostępne cyfrowo z założenia nie mają wiązać się ze stosowaniem dodatkowych narzędzi (np. wtyczek do kontrastu lub powiększania tekstu). Podstawą jest uniwersalna konstrukcja strony, która umożliwi odbiór treści na różnych monitorach lub urządzeniach oraz przy użyciu oprogramowania wspomagającego. 

Możesz także zapoznać się ze wpisem na temat Projektowania stron zgodnych z wymogami WCAG zamieszczonym na stronie gov.pl.

Dostosowanie landing page'a do WCAG

W tym wpisie znajdziesz wskazówki, które pomogą Ci zwiększyć dostępność cyfrową landing page'a. Pamiętaj, że landing page to pojedyncza strona, możesz Tworzyć lejki oraz dodawać przekierowania, jednak strona internetowa ma bardziej zaawansowaną strukturę. Dostępność cyfrowa polega na zapewnieniu funkcjonalności, kompatybilności, postrzegalności i zrozumiałości strony internetowej. Poniżej znajdziesz rozwiązania dostępne w Landingi, które pomogą Ci spełnić wybrane przez nas wytyczne WCAG 2.1.

Wytyczne WCAG – realizacja na landing page'u w Landingi

Nawigacja

Twoja strona powinna być zaprojektowana w sposób, który umożliwi nawigację i korzystanie z zasobów treści osobom, które nie korzystają z myszki lub touchpada – nawigacja powinna być możliwa z poziomu klawiatury. Dostępność nawigacji na landing page'u sprawdzisz za pomocą klawiszy Tab lub Shift + Tab. Ten sposób nawigacji nie uwzględnia tekstu, dlatego elementy takie jak numer telefonu, menu lub adres, muszą mieć postać aktywnego linku.

W Landingi elementy, takie jak formularz (łącznie z wszystkimi polami), przyciski czy wideo dodane za pomocą widgetu wideo, mogą być obsługiwane z poziomu klawiatury. Nie musisz w tym celu konfigurować żadnych dodatkowych ustawień.

Dostępność danych kontaktowych

Zgodnie z ustawą, jeżeli nie jesteś w stanie zapewnić dostępności elementu strony, musisz zapewnić alternatywny sposób dostępności. Takim sposobem jest udostępnienie kontaktu w widocznym miejscu i/lub pod hiperlinkiem.

Dane kontaktowe w przypiętym menu/stopce

Numery telefonów, adres do korespondencji lub adres e-mail możesz umieścić w menu/stopce landing page'a, które możesz przypiąć u góry lub dołu strony. Taki element będzie zawsze widoczny na stronie, nawet podczas przewijania strony. Pamiętaj, aby nie przypinać dwóch elementów jednocześnie. Sprawdź instrukcję o przypiętym menu, aby dodać je do swojego landing page'a.

Aktywne linki danych kontaktowych

Aby osoba korzystająca z klawiatury mogła wykorzystać udostępniane na landing page'u dane kontaktowe, nadaj im postać aktywnych linków alternatywnych. W ten sposób poruszanie się po stronie za pomocą przycisku Tab oraz zatwierdzanie przyciskiem Enter wystarczy, by użytkownik mógł np. otworzyć okno programu pocztowego i rozpocząć korespondencję mailową. Przeczytaj więcej o linkach alternatywnych w Landingi.

Opisy alternatywne grafik

Dodaj opisy alternatywne obrazom na Twoim landing page'u – dzięki temu informacje przez nie przekazywane staną się dostępne dla osób nieposługujących się wzrokiem. Tekst alternatywny powinien zwięźle i adekwatnie do kontekstu opisywać, co widać na danym elemencie lub jaka jest jego funkcja. 

W Landingi opisy alternatywne do grafik dodasz w ustawieniach obrazu. W edytorze kliknij swój obraz, następnie w panelu po prawej stronie znajdź zakładkę SEO obrazu. Rozwiń ją i wpisz opis.

Jeżeli Twój obraz jest bardziej złożony i opis alternatywny nie wystarcza, aby oddać jego sens, bezpośrednio obok takiej grafiki możesz dodać tekst poszerzony o wszystkie istotne szczegóły. 

Dostosowana wersja mobilna

Coraz częściej landing page'e oglądane są na urządzeniach mobilnych. Zadbaj o to, aby ich wyświetlanie na ekranach smartfonów działało poprawnie zarówno w układzie poziomym, jak i pionowym. W edytorze Landingi masz możliwość dostosowania widoku mobilnego poprzez:

• ukrywanie niektórych elementów, widgetów;
• zmianę wielkości tekstu i obrazów;
• zmianę kolorów elementów;
• dostosowywanie miejsca elementów;
• zmianę tła sekcji i całego landing page'a.

Przeczytaj więcej o widoku mobilnym w edytorze Landingi, następnie opublikuj landing page'a i sprawdź na swoim urządzeniu, czy strona wyświetla się prawidłowo.

Tytuł strony

Dostępność cyfrowa oznacza m.in. ułatwienie orientacji i poruszania się w sieci. Dla użytkownika z niepełnosprawnościami lub z mniejszym doświadczeniem świadomość tego, na jakiej stronie się znajduje, to nie tylko kwestia komfortu, ale podstawa nawigacji w Internecie.

Rozróżnianie poszczególnych stron jest możliwe dzięki odpowiednim tytułom nadawanym stronom – pojawiają się one na paskach zakładek w przeglądarce. Tytuł do landing page'a w Landingi dodasz w jego Ustawieniach strony. Przejdź do edytora i dostosuj zakładkę SEO / Udostępnianie.

Ograniczenie zaskakujących elementów

Zaskoczenie użytkownika dźwiękiem lub ruszającymi się, migającymi obiektami może być sposobem na przyciągnięcie jego uwagi, jest jednak niezalecane podczas tworzenia stron dostosowanych do osób niewidomych, słabowidzących czy seniorów. Dla nich takie niestandardowe zdarzenia dziejące się bez ich udziału są wyjątkowo uciążliwe. Dlatego ogranicz autoodtwarzanie muzyki i filmów, zwłaszcza z zaskakującą ścieżką dźwiękową, a także animacje elementów landing page'a.

Nie wiesz, jak zacząć?
Przetestuj nas!

Twórz z nami wysoko konwertujące kampanie

Wypróbuj za darmoDemo