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?

The list role isn't really something special. In HTML it's the same thing like an ul element. Unfortunatley, I don't really understand your question. You have a list of messages and clicking on one of them positions the same message on the right? — alexander farkas
@alexanderfarkas thanks for your comment. The list only contains the sender -- clicking on it opens the full message on the right. — Elise

alexander farkas alexander farkas · Accepted Answer · 2014-02-03T18:07:00

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)

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

1 Answers