Html 使用角色的原因="；列表“；和角色="；listitem"；？

使用以下代码有什么好处吗

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

以下代码对辅助技术是否具有相同的含义

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

答案是肯定的，当使用正确的语义标记来构建文档时，辅助技术工作得很好。若它是一个简单的静态列表，那个么就不需要用角色来标记它们

例如：考虑将其BaseCeCPT定义为HTML LI。baseConcept HTML li与role=“listitem”定义几乎相同，只是它不继承任何属性。更多

因此，考虑下面的例子：

<h3 id="header">Vegetables</h3>
   <ul role="list" aria-labelledby="header" aria-owns="external_listitem">
     <li role="listitem" aria-level="3">Carrot</li>
     <li role="listitem" aria-level="3">Tomato</li>
     <li role="listitem" aria-level="3">Lettuce</li>
   </ul>
…
<div role="listitem" id="external_listitem">Asparagus</div>

蔬菜

胡萝卜
番茄


…
芦笋

在这里，页面作者希望为li使用aria级别属性。尽管aria labelledby和aria owns可以应用于基本标记的所有元素，但属性要求该元素具有某些角色。因为ARIA规范使用Web本体语言（OWL）来表示类层次结构中的角色。OWL将这些角色描述为类及其状态和属性。因此，为了使用aria级别的元素，必须定义一些角色，因为纯HTML li不会继承任何属性或限制。将角色标记为listitem后，它要求listitem由具有role=“list”的元素拥有。因此，您最终使用这两个角色

另一方面，如果不使用语义标记，则角色也很有用。例如：

<div role="list">
  <div role="listitem">dog</div>
  <div role="listitem">cat</div>
  <div role="listitem">sparrow</div>
  <div role="listitem">wolf!</div>
</div>

狗
猫
麻雀
狼！

---

在这里，屏幕阅读器软件会将ARIA列表（由div组成）指示为任何其他普通HTML列表。

您的问题有点含糊不清，但是如果您询问将

role=“listitem”

添加到

li

项目是否有好处，这些项目已经将其作为默认角色，那么这个具体问题的答案是“不”

（是的，最好使用

li

而不是

div

。如果使用

div

，则需要

role=“listitem”

。但我不认为这正是您所要求的。）

退房；他起草了一份关于何时何地在HTML5中使用各种ARIA角色的最佳实践文档

一般来说，如果元素的角色与元素的默认角色相同，则不需要（也不应该）为该元素指定角色。因此，由于

li

元素具有

列表项的默认
角色
，因此没有理由重申这一点

这条规则有一些例外，他们主要关注浏览器尚未正确实现默认角色的新HTML5元素。因此，例如，由于HTML5的
article
元素尚未被所有浏览器公开为具有
article
的
角色，因此在这种情况和类似情况下，实际上建议使用
。
感谢@Ravi提供的信息。因此，当使用语义标记时，不需要用角色标记一个简单的静态列表。是的，几乎所有的时间都是这样，但它同样依赖于与浏览器版本一起使用的辅助功能软件。因此，如果您发现屏幕阅读器没有读取特定的标记，那么应该使用这些角色的组合使其工作，直到软件修复该缺陷为止。所以没有什么是确定的，只需进行彻底的测试。嗨，Brendan，在HTML中使用ARIA的当前URL-将始终指向文档的编辑草稿。看起来Steve的“关于在HTML中使用ARIA的说明”现在就在这里：