使用角色=“列表”的原因和role =“listitem”？ [英] The reason to use role="list" and role="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> 
  

解决方案

答案是肯定的，语义标记用于构建文档。如果它是一个简单的静态列表，那么就不需要用角色标记它们。

例如：考虑 role =listitem，其baseConcept被定义为HTML li。 baseConcept HTML li与role =listitem定义几乎完全相同，只是它不会继承任何属性。更多信息

因此，请考虑以下示例：

 < h3 id =header> Vegetables< ; / H3> 
 
< li role =listitemaria-level =3>胡萝卜< / li> 
< li role =listitemaria-level =3>番茄< / li> 
< li role =listitemaria-level =3>生菜< / li> 
< / ul> 
 ... 
< div role =listitemid =external_listitem>芦笋< / div> 
  

这里页面作者想要为li使用aria-level属性。尽管aria-labelledby和aria-owns可以应用于基本标记的所有元素，属性要求元素有一定的作用。由于ARIA规范使用Web本体语言（OWL）来表示类层次结构中的角色。 OWL将这些角色描述为类以及它们的状态和属性。因此，为了使用咏叹调级别，该元素必须被定义为简单的HTML，li不会继承任何属性或限制。一旦将角色标记为listitem，它就要求listitem由具有role =list的元素拥有。所以你最终都会使用这两种角色。另一方面，如果语义标记也不被使用，角色也很有用。

例如：

 < div role =list> 
< div role =listitem>狗< / div> 
< div role =listitem> cat< / div> 
< div role =listitem> sparrow< / div> 
< div role =listitem>狼！！< / div> 
< / div> 
  

这里屏幕阅读器软件会将ARIA列表（由div组成）指定为任何其他常规HTML列表。

Is there any benefit of using the following code?

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

Does the following code has the same meaning to assistive technologies?

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

解决方案

The answer is yes, assistive technologies work well when correct semantic markup is used for structuring the document. If it is a simple static list then there is no need to mark them with the roles.

For example: Consider the role="listitem" whose baseConcept is defined as HTML li. And the baseConcept HTML li is almost identical to the role="listitem" definition except for the fact that it does not inherit any properties. More info

Thus, consider the following example:

<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>

Here the page author wants to use aria-level property for the li. Even though aria-labelledby and aria-owns can be applied to all elements of base markup, aria-level property requires that the element have some role. Since ARIA spec uses Web Ontology Language (OWL) to represent the roles in a class hierarchy. OWL describes these roles as classes along with their states and properties. So inorder to use a aria-level the element has to be defined some role as plain HTML li will not inherit any properties or limitations. Once you mark the role as listitem it requires that listitem be owned by an element with role="list". So you end up using both the roles.

On the other hand roles are also useful if semantic markup is also not used. For example:

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

Here the screen reader software will indicate the ARIA list (made up of divs) as any other normal HTML list.

这篇关于使用角色=“列表”的原因和role =“listitem”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！