Dostępność cyfrowa – Jak dostosować landing page do wytycznych standardu WCAG 2.1

Zaktualizowano: 18 grudnia, 2023 Autor: Autor

Magdalena Dejnak

Spis treści rozwiń

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.

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.

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ę. Ten wpis opisuje rozwiązania dostępne w Landingi, które pomogą Ci spełnić wybrane przez nas wytyczne.

Zachęcamy do zapoznania się ze wpisem na temat Projektowania stron zgodnych z wymogami WCAG zamieszczonym na stronie gov.pl.

Pamiętaj, że jeśli masz jakieś pytania o funkcje edytora lub platformy Landingi, w każdej chwili możesz skontaktować się z naszym zespołem Support telefonicznie, mailowo lub za pomocą czatu.

Dostępność cyfrowa polega na zapewnieniu funkcjonalności, kompatybilności, postrzegalności i zrozumiałości strony internetowej. Wybierz interesujące Cię zagadnienia z listy poniżej:

Podstawy: 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 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.

Alternatywny sposób dostępu – dane kontaktowe

Zgodnie z ustawą, jeżeli nie jesteś w stanie zapewnić dostępności elementu strony, możesz zapewnić alternatywny sposób dostępności. Takim sposobem jest udostępnienie kontaktu.

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: Nie przypinaj dwóch elementów jednocześnie.

Sprawdź instrukcję o przypiętym menu.

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 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 dodaj tekst poszerzony o wszystkie istotne szczegóły.

Dostosowany widok mobilny

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. 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 dodasz w jego Ustawieniach strony. Przejdź do edytora i dostosuj zakładkę SEO / Udostępnianie.

Zaskakujące elementy: dźwięki, animacje

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.