Tillgänglighetstestning: color-contrast och focus

CSS styr färgkontrast, synligheten för fokusindikatorer, elementens synlighet (display:none tar bort elementet från tillgänglighetsträdet) och läsordningen (visuell omordning via flexbox order jämfört med DOM-ordningen). CSS-val påverkar direkt om användare med funktionsnedsättningar kan använda gränssnittet.

WCAG 2.1 AA kräver ett kontrastförhållande på 4.5:1 för normal text och 3:1 för stor text (18px+ fetstil eller 24px+ normal text). AAA kräver 7:1 respektive 4.5:1. Förhållandena jämför luminansen hos textens förgrundsfärg med luminansen hos bakgrundsfärgen.

Klicka på valfritt textelement i DevTools → panelen Styles. Färgrutan visar ett märke med kontrastförhållandet. En bock visar att kravet är uppfyllt och ett X visar att det inte är det. Färgväljaren visar tröskellinjerna för AA och AAA i färggradienten.

axe-core, Lighthouse och Pa11y granskar automatiskt kontrastförhållandena för alla textelement. Kör axe-core med @axe-core/react under utvecklingen för att få kontrastvarningar i realtid i webbläsarens konsol.

CSS outline: none eller outline: 0 på :focus tar bort webbläsarens standardiserade fokusring, vilket gör tangentbordsnavigering osynlig. Detta är ett allvarligt tillgänghetsfel. Ersätt den med en egen synlig fokusstil i stället för att ta bort fokusindikatorer helt.

:focus gäller för alla fokushändelser, inklusive musklick, vilket gör att en synlig ring visas vid klick – något designers ofta ogillar. :focus-visible gäller endast när webbläsaren avgör att tangentbordsnavigering används. På så sätt får tangentbordsanvändare en fokusring utan att den visas vid musklick.

WCAG 2.2 introducerar framgångskriterium 2.4.11 (Focus Appearance AA): fokusindikatorer måste ha minst 3:1 kontrast mot intilliggande färger och omsluta komponentens omkrets. Egna fokusstilar måste uppfylla dessa krav, inte bara finnas.

Windows High Contrast Mode åsidosätter CSS-färger med användardefinierade systemfärger. Använd @media (forced-colors: active) för att tillhandahålla alternativa stilar som fungerar i läge för hög kontrast. Testa med Windows-inställningar → Tillgänglighet → Hög kontrast.

WCAG 1.4.1 förbjuder att färg används som det enda sättet att förmedla information. Ett feltillstånd som bara blir rött uppfyller inte detta kriterium. Kombinera färg med ikoner, textetiketter, mönster eller understrykningar så att information som inte är färgberoende alltid finns.

WCAG 1.4.4 kräver att text ska kunna förstoras till 200 % utan att innehåll går förlorat. WCAG 1.4.12 kräver att ändringar av textavstånd (ökat letter-spacing och line-height) inte får förstöra layouten. Använd relativa enheter (rem, em) för typografi för att stödja båda kraven.

Omfattande CSS-testning av tillgänglighet omfattar webbläsartillägget axe DevTools för utveckling, Lighthouse CI för automatiserade kontroller i pipelinen, Pa11y för sidgranskningar från kommandoraden samt manuell testning av tangentbordsnavigering med Tab/Shift+Tab för att verifiera fokusindikatorernas synlighet och ordning.

CSS-testning av tillgänglighet omfattar kontrastförhållanden (minst 4.5:1 för AA), synliga fokusindikatorer som uppfyller WCAG 2.2 med hjälp av :focus-visible, att undvika färg som enda informationsbärare, stöd för forced-colors-läge och relativa typografiska enheter för att uppfylla kraven på förstoring. Automatiserade verktyg tillsammans med manuell tangentbordstestning ger en omfattande täckning.