Login

Try consentmanager
Book a call

Praca z dostępnością / WCAG

Domyślnie warstwa zgody jest przygotowana tak, aby była dostępna dla czytników ekranu i podobnych narzędzi, ale w niektórych przypadkach konieczne może być dostosowanie ustawień projektu.

Włącz obsługę WCAG dla banerów dotyczących plików cookie

Aby włączyć obsługę WCAG (Wytyczne dotyczące dostępności treści internetowych 2.2), zaloguj się na swoje konto, przejdź do Menu > Szablony i edytuj odpowiedni szablon. Rozwiń ustawienia w sekcji „Pokaż ustawienia zaawansowane” i włącz WCAG:

Zmiany WCAG dotyczące wyświetlania warstwy zgody

Jeśli dla danego projektu włączono ustawienie WCAG, do warstwy zgody zostaną zastosowane następujące zmiany:

  • Warstwa zgody zostanie zawarta w elemencie shadowRoot
  • Nagłówki w warstwie zgody będą wykorzystywać elementy <h1> i <h2> zamiast <div>.
  • W tekstach przełączających zostanie użyty element <label> zamiast <div>
  • Menu w warstwie ustawień niestandardowych będzie używać elementu <nav> zamiast <div>
  • Elementy weryfikacji wieku zostaną opatrzone etykietą
  • Tabele będą opatrzone podpisami
  • Elementy otrzymają atrybuty aria-label, aria-checked, aria-modal, role i podobne
  • Dostępna jest opcja Gatekeeper (patrz poniżej)

Opcja Gatekeeper

Gdy włączone jest WCAG, można również włączyć opcję Gatekeeper. Zapobiega to utracie fokusu przez warstwę zgody: jeśli użytkownik naciśnie klawisz TAB (lub podobny element nawigacyjny na klawiaturze), fokus zawsze pozostanie w warstwie zgody i nie przeskoczy do innych miejsc na stronie.

Uwagi dotyczące projektu

Należy pamiętać, że zmiany techniczne mogą również wymagać dodatkowych zmian w samym projekcie, aby zapewnić pełną zgodność z WCAG. Przykłady obejmują:

  • Użyj odpowiedniej wielkości czcionki (np. em lub pt zamiast px)
  • Użyj szeroko dostępnej czcionki bezszeryfowej (np. Times New Roman, Verdana, Arial, …)
  • Użyj koloru i współczynnika kontrastu, które można łatwo rozróżnić (np. współczynnik kontrastu 3:1 między tekstem a tłem)
  • Użyj odstępów między tekstem, które ułatwiają czytanie treści (np. wysokość linii 1,5 em)

Oprócz zmian czysto graficznych, niektóre wymagania WCAG mogą wymagać zastosowania określonych ustawień w projekcie. Na przykład, aby spełnić wymagania WCAG, może być konieczne włączenie menu w projekcie warstwy zgody.

Więcej informacji

We do our best to keep this purely informative documentation up to date. However, if you notice that any of these guides need a little touch-up, let us know!