The reason to use role=“list” and role=“listitem”?

Question

Are there any benefits of using the following code?

Answer 1

You question is a bit ambiguous, but if you are asking whether there's a benefit to adding role="listitem" to li items, which already have that as their default role, then the answer to that specific question is 'No.'

(Yes, the use of a li is preferred instead of a div. And role="listitem" is needed if you were using a div. But I don't think that's quite what you are asking.)

Check out Using ARIA by Steve Faulkner; he's put together a draft best-practices document on when and where to use the various ARIA roles in HTML5.

Generally speaking, you don't need to (and shouldn't) specify a role for elements if that role is the same as the element's default role. So since li elements have a default role of listitem, there's no reason to restate that.

There are some exceptions to this rule, and they're mostly concerned with new HTML5 elements that browsers have not yet correctly implemented default roles for. So, for example, since HTML5's article element isn't yet exposed by all browsers as having a role of article, then <article role='article'> is actually recommended in that and similar cases.

Answer 2

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.