Question

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

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

以下代码与辅助技术的含义是否相同？

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

Answer 1

答案是肯定的，当正确的语义标记用于构建文档时，辅助技术可以很好地工作。如果它是一个简单的静态列表，则无需使用角色标记它们。

例如：考虑{base}被定义为HTML li的role="listitem"。 baseConcept HTML li几乎与role =“listitem”定义完全相同，只是它没有继承任何属性。更多info

因此，请考虑以下示例：

<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-level属性。尽管aria-labelledby和aria-owns可以应用于基本标记的所有元素，但aria-level属性要求该元素具有某种作用。由于ARIA规范使用Web Ontology Language（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列表。

Answer 2

你的问题有点含糊不清，但是如果你问的是将li =项目添加到

项目中是否有好处，而已经将其作为默认角色，那么该特定问题的答案是：不。

（是的，使用li是div的首选。如果你从div开始，则需要role =“listitem”，虽然li是首选;但我认为这不是你所要求的。）< / p>

查看此blog post by Steve Faulkner;他汇总了关于在HTML5中使用各种ARIA角色的时间和地点的最佳实践文档草案。该文档目前是here，但由于这是非正式的草案，我不知道该链接是否仍会在将来发挥作用。

一般来说，如果该角色与元素的默认角色相同，则不需要（也不应该）为元素指定角色。因此，由于li元素具有listitem的默认角色，因此没有理由重申它。

此规则有一些例外，它们主要关注浏览器尚未正确实现默认角色的新HTML5元素。因此，例如，由于HTML5的article元素尚未被所有浏览器公开为具有文章角色，因此实际上建议<article role='article'>用于此类和类似情况。

使用role =“list”和role =“listitem”的原因是什么？

2 个答案: