Fix custom dropdowns on Shopify

This page shows how to fix custom dropdowns on Shopify. Div-based dropdowns are often invisible to assistive technology and the keyboard.

Steps in Shopify

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

Check

  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.

All platforms · Shopify · WCAG 4.1.2