Avoiding list role in favour of more accessible semantic elements

[trichoplax]

We currently use the list role in HTML, such as <div role="list"> in line 68 of app/views/comment_threads/_expanded.html.erb. I would like to see it eliminated from our codebase, and ideally to have a rule in our Code Standards to prevent it returning.

Some ARIA roles provide accessibility that HTML does not otherwise support, and I am very much in favour of using them. However, the list role is a substitute for using ordered list (ol) or unordered list (ul) semantic HTML elements. It does not specify ordered or unordered, so provides less information to assistive technologies such as screen readers. It is a compromise intended to allow improving accessibility where the semantic elements cannot be used. Since we have complete control over the source code, the semantic elements can always be used, so we should never have a reason to compromise on accessibility by using this substitute.

From the MDN page for the list role:

Best practices

Only use role="list" and role="listitem" if you have to — for example if you don't have control over your HTML but are able to improve accessibility dynamically after the fact with JavaScript.

Wherever we use the list role, it will be in one of the following cases:

• An ordered list, in which case we should use ol instead.
• An unordered list, in which case we should use ul instead.
• Not a list, in which case we should not be misleading assistive technologies by labeling something as a list which we do not present to other browsers as a list.