Demo opcji

Przegląd opcji widgetu dostępności z podglądem działania.

Włączaj funkcje po lewej stronie i obserwuj, jak zmienia się przykładowy fragment strony. Poniżej możesz też otworzyć prawdziwy panel widgetu.

Opcje

Włącz podgląd

Tekst

Rozmiar czcionki

Zmienia skalę tekstu od 80% do 160%.

wcag-font-120
Odstępy liter

Zwiększa odstępy między literami i wyrazami.

wcag-ls-on
Wysokość linii

Rozluźnia tekst przez większą wysokość wiersza.

wcag-lh-on
Czcionka dla dyslektyków

Przełącza tekst na krój ułatwiający czytanie części użytkowników.

wcag-dyslexia

Kontrast i kolory

Ciemny wysoki kontrast

Przestawia podgląd na czarne tło, jasny tekst i żółte linki.

wcag-contrast
Jasny kontrast

Wzmacnia czytelność w jasnym wariancie kontrastu.

wcag-contrast-light
Odwróć kolory

Odwraca kolory podglądu i zachowuje kontrast elementów.

wcag-invert
Skala szarości

Usuwa kolor, zostawiając relacje jasności.

wcag-grayscale
Niskie nasycenie

Wycisza intensywność kolorów.

wcag-saturation-low
Wysokie nasycenie

Podbija nasycenie kolorów w interfejsie.

wcag-saturation-high
Ukryj obrazy

Chowa obrazy i elementy multimedialne, zostawiając strukturę strony.

wcag-hide-images

Nawigacja

Widoczny focus

Dodaje mocny obrys fokusu dla elementów aktywnych.

wcag-focus
Duży kursor

Pokazuje większy kursor i ułatwia śledzenie interakcji.

wcag-cursor-lg
Maska czytania

Dodaje poziomy pasek pomagający utrzymać wzrok na aktualnym wierszu.

wcag-mask
Podpowiedzi

Pokazuje dodatkowe objaśnienia przy elementach interfejsu.

wcag-tooltips
Struktura strony

Wyświetla nagłówki, landmarki i linki wykryte na stronie.

page-structure

Ruch

Zatrzymaj animacje

Ogranicza animacje, przejścia i płynne przewijanie.

wcag-no-motion

Układ strony

Standardowa szerokość

Zawęża treść do wygodnej szerokości czytania.

wcag-width-standard
Pełna szerokość

Rozciąga układ do pełnej dostępnej szerokości.

wcag-width-wide

Jak czytać demo

Widget pomaga użytkownikowi dostosować odbiór strony, ale nie zastępuje audytu WCAG.

Opcje z podglądu pokazują warstwę ułatwień: tekst, kontrast, nawigację, ruch i układ. Nadal trzeba zadbać o poprawny HTML, etykiety formularzy, teksty alternatywne, logiczną kolejność fokusu i dostępną treść.

Najlepszy zestaw Widget dla użytkownika, deklaracja dla przejrzystości i audyt WCAG dla realnej diagnozy strony. Widget czy audyt?