CODEWITHSUNDEEP
javascripthtmlcssaccessibilitywai-aria
Loki
Loki

Reputation: 1205

HTML accessibility combobox role

I have the following layout in my project:

<div class="css-c18mwd-ImageFrameBase-ImageFrameWithGradient-SecondaryImageFrameWithGradient e1jjxv8j4">
<button tabindex="0" aria-haspopup="true" class="css-11ubmv-MediaGridButton e1jjxv8j1">Enlarge Nordic Blue Nokia X20 from Front and Back</button>
</div>

But when I review the accessibility tab, it says that the role for my button is combobox as shown in the screenshot below.

How can I change it to be more accessible and have a role of button like the other buttons on the page?

Accesiblity Tree

Upvotes: 0

Views: 2599

Answers (1)

Andy
Andy

Reputation: 6170

That’s a curious case. I believe you should remove aria-haspopup (and tabindex while you’re at it, that’s redundant for <button>).

Just as a reminder before we continue: What counts is what screen readers announce in the end, and to be compliant with the relevant standards.

From the haspopup attribute documentation:

A popup element usually appears as a block of content that is on top of other content. Authors MUST ensure that the role of the element that serves as the container for the popup content is menu, listbox, tree, grid, or dialog, and that the value of aria-haspopup matches the role of the popup container.

If I understand correctly from your comments you are opening a larger view of an image. From the list above, the only fitting role would be that of dialog.

When looking at the documentation for the dialog role, you will not find any mention of haspopup, nor have I seen any dialog pattern with that attribute.

Even the Modal Dialog Example on the ARIA Authoring Practices Guide does not make use of that attribute. Neither does the Bootstrap Modal.

So my suggestion is to follow these guides and simply remove aria-hasdialog and make sure your dialog is implementing all requirements right.

Further, I believe that browsers are not meant to change the element’s role dependent on the value in that attribute. I’m even more reassured by the fact that aria-hasdialog is deprecated except for chosen roles, and button is among them. How would that make sense if it changed that role?

Test results

Chrome exposes the combobox role in all these cases:

<button aria-haspopup="true">Enlarge Image</button>
<button aria-haspopup="true" aria-expanded="false">Enlarge Image</button>
<button aria-haspopup="dialog">Enlarge Image</button>

NVDA with Firefox and Chrome will announce:

Enlarge image, Menu button, submenu
Enlarge image, Menu button, collapsed, submenu
Enlarge image, Menu* button, submenu

  • only announced with Chrome

Chromvox will announce:

Enlarge image, popup button
Enlarge image, popup button collapsed
Enlarge image, button, submenu

If anybody could test with Jaws that would be great.

The fact that browsers change the button’s role when haspopup is present seems weird, but might be due to the fact that no button opening a dialog uses that attribute in the wild.

Upvotes: 2

Related Questions