使用 Aria 角色文章和/或列表项？

发布于 2024-10-18 14:58:43 字数 597 浏览 6 评论 0原文

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

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

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

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

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

原文

I have a list of articles in a ul list. Reading http://www.w3.org/WAI/PF/aria/roles#role_definitions i can either use the roles list and listitem per item, but they are also considered as an article.

Option 1: Can I do the following (have 2 roles on the same element):

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

Option 2: Should I just use the article role:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

强辩 2024-10-25 14:58:43

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

” bad example”，屏幕阅读器会读到“这是一个列表破折号列表项 1”，

但请记住，由于“角色”属性，辅助技术无法与“好示例”一起正常工作。它工作正常只是因为您使用了正确的标记来创建列表（

标记）。尽管如此，即使不需要使列表可访问，但包含角色属性也是一种很好的做法。

有人可以随意指出一些更多的好东西:)

You should use Option 3 :)

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

All you really want to do is let assistive technologies understand the markup of the content.

Actually, with most assisted technologies, the "role" attribute is usually only required on rich internet content, like sliders, and many HTML5 elements.

If you are worried about screen readers properly working with your code, marking up something such as the list correctly would be suffice.

Good Example

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

Bad Example

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

The difference between the two, is that when a screen reader comes to the "Good Example" it will read, "This is a list, List contains 1 item, item 1 of 1 - List item 1"

With the "bad example", the screen reader would read "This is a list dash List item 1"

Keep in mind though, the assitive technology is not working properly with the "Good Example" because of the "role" attribute. It is working properly simply because you used correct markup to create the list (<ul> <li> tags). Although, it is good practice to include the role attribute even though it is not required to make a list accessible.

Someone feel free to point out some more goodies :)

回复收藏 0 原文

~没有更多了~