Tilgjengelighet

Fristil lover at tilgjengelighet er løst ett sted, slik at hver app slipper å løse det på nytt. Denne siden sier hva løftet dekker, og hvor det slutter.

Det som kontrolleres

Hva	Hvordan
Kontrast	Hvert fargepar er sjekket mot WCAG AA, i både lyst og mørkt tema
Komponentene	axe mot WCAG 2.1 nivå A og AA, i Chromium, Firefox og WebKit
Dokumentasjonen	axe mot hver bygde side, i begge temaer
Koblingen i skjemafelt	Én implementasjon, delt av `fs.field()` og `<fs-field>`
Treffflater	Minst 24 piksler der WCAG 2.2 krever det

Testene kjører i tre nettlesere fordi komponentene bygger på nettleserens egne API-er, og det er nettopp de som oppfører seg ulikt.

Høykontrastmodus

Windows’ høykontrast bytter ut fargene på siden med brukerens eget sett. Vi har testet hva som skjer i modusen:

Overlever	Forsvinner
Systemfarger som `Highlight` og `CanvasText`	Egne farger, som overstyres
Rammer, og bredden på dem	Gradienter
Masker og data-URL-bilder	`box-shadow`

Det rammer kontrollene som viser tilstanden sin med farge eller en gradient. Uten tiltak ser en avkrysset boks tom ut, og en bryter er lik i begge stillinger.

Komponent	Hva systemet gjør
Checkbox, Radio, Switch, Select	Faller tilbake til nettleserens egen tegning, som er riktig i alle temaer brukeren kan velge
Toggle Group, Tag, Pagination, Tabs	Viser det valgte med `Highlight` og `HighlightText`
Tooltip	Får en kant, så boblen ikke flyter oppå innholdet
Spinner	Merker én kant med `Highlight`, så ringen fortsatt har et punkt
Input med dato, Search	Tar bort ikonet, som har fargen malt inn i bildet, og gir plassen tilbake

Bryteren mister formen sin i modusen og blir en vanlig avkryssingsboks. role="switch" står fortsatt, så den leses opp som på og av.

Skriver du egen CSS, gjelder det samme der: farger du setter blir overstyrt. Trenger du å vise at noe er valgt, bruk systemfargene, som slipper gjennom:

@media (forced-colors: active) {
  .min-valgte-rad {
    background-color: Highlight;
    color: HighlightText;
  }
}

forced-color-adjust: none finnes, men tar fra brukeren det temaet hen har valgt. Bruk det bare når ingenting annet bærer betydningen.

Mindre bevegelse

Ber brukeren om mindre bevegelse i systemet sitt, demper systemet seg selv:

Komponent	Hva som skjer
Switch	Bytter tilstand uten å gli
Spinner	Snurrer saktere. Den stopper ikke, for en indikator som står stille sier ikke lenger at noe pågår.
Skeleton	Står stille, uten skimmer
Skip Link	Kommer til syne uten å gli
Tooltip	Vises uten overgang

Smal skjerm

En komponent skal aldri bli bredere enn plassen den får. Blir den det, kan hele siden dras sidelengs, og innhold havner utenfor kanten.

Komponent	Hva som skjer på smal skjerm
Button	Teksten brekker framfor å sprenge boksen
Pagination, Breadcrumbs, Toggle Group, Tabs	Radene brekker til flere linjer
Table	Ruller sidelengs i `.fs-table-scroll`, som du legger rundt
Dialog, Popover, Toast, Session Timeout	Bredden er begrenset av skjermen, ikke bare av en fast verdi

To tester holder dette på plass. smal-skjerm.browser.test.ts setter hver komponent i en boks på 320 piksler og krever at ingenting stikker utenfor. sjekk-mobil.ts åpner hver side i dokumentasjonen på 375 piksler og krever at siden ikke kan dras sidelengs.

Høyre til venstre

Komponentene bruker logiske egenskaper, altså padding-inline-start og inset-inline-end, og snur av seg selv når dokumentet går fra høyre til venstre:

<html lang="ar" dir="rtl">

background-position har ingen logisk variant. De tre stedene som tegner et ikon i bakgrunnen, altså datofeltet, søkefeltet og knappen i bryteren, snus derfor for hånd med :dir(rtl). Det er testet i alle tre nettleserne at bryterknappen peker samme vei i begge retninger.

Tekstinnholdet er ditt. Systemet snur oppsettet, ikke språket.

Det du må gjøre selv

Systemet kan ikke løse alt sentralt. Dette er ditt:

Rekkefølgen i markupen. Tastaturet følger dokumentet. Flytter du noe visuelt med CSS, flytter du ikke fokus.
Overskriftsnivåene. fs.heading({ size }) setter bare størrelsen. Nivået må følge sidens struktur.
Teksten. En feilmelding som sier «Ugyldig verdi» er teknisk riktig og praktisk ubrukelig.
Fokus etter at noe skjer. Kommer det en feil, et nytt panel eller en ny side, må fokus dit. Error Summary gjør det for skjemaer.
Bilder og ikoner du legger inn selv. De trenger tekst, eller aria-hidden="true" hvis de er pynt.

Når du finner noe

Axe fanger kontrast, manglende ledetekster og feil bruk av aria-*. Den fanger ikke fokushåndtering, rekkefølge eller om teksten gir mening. Finner du noe som ikke virker med tastatur eller skjermleser, er det en feil i systemet, ikke noe du skal løse rundt.