search

detfaellesdesignsystem / dkfds-components

Styling og komponenter
Other
43 stars 13 forks source link

Brug af checkbox uden en label #138

Closed claudia9 closed 3 years ago

claudia9 commented 3 years ago

Beskriv dit behov for hjælp. (Describe your need for help.) Vi er ved at implementere en tabel, hvor vi skal tilføje checkboxes til at svare nogle spørgsmål. (Se billederne nedenfor)

Vores problem er at jeres implementation af checkbox kræver en label element. Hvis man ikke tilføjer en label, forsvinder input til venstre side af skærmet. Grundet er at I har implementeret den således at label::before er den der "tegner" input knappet.

Hvis vi lader labelen står tømt, får vi en accessibility fejl pga. skærmlæser ikke vil have labels uden indhold.

Hvordan kan vi implementere det således at den er tilgængelig-venlig og på samme tid bruge DKFDS?

Screenshots Tilføj om muligt et eller flere billeder der viser hvad behovet for hjælp drejer sig om. (If applicable, add screenshots to help explains your need.) image image image

detfaellesdesignsystem commented 3 years ago

Hej @claudia9

Tak for din henvendelse.

Vi kigger lige på det og vender tilbage.

Med venlig hilsen Kristina Jensen Det Fælles Designsystem

detfaellesdesignsystem commented 3 years ago

Hej @claudia9,

Jeg har nu vendt det med UX'erne i FDS teamet.

Brug af radioknapper i en tabel er ikke anbefalet med brug af FDS (der skrives checkbox i henvendelsen, men skærmbillede viser radioknapper).

En enkelt tjekboks til markering af en række kan tilføjes uden tekst ved at sætte teksten i label i et span element med class sr-only. Denne anvendelse på radioknapper frarådes dog.

Radioknapper indsættes normalt i et fieldset med legend, således at spørgsmålet/emnet oplyses ved fokus på radioknapperne. Dette link mister man i en tabel, og det kan derved være svært at huske, hvad man svarer på. Derudover vil kolonnerne være relativt smalle, og man kan risikere at vælge forkert. Teksten der hører til radioknappen - kolonnens header - vil være synsmæssigt langt fra hvor man foretager sit valg, og ved lange tabeller kan dette være en udfordring for brugeren.

For tabeller skrives der blandt andet under Anvendes ikke: "Tabeller anvendes ikke til at opsætte en sides eller en komponents indhold udover data." (https://designsystem.dk/komponenter/tables/#retningslinjer) I stedet bør man sætte det op som en formular.

Håber ovenstående kan hjælpe dig videre, ellers er du velkommen til at sende mere info om løsningen du arbejder på, så kan vores UX'ere i teamet måske hjælpe yderligere.

Med venlig hilsen Kristina Jensen Det Fælles Designsystem

claudia9 commented 3 years ago

Hej Kristina,

Tak for dit rigtig godt input. Jeg snakkede med vores UX'er og vi løste sagen ved at tilføje en label til hver svar.

Det ser sådan ud nu:

image

Tak for hjælpen og rigtig god dag.

Med venlig hilsen, Claudia Netcompany