Tilgængelige fokustilstande: Design af synlig tastaturfokus

Hvorfor fokustilstande betyder noget

Folk, der bruger et tastatur, skifter enhed eller skærmforstørrelsesglas, bevæger sig gennem en side et element ad gangen. Fokusindikatoren er den eneste måde, de ved, hvor de er. At fjerne browseroversigten uden en erstatning er en af ​​de mest almindelige tilgængelighedsfejl.

Hvad WCAG 2.2 kræver

Succeskriterium 2.4.7 Fokus synlig (niveau AA) kræver, at enhver tastaturbetjent grænseflade har en tilstand, hvor fokusindikatoren er synlig. WCAG 2.2 tilføjet 2.4.13 Focus Appearance (niveau AAA), som beskriver en stærk indikator: mindst lige så stor som arealet af en 2 CSS pixel tyk omkreds af komponenten, med et kontrastforhold på mindst 3:1 mellem de fokuserede og ufokuserede tilstande.

:fokus-synlig

MDN forklarer, at :focus-visible gælder, når et element har fokus, og browseren ved hjælp af heuristik beslutter, at fokus skal vises, typisk til tastaturbrug. Det lader dig vise stærke fokusringe for tastaturbrugere uden at vise dem, hver gang nogen klikker på en knap med en mus. Brug det i stedet for at fjerne konturer.

Design af ringen

Praktisk vejledning:

• Brug en kontur eller ring med en offset, så den ikke blander sig i elementet.
• Kontroller kontrasten mod hver baggrund elementet kan vises på; en tofarvet ring hjælper.
• Hold det konsistent på tværs af komponenter, defineret som et symbol i dit designsystem.
• Stol aldrig på en subtil farveændring alene.
• Sørg for, at det fokuserede element ikke er skjult bag klæbende overskrifter.

Fokus og bevægelse

En fokusring kan fremstå med en meget kort overgang, men den skal føles øjeblikkelig. Undgå animationer, der forsinker ringen eller flytter elementet, og for brugerdefinerede lærredtegnede komponenter skal du sørge for, at der stadig er et rigtigt fokuserbart element på siden, så tastaturbrugere kan nå det.