11

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

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

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

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

2 回答 2

25

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

例如：考虑将baseConcept 定义为 HTML li的role="listitem" 。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-level 属性。尽管 aria-labelledby 和 aria-owns 可以应用于基本标记的所有元素，但aria-level属性要求元素具有某种作用。由于 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 列表。

于 2012-06-21T04:48:01.973 回答
7

你的问题有点模棱两可，但如果你问添加项目是否有好处，role="listitem"已经将其作为默认角色，那么该特定问题的答案是“否”。li

（是的，li首选使用 a 而不是 a div。role="listitem"如果您使用 a ，则需要使用 a div。但我认为这并不是您要问的。）

查看Steve Faulkner 的《使用 ARIA》；他整理了一份关于何时何地在 HTML5 中使用各种 ARIA 角色的最佳实践文档草案。

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

这条规则有一些例外，它们主要关注浏览器尚未正确实现默认角色的新 HTML5 元素。因此，例如，由于 HTML5 的article元素还没有被所有浏览器公开为具有roleof article，那么<article role='article'>实际上在这种情况和类似情况下推荐使用。

于 2012-07-06T04:23:51.227 回答