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

is actually recommended in that and similar cases.