Sidjämförelse

Exempel

Designspecifikation

Dropmenyer finns med states InActive, Active och Disabled. Mörkblå ramlinje och ljusblå fyllnad.

Do’s and Don’ts

-

Tillgänglighet

Valmöjlighet: Drop-down menyer kan vara svåra för människor med nedsatt motorik att använda. Det är bra om det finns möjlighet att nå undermenyalternativen på ett annat sätt, än bara via drop-down menyn, ex en sitemap med länkar eller liknande.

Tangentbordsnavigering: Bra att tänka på är också att drop-down menyn ska vara användbar både för användare av tangentbord och mus. Många gånger kan man navigera med tangentbord till själva drop-down menyn men sedan så kan inte undermenyalternativen nås, så se till att undermenyalternativen är tillgängliga via tangentbord.

Tangentbordanvändare måste veta vad de kommer att aktivera, så använd inte för långa undermenyer OM undermenyn öppnas med fokus.

Skärmläsare: Det ska framgå när drop-down menyn ändrar tillstånd för användare med skärmläsare (stängd/öppen) När undermenyer öppnas genom att klicka eller trycka ENTER.

Research på komponenten

Att tänka på vid användning av <select> element är att man kan använda sig av en default select eller styla en custom. Det som skiljer på dessa är att en default select kommer öppna valen i enhetens native lösning tex. interaktionen med snurran på iOS medan en custom select inte gör det utan kommer alltid öppnas som en select på alla enheter. Vi rekommenderar att använda default selects om inget annat krävs för att hålla tillgänglighet och användbarhet på så hög nivå som möjligt.

Läs mer om custom selects på W3Schools

Relaterade resurser/komponenter

Status