By AltGrade Editorial · Reviewed by AltGrade · Last updated

Fix custom dropdowns

Div-based dropdowns are often invisible to assistive technology and the keyboard.

Sort and filter become mouse-only.

Steps

  1. Try the control with Tab and a screen reader.
  2. Prefer a native select.
  3. If you keep a custom widget, set role and name.

Failing example

Sort is a div with no role.

Better example

Sort is a labelled select.

Shopify

Replace Shopify collection sort divs with a select or a button and listbox that has a name.

WooCommerce

Use native selects for WooCommerce variations.

WordPress

Prefer a select in WordPress filters.

Wix

Use Wix dropdown form elements rather than clickable containers.

WCAG

Shopify steps · Shopify · Missing alt text