Question

根据http://www.w3.org/TR/wai-aria/roles#list，list角色应该用于“一组非交互式列表项”。我该如何解释非交互式？

我的应用程序中有一个页面，左边是一个消息列表，点击每个消息会在右侧显示消息。因此，该列表是交互式的，因为它充当链接列表，但这是否足以成为不在其上使用list和listitem角色的理由？

Answer 1

您可以使用多种方式执行此操作。在大多数情况下，请记住ARIA，对于特定任务，使用角色a或角色b并非100％重要。更重要的是，如果您选择一个角色，则每个交互都会实现角色所说的。对于大多数HTML标记（h1，ul等），您将描述内容的语义。使用ARIA，您将描述如何与内容进行交互。（在本机HTML锚元素或表单元素中）。

最简单的方法如下：

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

上面的列表等同于以下ARIA角色：

<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>

非交互式只是意味着没有实现特殊的键盘交互。

如果您想进行更好的互动，可以选择角色工具栏：

<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>

但是使用role =“toolbar”，重要的是，您可以使用漫游tabindex编写孔键盘交互的脚本，等等。（见example）

如果您有链接/按钮列表。链接/按钮已经说明了它是可点击的（交互式的）。

这两个列表都很相似。

更重要的问题如下。你想如何让洞信息本身可以访问？要回答这个问题，你需要回答，消息包含a）只有简单的文本（没有或非常小的结构），b）更长的结构化“文档”内容（意思是标题，段落，列表）或c）小部件/表单内容（链接，表单元素或JS UI小部件）。（d）b和c）之间的混合

对于消息列表，什么是合适的ARIA角色？

1 个答案: