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

Question

a[role=option]

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

  

错误：元素option上属性role的值a错误。

button[role=option]

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

  

错误：元素option上属性role的值button错误。

span[role=option]

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

使用跨度验证可以。根据{{​​3}}我认为a[role=option]或button[role=option]有效，但这些都会产生验证错误。它们是明智的语义后备......为什么它们不是有效的？

Answer 1

a和button都不允许role="option"。这是设计的。 There is a handy table概述了哪些角色允许使用哪些角色（so no a和no button）。

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

Answer 2

@aardrian指出的文件（见Document conformance requirements for use of ARIA attributes）表明“a element without a href”可能有“任何角色”。所以只要你满足其他条件，这可能是有效的：

  

作者必须确保具有角色选项的元素包含在具有角色列表框的元素中或由其拥有。

此处用于验证文档的工具存在问题。

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