我可以在用途相同的不同元素中使用相同的“角色”属性吗？

Question

我可以在共享相同功能的不同元素中使用相同的role属性吗？

例如，网站不同部分中的相同徽标，或多个role: button的svg图标。

我在某个地方读到了这句话，但我真的不知道如何解决这个问题而又不会失去网站的可访问性。我是否应该将角色更改为非WAI角色，例如“ button1”，“ button2” ...？

Answer 1

在id属性（该值在HTML页面内具有唯一性）和role属性（该属性标识UI组件的类型）之间可能会有一些混淆。

如果您有可用作按钮的SVG图标，则无论页面中有多少这样的按钮，role="button"都是正确的。没有规则说网页上只能有一个按钮。反之;如果要使每个用作按钮的SVG图标可访问，则应该为其分配role="button"并使其可通过键盘访问。

从HTML5规范的角度来看，虽然ARIA角色值的列表为strictly speaking non-normative，但自定义角色值没有多大意义。 WAI-ARIA基于现有辅助功能API支持/支持哪些类型的UI组件，开发了“角色分类法”。这是《 WAI-ARIA 1.0用户代理实施指南》 中mapping between WAI-ARIA and accessibility APIs的背景。 “按钮”是辅助功能API通常支持的一种UI组件。 “ button1”，“ button2”不是辅助功能API支持的UI组件。

简而言之，给您的SVG图标属性例如role="button1"，role="button2"是一个坏主意；对每个用作按钮的图标使用role="button"。