Dostępność

Dostępność w prfct to nie lista kontrolna odhaczana na końcu. Jest wbudowana w warstwy, na których opiera się cała reszta: paletę, której kontrast wyliczany jest matematycznie, prymitywy Base UI implementujące wzorce WAI-ARIA i domyślne ustawienia komponentów, dzięki którym dostępny wybór jest zarazem najprostszy.

Co dostajesz w standardzie#

Fokus#

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

export default function FocusRing() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <p className="text-sm text-muted-foreground">
        Naciskaj{" "}
        <kbd className="rounded border bg-surface px-1 font-mono text-xs">
          Tab
        </kbd>{" "}
        aby przechodzić między kontrolkami poniżej.
      </p>
      <Input placeholder="Pola tekstowe mają poświatę" aria-label="Przykładowe pole" />
      <div className="flex items-center gap-2.5">
        <Checkbox id="focus-demo-check" />
        <Label htmlFor="focus-demo-check">Pozostałe kontrolki mają pierścień</Label>
      </div>
      <div className="flex items-center gap-2.5">
        <Switch id="focus-demo-switch" />
        <Label htmlFor="focus-demo-switch">Odsunięty od krawędzi</Label>
      </div>
      <div className="flex gap-2">
        <Button variant="outline">Anuluj</Button>
        <Button>Dalej</Button>
      </div>
    </div>
  )
}

prfct używa dwóch stylów fokusu:

• Przyciski i kontrolki wyboru — pola wyboru, przełączniki, zakładki — pokazują pierścień o grubości 2 px, odsunięty o 2 px od krawędzi.
• Pola tekstowe pokazują obramowanie w kolorze marki i poświatę o szerokości 3 px, bo pierścień wokół pola z obramowaniem wyglądałby jak drugie obramowanie.

Oba style opierają się na :focus-visible: kontrolki pokazują pierścień tylko wtedy, gdy fokus przychodzi z klawiatury, więc osoby korzystające z myszy nie widzą pierścieni po kliknięciu. Pola tekstowe pokazują poświatę zawsze, gdy mają fokus — niezależnie od tego, skąd przyszedł — bo to w nich trafia wpisywany tekst i powinny to sygnalizować.

Po twojej stronie#

Komponenty nie wiedzą wszystkiego o twojej treści. To należy do ciebie:

• Opisz wszystko etykietami. Każde pole potrzebuje widocznej etykiety <Label> lub FieldLabel; przyciski z samą ikoną — aria-label.
• Pisz teksty, które mają sens. Etykiety linków i przycisków muszą być zrozumiałe bez kontekstu: Pobierz fakturę, a nie Kliknij tutaj.
• Opisuj błędy słowami. Łącz aria-invalid z FieldError, który mówi, co poszło nie tak i jak to naprawić.
• Zachowaj hierarchię nagłówków. Jeden h1 na stronę i żadnych pominiętych poziomów.
• Zapewnij obrazom tekst alternatywny. Obrazy niosące treść potrzebują alt; dekoracyjne — alt="".
• Nie polegaj na samym kolorze. Status potrzebuje też ikony lub tekstu.
• Informuj o wynikach asynchronicznych. Wyniki, które pojawiają się bez zmiany strony, przekazuj przez powiadomienie albo region na żywo.

Testowanie#

Testuj swój produkt tak, jak testowana jest strona prfct:

1. Testy automatyczne — skanuj każdą stronę narzędziem axe-core w obu trybach. Zestaw testów prfct robi to dla każdej strony tej witryny, w trybie jasnym i ciemnym (pnpm test:a11y), a najbardziej interaktywne strony przechodzi klawiszem Tab, sprawdzając, czy każdy element, na który trafia fokus, pokazuje jego wskaźnik.
2. Klawiatura — przejdź każdą ścieżkę wyłącznie z klawiatury: kolejność fokusu, widoczny fokus, brak pułapek klawiaturowych, Esc zamyka nakładki.
3. Czytniki ekranu — sprawdź kluczowe ścieżki w VoiceOver (macOS, iOS) oraz w NVDA lub JAWS (Windows).
4. Powiększenie i preferencje — powiększenie 200% i 400%, ograniczony ruch, zwiększony kontrast i wymuszone kolory.