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.
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.
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).
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ę.
2. Znajdź zakładkę Dostępność (WCAG), włącz fokus i wybierz kolor obramowania aktywnych elementów.
Sprawdź na opublikowanym landing page’u (przełączając się tabulatorem), czy elementy mają obramowanie w wybranych kolorach.
Styl fokusa dla danej sekcji
Możesz też ustawić indywidualny kolor fokusa dla każdej sekcji landing page’a.
Aby to zrobić:
1. Kliknij wybraną sekcję.
2. W zakładce Dostępność (WCAG) wybierz kolor obramowania aktywnych elementów.
Landmark role
Landmark role to specjalne oznaczenie w kodzie strony (atrybut ARIA), które informuje czytniki ekranu i inne technologie asystujące, jaką funkcję pełni dana część strony. Dzięki nim użytkownicy takich narzędzi mogą szybko przeskakiwać między kluczowymi obszarami strony – na przykład przejść od razu do menu, formularza lub głównej treści, bez konieczności przeglądania całej zawartości.
Przykłady landmarków:
- banner – nagłówek strony, zwykle z logo i głównym menu
- content info – stopka strony
- navigation – menu lub linki nawigacyjne
- form – formularz kontaktowy lub inny
- search – pole wyszukiwania
- region – wydzielony obszar treści z własnym tytułem
- complementary – treść dodatkowa, np. panel boczny
- main – główna treść strony
Domyślnie każda sekcja ma ustawione none (brak roli):
Aby ustawić landmark role:
1. Kliknij sekcję, w której chcesz ustawić landmark. Następnie w zakładce Dostępność (WCAG) wybierz odpowiednią rolę z listy Landmark role (navigation, region, form, complementary, search).
2. W polu aria-label wpisz krótki, opisowy tekst tej sekcji (np. „Główne menu”, „Formularz zapisu na newsletter”).
Dla ról banner, main i contentinfo pole aria-label nie jest wymagane, jednak te role mogą być użyte tylko raz na stronie. Po przypisaniu ich do jednej sekcji, w pozostałych staną się niedostępne.
Dobra praktyka:
Nawet jeśli dana rola występuje tylko raz (poza banner, main i contentinfo), warto dodać aria-label. Ułatwi to użytkownikom technologii wspomagających szybkie rozpoznanie zawartości sekcji.
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.
2. Wybierz pole, dla którego chcesz włączyć opcję automatycznego uzupełniania, i kliknij Pokaż atrybut autocomplete.
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.
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.
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.
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.
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.
1. Aby podczas edycji przejść do Ustawień strony, kliknij strzałkę.
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.
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.
