1

我在 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>
4

1 回答 1

3

您应该使用选项 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>

两者之间的区别在于，当屏幕阅读器进入“Good Example”时，它将显示“这是一个列表，列表包含 1 项，1 项中的第 1 项 - 列表项 1”

对于“不良示例”，屏幕阅读器会显示“这是一个列表破折号列表项 1”

但请记住，由于“角色”属性，辅助技术无法与“良好示例”一起正常工作。它工作正常仅仅是因为您使用了正确的标记来创建列表（<ul> <li>标签）。虽然，包含角色属性是一种很好的做法，即使它不需要使列表可访问。

有人随时指出更多好东西:)

于 2011-02-25T16:26:17.673 回答