The reason to use role="list" and role="listitem"?

Question

Are there any benefits 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 have the same meaning to assistive technologies?

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

Answer 1

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.