Fokusindikator og kontrast (WCAG 2.1 og 2.2)

[Janingetjosvoll]

Description

Register over reelle rettighetshavere utvikler skjema som må oppfylle mange krav til universell utforming. For å kunne oppfylle en del av disse lovkravene må vi ha hjelp av dere i Altinn.

WCAG 2.2:"Fokusindikator må være tydelig fremhevet både fra bakgrunn og fra den ikke-fokuserte versjonen. Dette for at det skal være tydelig hvor fokus står på siden og når det skjer en endring i hvilket element som får fokus. Alle kriteriene skal være oppfylt: Fargeendring ved fokus skal ha minimum 3:1 kontrastratio i forhold til fargen det skiftes fra. Fargeendring ved fokus skal ha minimum 3:1 kontrastratio i forhold til fargen på bakgrunnen som elementet står i. Det visuelle området som indikerer fokus skal ha et område på minimum 2 CSS-piksler ganger minimum den lengste siden av elementet.

WCAG 2.1: I tillegg må "fokusindikator for tastatur være godt synlig. Det er viktig å ivareta kravet om at når en komponent kommer i fokus så må ikke dette automatisk medføre betydelige endringer i siden."

Gjennomgang av komponenter (Av Lasse hos Digdir)

Jeg tok en gjennomgang av komponentene i testappen som skal dekke de fleste caser. Gjerne legg inn deres eksempler om det er noe som skulle mangle eller andre feil dere har funnet.

Det eneste bruddet jeg klarer å finne er det som er rapportert her: #1254 Denne feilen fører til at fokusvisningen kun viser den gule rammen og ikke den mørke.

Men vi har nå to forskjellige fokusvisninger. Den nye som er arbeidet frem i samarbeid med Brreg og kommer fra designsystemet. Denne er innenfor dagens krav fra 2.1 og de nye som kommer med 2.2 i fremtiden.

Vi har vår gamle fokusvisning, som etter min forståelse av 2.2 kravet skal være innafor kravet, men vi burde uansett bytte for å få en konsistent visning på tvers av komponentene våre.

Komponenter det gjelder

• Linker i feilmeldingsoppsummering
• Alle linker (Vil kanskje endres når vi får inn lenker fra designsystemet)
• Opplastingskomponenten
• Alle knapper i listen (med filtrering og paginering)

Additional Information

No response

[bjosttveit]

Hvor er det du mener dette kravet ikke er oppfylt? Er det noen spesifikke komponenter eller over alt?

[Janingetjosvoll]

Hvor er det du mener dette kravet ikke er oppfylt? Er det noen spesifikke komponenter eller over alt?

Hei, dette gjelder i skjemaet for registrering av Reelle rettighetshavere i Altinn 3.0. Ifølge våre UX-ressurser er ikke dette kravet ivaretatt i skjemaet generelt og dette er funksjonalitet som ifølge våre Frontend-ressurser må løses av Altinn.

[bjosttveit]

Jeg ser at dette med fokusindikatorer allerede har blitt oppdatert en god del og kommer med i neste release av app-frontend. Det kan hende det er i orden da.

[Febakke]

@Janingetjosvoll Gjerne legg inn skjermdump av der det gjelder. Vi har tatt i bruk deres (brreg) fokusvisning på våre komponenter, så den skal være god nok.

Men, det gjelder bare komponentene fra designsystemet. Vi må ta en gjennomgang av komponentene som ikke er derfra.

[Febakke]

Kan også være relatert til #1254

[bjosttveit]

Kan også være relatert til #1254

Fokus for tekst-felter og datovelger er fortsatt broken i versjon 3.66.2 som den issuen beskriver

[Janingetjosvoll]

Fra vår UX-ressurs (T.Saly): Det er ikke godt nok. Kontrasten fra non-fokus til fokus skal være minst 3:1.

Det kommer frem to borders som er tykke nokk men, med fokus gulfargen #FADF4B kommer utenfor knappen og de må ha stor nok forskjell fra bakgrunnen så den hvite #FFFFFF eller den lyse blåe #F1FBFF gir en kontrast ratio på bare 1.3:1 som ikke er godt nok.

Den andre er den mørk border som kommer på innsiden og må ha kontrast far bakgrunnen i knappen så border fargen #1E2B3C har 2.4:1 som er nært men ikke godt nok.

Anbefalingen jeg har til Altinn er å vurdere å endre bakgrunnsfargen samtidig som vi gjør siden det gjør det mye enklere å sørge for at kontrasten har en stor nok endring samtidig som at en ikke bryter andre kontrastkrav til komponenter.

Altinn:

Default:

Fokus:

Vår knapp: Default:

Fokus:

image.png 10 KiB image.png 13 KiB image.png 6.9 KiB image.png 15 KiB image.png 10 KiB image.png 11 KiB

[Febakke]

@Janingetjosvoll Du referer nå til 2.4.13 Focus Appearance (W3C, engelsk) dette er en del av WCAG 2.2 som per i dag ikke er en del av regelverket.

Tilsynets tolkning er per i dag:

Hvis fokusmarkeringen er vanskelig å oppfatte for brukeren, er kravet etter tilsynets vurdering ikke oppfylt.

Så det blir fint å få på plass WCAG 2.2 slik at kravet blir mer tydelig.

En av fordelene med den gule rammen er å ha en fokusvisning som fungerer på alle bakgrunner. Kontrasten mellom den mørkerammen og den gule rammen er 10.43:1. Når det er sagt så burde vi selvfølgelig ta dette med i betraktning når vi jobber med fokusvisningen. Designsystemet er teamet som holder i dette og kommer til å ta hensyn til dette kravet i videre arbeid med fokus stylingen. Det kommer nok endringer på knappen etterhvert 😉

[Febakke]

Foreslår at vi lukker denne oppgaven. Apps må fikse https://github.com/Altinn/app-frontend-react/issues/1254 som per nå gjør at fokusvisningen vår bryter med gjeldende WCAG krav. Designsystemet kommer til å jobbe videre med focus-styling i samarbeid med Roy fra Brreg og kommer til å inkludere krav fra WCAG 2.2 i det arbeidet.

[tvs-brreg]

Den er god, greit for meg at den lukkes, tenkte i utgangspunktet å være førevar siden vi vet kravet kommer og det er relativt lavthengende frukt. Når eg nå vet det er noe dere tar opp i DS er det selvfølgelig greit å vente til det siden det er unødvndig å gjøre endring flere ganger så lenge det er på plass før 2.2 må være på plass.

Eg er enig med at "vår" fokus farge har ulemper med potensiell bakgrunns problemer. Ulempen med deres nåværende design er at den fortsatt er lite synlig siden "fokus fargen" som ligger nærmest orginal fargen (den innerste blåfargen) har lite kontrast til orginal fargen.

Eg tror en blanding av våre løsninger kunne vært bra ved å legge til en lys border på utsiden av den mørke for å garantere synlighet uavhengig av bakgrunn, men regner med Roy også går gjennom noen av disse tanker når temaet blir tatt opp 🙂