Dropdown knappar
- Dennis Centerhag
- Michaela Holmgren
Källor:
Fly-out Menus | Web Accessibility Initiative (WAI) | W3C
Select dropdown - Web accessibility checklist - MagentaA11y
Understanding WCAG 2.2 | WAI | W3C
När finns det en större användning för dropdown button?
Dropdown knappen används i första fall när när du behöver erbjuda olika åtgärder på en tjänst, i det vanligaste fallet så brukar dropdown menyvalet fungera som en href alltså länkar vidare till andra webbsidor. Det gör användarupplevelsen mer strukturerad och navigerbar genom att ge användarna en tydlig översikt över tillgängliga åtgärder. Det minskar även den kognitiva belastningen när en användare letar efter olika funktioner eller webbplatser.
Kan det finnas tillgänglighetsproblem med att ha en knapp som direkt utför en action?
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 de kan också vara förhastande om användaren inte är redo för knapptrycket. 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 trycks ska de också ge en tydlig feedback till användaren. Vilket kan göras både via ljud och visuellt som förmedlar att en förändring har skett.
Alternativa komponenter som kan ersätta dropdown
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 en form 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.
Enligt WCAG är dessa riktlinjer viktiga att följa när dropdown knappar implementeras:
Källor:
Select dropdown - Web accessibility checklist - MagentaA11y
Understanding WCAG 2.1 | WAI | W3C
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): Dess syfte är klart inom hela sidans sammanhang. -Understanding Success Criterion 3.2.3: Consistent Navigation | WAI | W3C
Riktlinje: 3.3.2 Etiketter eller instruktioner (Nivå A): Förlitar sig inte på platshållartext som etikett eller hinttext. - Understanding Success Criterion 3.3.2: Labels or Instructions | WAI | W3C
Riktlinje: 4.1.2 Namn, Roll, Värde (Nivå A): Förmedlar rätt semantisk roll. - Understanding Success Criterion 4.1.2: Name, Role, Value | WAI | W3C
Riktlinje: 4.1.3 Statusmeddelanden (Nivå AA): Uttrycker sitt tillstånd (om tillämpligt). - Understanding Success Criterion 4.1.3: Status Messages | WAI | W3C