如何在锚和按钮上使用[role=option]
如何在锚和按钮上使用[role=option]
提问于 2016-06-13 14:01:34
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>对跨度进行验证。基于文档，我认为a[role=option]或button[role=option]是有效的，但它们都会产生验证错误。它们是合理的语义fallbacks...why，不是吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-06-13 15:04:32
a和button都不允许role="option"。这是故意的。有一张方便的桌子，它概述了在哪些元素(a和button)上允许哪些角色。
不过，我建议不要这样做。除非您准备完全模仿select的所有功能(例如，所有键盘交互)。一些问题和例子见MDN。，它包含了一些必须设置的额外角色和功能。ARIA是作为一种桥接技术创建的，而不是用来取代本机控件的。
Stack Overflow用户
发布于 2016-06-15 05:05:53
@aardrian指出的文档(见使用ARIA属性的文档一致性要求)表明，"没有href的元素“可能具有”任意角色“。因此，只要您满足其他条件，这可能是有效的：
作者必须确保具有角色选项的元素包含在带有角色列表框的元素中，或者由其拥有。
您用来验证文档的工具有一个问题。
对于button元素，您仅限于以下角色：checkbox、link、menuitem、menuitemcheckbox、menuitemradio、radio或switch。所以这个错误是可以预测的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37799846
复制相关文章
相似问题
腾讯云开发者
