Rullgardinsmeny
Rullgardinsmeny (Dropdown menu) används för att låta användaren göra ett val, och välja ett alternativ av flera i en lista.
Visuella exempel
Ui-kittet
Riktlinjer
- Dropdown menu ska alltid ha en etikett intill sig där det framgår vad användaren ska göra sitt val utifrån.
- Dropdown-ytan ska i utgångsläget innehålla en text, där det tydligt framgår vad man väljer (till exempel "Välj yrke", inte endast "Välj").
- Hela fältet för dropdown menu är klickyta som fäller ut/fäller ihop menyn.
- De valbara alternativen i en dropdown menu i formulär får inte vara länkar.
- Hoover över ett alternativ i listan ska highlightas.
Bra att tänka på
- Alternativen i listan måste sorteras på ett logiskt sätt. Det kan till exempel vara i bokstavsordning eller i grupper.
Tillgänglig komponent
- Det ska vara möjligt att navigera till valen i listan med piltangenterna och stänga med escape.
- Se till att aria-attributen
aria-haspopup="true"ocharia-expanded="true/false"finns på knappen. Det ska även finnas ett id för att kunna koppla till menyn som fälls ut. På menyn sättsaria-labelledby="id".