Question

我有一个ul列表中的文章列表。阅读http://www.w3.org/WAI/PF/aria/roles#role_definitions我可以为每个项目使用list和listitem个角色，但也会将其视为article。

选项1：我可以执行以下操作（在同一元素上有2个角色）：

<ul role="list">
<li role="listitem article">...<li>
</ul>

选项2：我应该只使用article角色：

<ul>
<li role="article">...<li>
</ul>

Answer 1

您应该使用选项3：）

<ul role="list">
<li role="listitem">...<li>
</ul>

您真正想做的就是让辅助技术理解内容的标记。

实际上，对于大多数辅助技术，“角色”属性通常仅在富互联网内容（如滑块）和许多HTML5元素上才需要。

如果您担心屏幕阅读器正确使用您的代码，那么正确标记列表等内容就足够了。

好榜样

<p> This is a list </p>
<ul role="list">
<li role="listitem"> List Item 1 <li>
</ul>

错误示例

<p> This is a list </p>
<p> - List Item 1 </p>

两者之间的区别在于，当屏幕阅读器出现在“好例子”时，它将显示“这是一个列表，列表包含1个项目，第1项为1 - 列表项目1”

使用“错误示例”，屏幕阅读器将显示“这是列表短划线列表项目1”

请记住，由于“角色”属性，辅助技术与“良好示例”无法正常工作。它工作正常只是因为您使用了正确的标记来创建列表（<ul> <li>标记）。尽管如此，最好包括角色属性，即使不需要使列表可访问。

有人可以随意指出一些更好的东西：）