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

Zbuduj jeden szablon, wygeneruj setki stron jednocześnie i uzupełnij je dynamicznymi danymi

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

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

Rozwiązania

Jak generować więcej ruchu i zdobywać wartościowe leady

Jak promować swoją ofertę na rynku międzynarodowym

Jak zbudować wizerunek online i wyróżnić ofertę

Jak mieć landing page’e inne niż wszystkie

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

Ebooki, webinary, Akademia Landing Page i inne darmowe zasoby marketingowe. Ucz się i zostań ekspertem!

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

HomePomocUdostępnianie i przekierowaniaDostępność cyfrowa: jak dostosować landing page do wytycznych WCAG

Dostępność cyfrowa: jak dostosować landing page do wytycznych WCAG

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.

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 artykule przedstawiamy funkcje edytora Landingi, które pozwolą Ci dostosować landing page do podstawowych wytycznych WCAG.

Zachęcamy do zapoznania się ze wpisami 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 mailowo lub przez czat.

Jak przestrzegać zasad dostępności?

Dostępność cyfrowa polega na zapewnieniu funkcjonalności, kompatybilności, postrzegalności i zrozumiałości strony internetowej.

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, linki czy wideo dodane za pomocą widgetu Wideo, mogą być obsługiwane z poziomu klawiatury.

Kolejność elementów w kodzie HTML

Kolejność, według której elementy następują po sobie przy korzystaniu ze strony za pomocą tabulatora, zależy od ich kolejności w kodzie HTML. W Landingi możesz ustalić tę kolejność w liście Elementy.

Aby to zrobić:

1. Przejdź do listy Elementy w edytorze.

Przycisk listy elementów

2. W tym miejscu masz dwie opcje:

a) Użyj strzałek przy nazwach elementów, aby przenieść je wyżej lub niżej w strukturze kodu HTML.

Strzałki zmieniające kolejność elementu w kodzie HTML

b) Użyj automatycznego sortowania elementów w obrębie sekcji (ikona kształtów) – pamiętaj, aby po aktywacji tej funkcji sprawdzić kolejność elementów i dostosować ją w razie potrzeby (klikając na strzałki).

Ikona automatycznego sortowania elementów

Te zmiany dotyczą tylko kolejności w kodzie HTML – nie wpływają na warstwy ani wygląd wizualny landing page’a.

Styl fokusa

Możesz wybrać kolor obramowania, jaki pojawi się na aktywnym (zaznaczonym) elemencie landing page’a – np. podczas przełączania się tabulatorem. Zrobisz to w Ustawieniach strony w zakładce Dostępność (WCAG).

1. Aby podczas edycji przejść do Ustawień strony, kliknij strzałkę.

Strzałka przełączająca do Ustawień strony

2. Znajdź zakładkę Dostępność (WCAG), włącz fokus i wybierz kolor obramowania aktywnych elementów.

Zakładka fokusa w edytorze Landingi

Sprawdź na opublikowanym landing page’u (przełączając się tabulatorem), czy elementy mają obramowanie w wybranym kolorze.

Aktywny element landing page'a z kolorowym obramowaniem

Wieloetapowy formularz

Jeżeli decydujeszsię na wieloetapowy formularz (lejek), nie wymagaj powtórnego podania danych wpisanych na wcześniejszym etapie.

Opcja autocomplete

W edytorze możesz również włączyć opcję autocomplete dla pól formularza. Dzięki temu dane, takie jak imię, nazwisko, adres e-mail czy telefon, mogą być automatycznie uzupełniane przez przeglądarkę lub menedżery haseł (np. Dashlane).

Aby ustawić opcję automatycznego uzupełniania:

1. Przejdź do Ustawień formularza.

Nawigacja do ustawień formularza

2. Wybierz pole, dla którego chcesz włączyć opcję automatycznego uzupełniania, i kliknij Pokaż atrybut autocomplete.

Widok ustawień formularza

3. Otwórz rozwijane menu i wybierz wartość odpowiadającą danemu polu, jeśli możesz ją określić, np. dla imienia – name, dla adresu email – email.

  • Jeżeli nie jesteś pewien tej wartości, wybierz on: Przeglądarka może automatycznie uzupełniać to pole.
  • Jeżeli nie chcesz, aby przeglądarka podawała wartość sugerowaną (np. dla numeru PESEL), wybierz off: Przeglądarka nie może automatycznie uzupełniać tego pola.

Na koniec zapisz zmiany.

Etykieta ARIA dla przycisków

Widget Przycisk umożliwia dodanie etykiety ARIA – atrybutu, który pomaga czytnikom ekranu zrozumieć, do czego służy przycisk. Jest to szczególnie przydatne, gdy tekst na przycisku jest niejednoznaczny (np. jedno słowo typu „Więcej”).

Wpisz tam zwięzły, opisowy tekst – np. aria-label=„Dowiedz się więcej o naszych usługach”.

UWAGA: Nie nadużywaj tego atrybutu. Jeśli przycisk ma już jasny i zrozumiały tekst, dodatkowa etykieta ARIA może być zbędna, a nawet wprowadzać w błąd.

Aby dodać etykietę ARIA, kliknij przycisk i rozwiń zakładkę Dostępność (WCAG) w panelu po prawej stronie.

Dodawanie etykiety ARIA

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.

Jeżeli informacje „pomoc” i „kontakt” znajdują się na wielu podstronach, należy umieszczać je zawsze w tej samej kolejności oraz w tym samym miejscu strony.

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 i ikonom 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. 

Dobre praktyki tworzenia tekstów ALT:

  • Opis powinien być konkretny i odnosić się do funkcji lub treści obrazu.
  • Nie dodawaj zbędnych słów typu „obrazek przedstawia…”.
  • Obrazy dekoracyjne powinny mieć pusty atrybut ALT (alt="").

Więcej informacji: WAI tutorial o obrazach

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. 

Dodaj ALT dla obrazów

W edytorze kliknij swój obraz, następnie w panelu po prawej stronie znajdź zakładkę Dostępność (WCAG). Rozwiń ją i wpisz opis.

Wpisywanie opisu ALT dla obrazu landing page'a

Dodaj ALT dla ikon

W edytorze kliknij swoją ikonę, następnie w panelu po prawej stronie znajdź zakładkę Dostępność (WCAG). Rozwiń ją i wpisz opis.

Wpisywanie opisu ALT dla ikony na landing page'u

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.

Aby przełączyć się na edytowanie widoku mobilnego, kliknij ikonę smartfona w górnym pasku.

Edytowanie widoku mobilnego landing page'a w Landingi

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ł landing page'a widoczny w zakładce przeglądarki

Tytuł do landing page’a dodasz w jego Ustawieniach strony.

1. Aby podczas edycji przejść do Ustawień strony, kliknij strzałkę.

Strzałka przełączająca do Ustawień strony

2. Rozwiń zakładkę SEO / Udostępnianie. Wpisz treści ręcznie lub skorzystaj z generowania z AI.

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.

Po dodaniu filmu do widgetu Wideo możesz ustawić funkcje:

  • Autoodtwarzanie – wideo będzie włączane na landing page’u automatycznie;
  • Powiązane filmy – wyświetla proponowane filmy z innych kanałów;
  • Zapętlaj – wideo będzie odtwarzane raz po razie, w formie „pętli”;
  • Widoczny tytuł – na wideo wyświetlony będzie jego tytuł z YouTube lub Vimeo;
  • Sterowanie odtwarzaczem – widoczne będą opcje odtwarzania;
  • Wycisz – film będzie wyświetlony z automatycznym wyciszeniem (opcja włączona automatycznie przy autoodtwarzaniu);
  • Pokaż napisy – działa tylko dla wideo z YouTube i napisów dodanych przez właściciela filmu.
Opcje widget wideo w Landingi

A jeżeli chcesz więcej dowiedzieć się o tym, jak najlepiej korzystać z Landingi, umów się na 30-minutową rozmowę i odkryj, co może dać Ci nasza platforma.

SPIS TREŚCI
G2 reviews for Landingi