Przejdź do treści
prfct.dev

Dostępność

prfct jest projektowany pod WCAG 2.2 AA od podstaw — w palecie, prymitywach i ustawieniach domyślnych — a automatyczne testy sprawdzają to na każdej stronie.

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

ObszarJak prfct to rozwiązuje
KontrastStopnie tekstu są wyliczane tak, by miały kontrast ≥ 4,5:1 na swoich powierzchniach; krawędzie kontrolek mają co najmniej 3:1 (WCAG 1.4.11). Zobacz Kolor.
KlawiaturaKażdy interaktywny komponent da się obsłużyć klawiaturą — z wędrującym fokusem (roving focus), przechodzeniem do elementów przez wpisywanie (typeahead) i Esc tam, gdzie przewiduje to wzorzec ARIA.
FokusWidoczny wskaźnik fokusu o grubości 2 px, z kontrastem co najmniej 3:1 na każdej powierzchni, rysowany przez outline, dzięki czemu przetrwa tryb wymuszonych kolorów.
SemantykaBase UI renderuje natywne elementy oraz poprawne role, stany i relacje (aria-expanded, aria-controls, aria-describedby…).
NakładkiOkna dialogowe zatrzymują fokus w sobie i oddają go po zamknięciu, wyłączają interakcję z tłem i wymagają tytułu.
Rozmiar celuKontrolki od rozmiaru sm w górę mają co najmniej 24 × 24 px (WCAG 2.2, 2.5.8); małe pola wyboru niewidocznie powiększają swój obszar kliknięcia.
Ruchprefers-reduced-motion skraca wszystkie przejścia do zera; nic nie zależy od animacji.
Preferencje kontrastuprefers-contrast: more wzmacnia obramowania i tekst drugorzędny.
Powiększenie i rozmiar tekstuRozmiary tekstu są podane w rem; przy powiększeniu 400% układ dopasowuje się do ekranu bez przewijania w poziomie.
JęzykInter obejmuje zakres Latin Extended-A, więc polski, czeski, turecki i inne języki wyświetlają się właściwymi glifami, a nie zastępczymi.

Fokus

Kliknij tutaj, a potem naciskaj Tab — fokus przejdzie przez kolejne kontrolki.

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.
Narzędzia automatyczne wyłapują tylko część problemów
axe i Lighthouse to punkt wyjścia, a nie meta. Brakujące etykiety i niski kontrast łatwo wykryć; mylącej kolejności fokusu, niejasnych komunikatów o błędach i nieogłaszanych aktualizacji — już nie. Zawsze testuj z klawiaturą i czytnikiem ekranu.