Krav om annet enn farge for å skille ut visuelt element (WCAG 2.1)

[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.1: "Farge kan ikke benyttes som det eneste visuelle virkemiddelet for å formidle informasjon, angi en handling, be om respons eller skille ut et visuelt element."

Radioknapper, skriftfelter og fullfør-knappen oppfyller ikke dette kravet per nå.

Det skal være en "fysisk" endring på alle interaktive elementer. Med det menes en endring i størrelse, tykkelse av ramme eller liknende som en ikke trenger å være avhengig av å se farger for å legge merke til.

Additional Information

No response

[bjosttveit]

@olavflar what do you think about this? Should this be transferred to @digdir/designsystem?

[Febakke]

@Janingetjosvoll Mistenker at du snakker om hover state her?

I så fall er dette nytt for meg og jeg klarer ikke å se i 1.4.1 Use of Color at det kreves en endring på hover state på skjemakomponenter. Ingen av eksemplene eller de tilstrekkelige teknikkene nevner det heller.

Et skjemaelement eller en knapp har jo allerede tekst i form av label, gjenkjennelige former og farge. Altså flere elementer som sier at dette er et interaktivt element. Sånn som jeg har tolket dette kravet går det på at man ikke skal bruke kun farge til fortelle noe til brukeren. For eksempel vise hvilken feil som feiler i en validering. Der kombinerer vi rød farge med en feilmeldingstekst koblet til feltet for å oppnå dette kravet.

I tillegg beskriver teknikk C15 hvordan du kan gjøre endringer på hover og fokus hvor de beskriver endring av bakgrunn eller border farge som en mulig løsning. De nevner ikke et krav om endring av størrelse eller lignende. Dette er i tillegg kun en anbefalt teknikk for 1.41. Use of color, men et absolutt krav for 2.4.7. Focus visible. På fokus har vi endring på både farge og ekstra tykkelse på border når man bruker tastatur.

Du får rette meg om jeg missforstod. Om vi skal ha en slik endring på hover er det naturlig at vi tar det i designsystem teamet.

[tvs-brreg]

Det er hover staten på knappen, radio knapper, lenker og andre slike interaktive knapper det er snakk om ja.

Kravet er formulert slik: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Det du sier over dekker kun det siste i kravet "distinguishing a visual element". Hover er en "action", vi ønsker å formidle til en bruker at knappen kan trykkes på og at de nå har musepekeren over det spesifikke komponentet, og de trenger dermed informasjonen at den er klikkbar.

For å dekke dette kravet må det være noe annet enn kun farge som indikerer disse handlingene. Som feks, border, fet skrift, underline etc.

[Febakke]

Om denne tolkningen er riktig er det naturlig at vi løser det først i designsystemet også får Altinn Apps løse sine egne komponenter etter det. Relatert oppgave ligger her: https://github.com/digdir/designsystem/issues/822 Vi tar med Roy fra Brreg i den diskusjon.

[mrosvik]

For hover-state på knapper har vi brukt det vanligste interaksjonsmønsteret som er en liten fargeendring i form av at knappen blir ett hakk mørkere eller lysere. Hvis dette er et brudd på WCAG, så bryter både Nav, Gov UK, US Gov, Det danske designsystemet, Entur, Material design (google), Apple og Nielsen-Norman-Group dette. 🤔

Det skal gå an å forstå at knappen eller et annet interaktivt element er klikkbart uten at bruker har en musepeker.

For hover-state på lenker blir streken under tykkere ved hover.

[tvs-brreg]

Eg er helt enig at det skal være mulig å skille interaktive elementer fra ikke-interaktive komponenter uten å bruke musepeker. Og det er fint mulig i dag, det er ikke det som er mangelen.

Slik den fungerer i dag (og da på alle de andre designsystemene som du nevner) vil det være vanskeligere for personer med diverse synsrelaterte vansker å se når en interaksjon skjer med et element. Det handler om å ikke kun bruke farge for indikere dette

[mrosvik]

https://github.com/digdir/designsystem/issues/822#issuecomment-1724902769

[Febakke]

Closing this issue We have concluded that we are not breaking WCAG 1.4.1 with our current hover states. But we will look into if we need to improve them. This task will be handled by the design system team in this issue: https://github.com/digdir/designsystem/issues/822