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
...