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

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" och aria-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ätts aria-labelledby="id".