WCAG 4.1.2: Name, Role, Value
WCAG 4.1.2 Name, Role, Value is a level A success criterion from WCAG 2.0. User interface components expose their name, role and value to assistive technology. Custom widgets need this as much as native ones.
A div that looks like a checkbox is silent unless it has a role and a state.
How to test
Inspect custom dropdowns, toggles and icon buttons in the accessibility tree.
How to fix
Prefer native elements. If you build a widget, set role, name and aria-expanded or aria-checked.
Example that fails
A custom sort control is a div with no role and no name.
Example that passes the check
The sort control is a select with a label.
Shopify
Replace div dropdowns in the theme with button plus listbox, or a native select, and name them.
WooCommerce
Use native selects for product variations.
WordPress
Use native details or select rather than unnamed divs.
Wix
Use form elements rather than containers with click events.