AccessibilitySettings

AccessibilityProvider stosuje ustawienia czytelnika na stronie i zapisuje je na urządzeniu; useAccessibility je odczytuje, na przykład aby pominąć animację. AccessibilitySettings to gotowa sekcja ustawień, która przyjmuje dodatkowe wiersze, takie jak ThemeToggle.

AccessibilityProvider
AccessibilitySettings

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: AccessibilitySettings

Text sizeMakes the whole interface larger, layout included.

Reduce motionStops transitions and animations.

Strong focus ringA thicker outline around the element the keyboard is on.

Underline linksLinks stand out by more than colour.

Puts every setting in this section back.

Sample text with a link in it.

Motion: full.

Noc, podgląd: AccessibilitySettings

Text sizeMakes the whole interface larger, layout included.

Reduce motionStops transitions and animations.

Strong focus ringA thicker outline around the element the keyboard is on.

Underline linksLinks stand out by more than colour.

Puts every setting in this section back.

Sample text with a link in it.

Motion: full.

Wysoki kontrast, podgląd: AccessibilitySettings

Text sizeMakes the whole interface larger, layout included.

Reduce motionStops transitions and animations.

Strong focus ringA thicker outline around the element the keyboard is on.

Underline linksLinks stand out by more than colour.

Puts every setting in this section back.

Sample text with a link in it.

Motion: full.

UżycieLink do sekcji Użycie

tsx

import { AccessibilityProvider, AccessibilitySettings } from '@skribly/ui/theme'

tsx

<AccessibilityProvider>
  <AccessibilitySettings labels={labels}>
    <ThemeToggle label="Theme" options={options} />
  </AccessibilitySettings>
</AccessibilityProvider>

const { motionReduced } = useAccessibility()

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Rozmiar tekstu to pole z przyciskami zmiany wartości: klawisze strzałek, Page Up, Page Down, Home i End zmieniają go krokami, a przyciski minus i plus dają użytkownikom wskaźnika cele o rozmiarze 44 px.
Każde ustawienie jest przełącznikiem nazwanym swoim tytułem i opisanym podpowiedzią.
Systemowa prośba o ograniczony ruch zawsze wygrywa i blokuje ten przełącznik w pozycji włączonej.
Przywrócenie domyślnych jest potwierdzane w regionie na żywo typu polite.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.