Custom Controls Roles

On each web page, custom controls must have an appropriate role.

Accessibility

ARIA roles in Custom Controls

On each web page, custom controls must have an appropriate role, with any required ARIA attributes giving them properties and status. For instance: to convey status correctly, a custom checkbox must have a role="checkbox" and aria-checked="true|false".

How can I test it and possibly solve the problem?

You can use a screen reader or the ChromeDevTools accessibility panel if you need to verify that all custom interactive controls have the appropriate ARIA roles.

In CSS, the <div> and <button> elements provide different experiences when inspected by a screen reader: the <div> is announced through its textual content, while the <button> is announced as a "button", i.e. something the user can interact with.

You can solve the situation by not using custom interactive controls together: do not use a <div> with the button function, but try to use a real <button> directly.

If you need to keep the <div> though, assign a role=”button” to it and aria-pressed=”false”.

In this way, screen readers are able to announce the role and interactive state of the <div>.