Dropdown button

Knappar kan ha en dropdown som fälls ut när användaren klickar på knappen. I listan som fälls ut finns antingen länkar, eller actions användaren kan utföra.

 

Open

1177

 

Open

Inera

Innehållsförteckning

Komponentkällor

1177

Inera

Designspecifikation

Typ och storlek

Knappar med dropdown har ikonen chevron till höger som visar att den är utfällbar.
Precis som en vanlig button, kan de vara av olika typer: primary, secondary och tertiary. En dropdown button kan också, precis som en vanlig button, ha olika storlekar: large, medium och small.

Ikoner

Alternativen i dropdown-listan kan vara med eller utan ikon. Vilken ikon som ska visas vid respektive alternativ kan väljas efter behov.

Du kan välja att använda ikoner i dropdown-listan, eller inte välja ikoner. Det är inte okej att blanda.

States

Det finns tre states:

• Default

• Hover

• Active

Att tänka på

Det finns flera saker som man bör ha i åtanke när man har en dropdown-knapp som direkt utför en händelse. En av dem är “Förutsägbarheten”. En action som utförs direkt kan vara snabb och effektiv, men den kan också skapa förvirring om det inte är tydligt vad som händer. Därför är det viktigt att förmedla var funktionen kommer leda till innan det trycks, vilket kan göras med en beskrivande text.

Felaktiga åtgärder är också något man måste vara medveten om, om det är för enkelt att trycka fel kan det skapa stora problem för användare med motoriska nedsättningar. När knappen används ska tydlig feedback ges till användaren. Vilket kan göras både via ljud och visuellt som förmedlar att en förändring har skett.

I vissa fall kan det vara bättre att undersöka om andra alternativ kan användas, exempelvis:

• Länkar eller knappar: Om det finns ett begränsat antal åtgärder som enkelt kan visas som enskilda knappar eller länkar på webbsidor.

• Radioknappar och checkrutor: Om det handlar om ett formulär med val mellan flera alternativ på webbsidor.

• Tabell med actions: Om det finns flera actions att utföra och de kan presenteras som kolumner i en tabell.

• Kontextmenyer: Om åtgärder är knutna till specifika objekt på webbsidan och kan visas vid högerklickning.

Tillgänglighet

Riktlinje 1.4.1 Användning av färg (Nivå A)
Använder inte enbart färg för att förmedla information (fel, framgång, etc)
Understanding Success Criterion 1.4.1: Use of Color | WAI | W3C

Riktlinje: 2.1.1 Tangentbord (Nivå A)
Är lätt att identifiera som interaktiv, Går att använda med tangentbord.
Understanding Success Criterion 2.1.1: Keyboard | WAI | W3C

(WCAG 2.2) Riktlinje 2.4.11: Fokus inte döljd (Minimum) (AA) – Fokusmarkering
Det ska vara tydligt var du befinner dig på sidan, vilket betyder att du ska ha en tydligt synlig indikering av vilket element på sidan som har tangentbordsfokus.
Understanding Success Criterion 2.4.11: Focus Not Obscured (Minimum) | WAI | W3C

(WCAG 2.2) Riktlinje 2.5.8: Målstorlek (Minimum) (AA) – Minimistorlek för klickbara objekt
Det ska vara lätt att klicka rätt. Det nya kriteriet 2.5.8 Target Size (Minimum) (nivå AA) innebär förenklat att klickbara element ska vara minst 24×24 CSS-pixlar, vilket underlättar för användare med nedsatt finmotorik och användning av pekskärm, där man inte har samma precision som med en mus.
Understanding Success Criterion 2.5.8: Target Size (Minimum) | WAI | W3C

Riktlinje: 3.2.3 Konsekvent navigering (Nivå AA)
Navigeringen och dess syfte är tydligt inom hela sidans sammanhang.
Understanding Success Criterion 3.2.3: Consistent Navigation | WAI | W3C

Riktlinje: 3.3.2 Etiketter eller instruktioner (Nivå A)
Det finns labels/etiketter för innehållet.
Understanding Success Criterion 3.3.2: Labels or Instructions | WAI | W3C

Riktlinje: 4.1.2 Namn, Roll, Värde (Nivå A)
Alla element har rätt semantisk roll.
Understanding Success Criterion 4.1.2: Name, Role, Value | WAI | W3C

Riktlinje: 4.1.3 Statusmeddelanden (Nivå AA)
Statusmeddelanden är implementerade programmatiskt genom roles eller properties så att de kan presenteras utan att få fokus för personer som använder hjälpmedel.
Understanding Success Criterion 4.1.3: Status Messages | WAI | W3C

Mer läsning om dropdowns:

https://www.magentaa11y.com/checklist-web/select/

Feedback

Hjälp oss att förbättra den här komponenten genom att ge feedback, ställa frågor och lämna andra kommentarer på Inera UX Slacken i kanalen #komponenter_design eller #komponenter_kod alternativt kan du använda vårt formulär.