如何在锚点和按钮上使用 [role=option]

How to use [role=option] on anchors and buttons

a[role=option]

<div role="listbox">
    <a role="option">orange</a>
    <a role="option">purple</a>
</div>

Error: Bad value option for attribute role on element a.

button[role=option]

<div role="listbox">
    <button role="option">orange</button>
    <button role="option">purple</button>
</div>

Error: Bad value option for attribute role on element button.

span[role=option]

<div role="listbox">
    <span role="option">orange</span>
    <span role="option">purple</span>
</div>

验证 span 没问题。基于 listbox documentation 我认为 a[role=option] 或 button[role=option] 是有效的，但它们都会给出验证错误。它们是明智的语义回退...为什么它们无效？

a 和 button 都不允许 role="option"。这是设计使然。 There is a handy table that outlines what roles are allowed on what elements (so no a and no button).

但是，我建议不要这样做。除非您准备 完全 模仿 select 的所有功能（例如，所有键盘交互）。一些 issues and examples are at MDN，其中包括您必须实施的一些额外角色和功能。 ARIA 是作为一种桥接技术而创建的，而不是为了取代本机控件。

@aardrian 指向的文档（见Document conformance requirements for use of ARIA attributes) indicates that an "a element without a href”可能有"any role"。所以只要你满足另一个条件，这可能是有效的：

Authors must ensure elements with role option are contained in, or owned by, an element with the role listbox.

您用来验证文档的工具出现问题。

对于 button 元素，您只能担任以下角色： checkbox、link、menuitem、menuitemcheckbox、menuitemradio、radio 或 switch。所以错误是可以预测的。