HTML 可访问性 combobox 角色

Question

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?

Answer 1

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>

But Chromvox will announce:

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

I haven't tested with NVDA yet, if anybody could test with Jaws that would be great.

Firefox makes a difference, but changes the role as well for the first two, which seems appropriate.

Maybe we should file a bug report with the Webkit team.