detfaellesdesignsystem / dkfds-components

Styling og komponenter
Other
44 stars 13 forks source link

Avanceret tabeller #147

Closed JAU-atp closed 2 years ago

JAU-atp commented 3 years ago

Hej FDS

Vi er i gang med at udvide selvbetjeningsløsningen "lønmodtagernes feriemidler", hvori vi har en avanceret tabel med flere udfoldelige rækker.

image

Som illustreret på billedet ovenfor, er der 3 tabeller, hvoraf 2 af dem har udfoldelige rækker. Den sidste tabel (tabel 3) har ikke sine egne th'er, men bliver vist som en del af den forrige tabel som kan foldes ud.

Er dette en løsning som I kan godkende? Eller skal tabel 3 være selvstædig med egne th'er ligesom tabel 2?

mvh Josephine - ATP

detfaellesdesignsystem commented 3 years ago

Hej Josephine

Med hensyn til tilgængelighed skal I være opmærksomme på, at tabeller altid bør have en header defineret for at efterleve WCAG succeskriteriet 1.3.1: Info and Relationships (https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html). Læs mere om det her: https://www.w3.org/TR/WCAG20-TECHS/F91.html)

Er det muligt at du kan sende et større screenshot, hvor hele siden kan ses? Det kunne vi godt tænke os at se for bedre at kunne vurdere kompleksiteten af tabellerne.

Med venlig hilsen Mette Boldt Det Fælles Designsystem

JAU-atp commented 3 years ago

Vi har fokus på WCAG og har implementeret skjulte th'er for skærmlæsere. Det er kun i tabel 3, hvor vi gerne vil gøre brug af headlines fra tabel 2, da vi visuelt gerne vil undgå endnu en indrykning under rækken "Afkast for tidligere år" samt rækken "Afkast 2022".

Jeg har vedhæftet et eksempel af den fulde tabel nedenfor image

detfaellesdesignsystem commented 3 years ago

Hej Josephine

Mange tak for screenshottet.

Uden at kende den konkrete kontekst er det altid svært at vurdere, men vi vil anbefale jer at overveje, om det er muligt at reducere kompleksiteten ved at strukturere siden med overskrifter og individuelle tabeller frem for at have en tabel med så mange niveauer. I den forbindelse kan I også overveje at bruge facitstreger (https://designsystem.dk/design/borders/#streger) til at fremhæve opsummerede tal uden for tabeller.

Med venlig hilsen Mette Boldt Det Fælles Designsystem