detfaellesdesignsystem / dkfds-components

Styling og komponenter
Other
43 stars 13 forks source link

Vis felter givet valg i dropdown #169

Closed Emilieisabelladahl closed 2 years ago

Emilieisabelladahl commented 2 years ago

Navn i designsystemet (Feature name in the design system) Dropdown-menu

Link til det der skal opdateres (URL to what needs to be updated) https://designsystem.dk/komponenter/drop-down/

Skyldes dit forslag et problem? Beskriv venligst. (Is your update request related to a problem? Please describe.) I en trinindikator, efter efter hvilket adgangsgrundlag man vælger i en drop down, skal man udfylde forskellige felter. Hvordan skjuler / viser vi disse felter for at gøre løsningen tilgængelig og tydelig for hjælpeprogrammer såsom skærmlæser?

Billede af nuværende løsning: image image

Beskriv det du gerne ser ske. (Describe the solution you'd like) Vi har fået fortalt at den nuværende løsning kan skabe forvirring når man anvender hjælpeprogrammer til at læse siden. Har i alternativt en bedre løsning til at skjule og vise de relevante felter? Vi har et behov for at bruge trinindikator, der vi skal kunne gå frem og tilbage imellem de forskellige trin.

Beskriv de alternativer du har overvejet. (Describe alternatives you've considered) Vores nuværende løsning er som sagt blot at vise og skjule felterne.

Supplerende bemærkninger (Additional context) Billeder vedlagt ovenstående

detfaellesdesignsystem commented 2 years ago

Hej Emilieisabelladahl

Som du også selv skriver, så anbefaler vi af hensyn til tilgængelighed og den generelle brugeroplevelse ikke at vise og skjule indhold baseret på en dropdown.

Vi ser i jeres tilfælde to forskellige løsninger, som I kan overveje. Begge løsninger anbefaler, at den del af formularen, der afhænger af dropdownen, pleceres på et nyt trin.

Vi anbefaler jer også at anvende radioknap med skjult indhold til angivelse af videregående uddannelse. Læs mere her: https://designsystem.dk/komponenter/radioknap/#skjult-indhold-collapse

Screenshot 2022-03-31 at 14 58 23

Løsning 1: Trinformular uden trinindikator

Generelt anbefales trinindikatoren kun i tilfælde, hvor de forskellige trin er kendt. Derfor kan I overveje af lave en trinformular uden trinindikator, så hvert trin vises dynamisk efterhånden som brugeren klikker sig igennem formularen. I kan lade jer inspirere af vores eget fælles krav værktøj, som I finder her: https://designsystem.dk/krav-vaerktoej/anvendes-af-virksomheder/

Her er også nogle skitser af, hvordan løsningen kunne se ud for jer:

Desktop - 4 Desktop - 5

Løsning 2: Nyt trin med bredere titel

I jeres tilfælde lader det til, at der altid skal angives flere detaljer, uanset om man vælger det ene eller det andet. Hvis det er rigtigt forstået, og hvis overblikket over formularens trin er vigtigt for brugeren, så kan I også overveje en løsning, hvor de yderligere detaljer placeres på et nyt trin med en titel, der er bred nok til at omfavne oplysningerne uafhængigt af hvad brugeren vælger i radioknapperne og dropdown.

Med denne løsning er det dog vigtigt, at I forhindrer brugeren i at kunne navigere frem vha. trinindikatoren, før hvert trin er udført. Formularen skal altså gennemgås kronologisk.

Denne løsning kunne fx se sådan ud:

Desktop - 2 Desktop - 3

Vi håber, vores anbefalinger kan hjælpe jer videre.

Med venlig hilsen Mette Boldt Det Fælles Designsystem