Produkt

Twórz, publikuj i optymalizuj strony w intuicyjnym kreatorze “drag&drop”, bez znajomości kodowania

Przyspiesz proces tworzenia dzięki ponad 400 w pełni edytowalnym szablonom stron, pop-upów i sekcji

Śledź mikrokonwersje bezpośrednio w Dashboardzie i analizuj eventy za pomocą mapy wizualnej strony

Łącz się z ponad 170 integracjami, aby pracować szybciej, wydajniej i tak jak lubisz

Zwiększaj sprzedaż i konwersje dzięki ekspozycji produktów i płynnemu procesowi zakupowemu

Korzystaj z niezawodnej i bezpiecznej platformy, płynnie obsługującej miliony wizyt miesięcznie

Zasoby

Poznaj digital marketing! Dowiedz się, jak zwiększać konwersje na stronach i zaangażowanie klientów

Instrukcje konfiguracji i wskazówki, dzięki którym postawisz pierwsze kroki w Landingi i zoptymalizujesz swoje strony

Darmowy kurs dla twórców landing page’y! Zostań mistrzem stron docelowych i poznaj wszystkie ich sekrety

Masz pytanie? Jesteśmy do Twojej dyspozycji

Umów się na indywidualną rozmowę i odkryj, co może dać Ci nasza platforma

Zleć projekt landing page’a lub import istniejącej strony z innej platformy do Landingi

Home Blog Jak dostosować landing page do wytycznych WCAG 2.1

Jak dostosować landing page do wytycznych WCAG 2.1

SPIS TREŚCI

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 internetowejPoniż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.

author picture

Magdalena Dejnak

Content Writer

Magdalena Dejnak jest ekspertem ds. content marketingu z ponad 4-letnim doświadczeniem w marketingu cyfrowym. Jej specjalizacja obejmuje tworzenie landing page'y, social media, branding i optymalizację współczynników konwersji. Od 2020 roku wnosi znaczący wkład w rozwój platformy Landingi. Magdalena ukończyła studia podyplomowe z e-marketingu na Akademii Górnośląskiej im. Wojciecha Korfantego. Obecnie jest pod opieką mentorską Błażeja Abla, CEO Landingi – wiodącej firmy zajmującej się technologią landing page.
Wszystkie artykuły

Powiązane artykuły