Reason for using role = "list" and role = "listitem"?

Question

Can the following code be used?

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

Does the following code have the same meaning for assistive technology?

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

Answer 1

Answer: yes, assistive technologies work well when proper semantic markup is used to structure the document. If this is a simple static list, there is no need to mark them with roles.

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

So, 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 the aria-level property for li. Although aria-labelledby and aria-owns can be applied to all elements of the basic markup, the aria-level property requires the element to have a role. Because the ARIA specification uses the Web Ontology Language (OWL) to represent roles in the class hierarchy. OWL describes these roles as classes along with their states and properties. Therefore, to use the aria level, an element must be defined as some role, since simple HTML li does not inherit any properties or restrictions. After you mark the role as listitem, the element with the role = "list" will belong to this listitem. That way you end up using both roles.

Roles, on the other hand, are also useful if semantic markup is also not used. For instance:

 <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 will display an ARIA list (consisting of a div) like any other regular HTML list.

Answer 2

You ask the question a little ambiguously, but if you ask if there is an advantage to adding a role = "listitem" to li elements that already have this as a default role, then the answer to this specific question is: None.

(Yes, using li is preferable to a div. And role = "listitem" is necessary if you start with a div, although li is preferable, but I don't think this is what you are asking for.)

Check out this blog post from Steve Faulkner ; he put together a draft best practice document on when and where to use the various ARIA roles in HTML5. The document is currently here , but since this is an unofficial project, I don’t know if this link will work in the future.

Generally speaking, you do not (and should not) specify a role for elements if this role is the same as the default element role. Since li elements have a default listitem role, there is no reason to repeat this.

There are some exceptions to this rule, and they are mainly related to the new HTML5 elements, which browsers do not yet properly perform default roles. So, for example, since the HTML5 article element is not yet open to all browsers as having the article role, then <article role='article'> really recommended in this and similar cases.