What is a suitable ARIA role for a list of messages?

Question

According to http://www.w3.org/TR/wai-aria/roles#list, the list role should be used for "A group of non-interactive list items". How should I interpret non-interactive here?

I havea page in my application where on the left, there is a list of messages, and clicking on each will bring up the message on the right. So, the list is interactive in the sense that it acts as a list of links, but is it enough a reason not to use the list and listitem roles on it?

Answer 1

You could use multiple ways to do this then. Keep in mind with ARIA in most cases it is not 100% important wether you use role a or role b for a specific task. It is more important, that if you choose one role every interaction is implented how the role says. With most HTML markup (h1, ul and so on) you are describing the semantics of the content. With ARIA you are describing how interaction with the content is possible. (In native HTML anchor element or form elements).

The simplest way to do this is the following:

<ul>
    <li><button type="button">message A</button></li>
    <li><button type="button">message B</button></li>
</ul>

The list above equlas the following ARIA roles:

<span role="list">
    <span role="listitem"><span role="button" tabindex="0">message A</span></span>
    <span role="listitem"><span role="button" tabindex="0">message B</span></span>
</span>

Non interactive simply means, that there is no special keyboard interaction implemented.

In case you want to do some nicer interaction, you could choose the role toolbar to this:

<ul role="toolbar">
    <li role="presentation"><button type="button" tabindex="0">message A</button></li>
    <li role="presentation"><button type="button" tabindex="-1">message B</button></li>
</ul>

But with role="toolbar" it is important, that you script the hole keyboard interaction with roaming tabindex and so on. (see example)

If you have a list of links/buttons. The link/button already says, that it is clickable (interactive).

Both list are similiar.

The more important question is the following. How do you want to make the hole message itself being accessible? To answer this question you need to answer, wether the message contains a) only simple text (with none or very small structure), b) longer structured "document" content (meaning headlines, paragraphs, lists) or c) widget/form content (links, form elements or JS UI widgets). (d) a mix between b and c)