Tilgjengelighetstesting: color-contrast og fokus

CSS styrer fargekontrast, synligheten til fokusindikatorer, elementsynlighet (display:none fjerner elementet fra tilgjengelighetstreet) og leserekkefølge (visuell omorganisering med flexbox order kontra DOM-rekkefølgen). Valg av CSS påvirker direkte om personer med funksjonsnedsettelser kan bruke grensesnittet.

WCAG 2.1 AA krever et kontrastforhold på 4.5:1 for vanlig tekst og 3:1 for stor tekst (18px+ fet eller 24px+ vanlig). AAA krever henholdsvis 7:1 og 4.5:1. Disse forholdene sammenligner luminansen til tekstfargen i forgrunnen med luminansen til bakgrunnsfargen.

Klikk på et tekstelement i DevTools → Styles-panelet. Fargeprøven viser et merke med kontrastforholdet. En hake viser at kravet er oppfylt, mens X viser at det ikke er oppfylt. Fargevelgeren viser terskellinjene for AA/AAA i fargegradienten.

axe-core, Lighthouse og Pa11y kontrollerer automatisk kontrastforholdene for alle tekstelementer. Kjør axe-core med @axe-core/react under utvikling for å få kontrastadvarsler i sanntid i nettleserkonsollen.

CSS outline: none eller outline: 0 på :focus fjerner nettleserens standard fokusring, slik at tastaturnavigasjon blir usynlig. Dette er en alvorlig tilgjengelighetsfeil. Erstatt den med en egendefinert, synlig fokusstil i stedet for å fjerne fokusindikatorer fullstendig.

:focus brukes ved alle fokushendelser, inkludert museklikk (noe som gir en synlig ring ved klikk, hvilket designere ofte ikke liker). :focus-visible brukes bare når nettleseren fastslår at tastaturnavigasjon er i bruk – slik at tastaturbrukere får en fokusring uten at den vises ved museklikk.

WCAG 2.2 introduserer suksesskriterium 2.4.11 (Focus Appearance AA): Fokusindikatorer må ha minst 3:1 kontrast mot tilstøtende farger og omslutte komponentens omkrets. Egendefinerte fokusstiler må oppfylle disse kravene, ikke bare eksistere.

Windows High Contrast Mode overstyrer CSS-farger med brukerdefinerte systemfarger. Bruk @media (forced-colors: active) for å tilby alternative stiler som fungerer i modus for høy kontrast. Test med Windows Settings → Accessibility → High Contrast.

WCAG 1.4.1 forbyr bruk av farge som den eneste måten å formidle informasjon på. En feiltilstand som bare blir rød, oppfyller ikke dette kriteriet. Kombiner farge med ikoner, tekstetiketter, mønstre eller understreking, slik at informasjon som ikke er fargebasert, alltid er til stede.

WCAG 1.4.4 krever at tekst kan forstørres til 200 % uten at innhold går tapt. WCAG 1.4.12 krever at overstyringer av tekstavstand (økt letter-spacing og line-height) ikke ødelegger layouten. Bruk relative enheter (rem, em) for typografi for å støtte begge kravene.

Omfattende CSS-testing for tilgjengelighet: axe DevTools-nettleserutvidelsen for utvikling, Lighthouse CI for automatiserte kontroller i pipelinen, Pa11y for sidekontroller fra kommandolinjen og manuell testing av tastaturnavigasjon med Tab/Shift+Tab for å kontrollere fokusindikatorenes synlighet og rekkefølge.

Testing av CSS-tilgjengelighet omfatter kontrastforhold for farger (minimum 4.5:1 for AA), synlige og WCAG 2.2-kompatible fokusindikatorer med :focus-visible, unngåelse av farge som eneste informasjonsbærer, støtte for modus for tvungne farger og relative typografienheter for å oppfylle krav til tekstforstørrelse. Automatiserte verktøy sammen med manuell tastaturtesting sikrer omfattende dekning.