基于列的布局与aria角色网格

Question

我们正在构建类似看板的Web应用程序，看起来像这样：

所以我们有泳道，里面有物品。

目前我们有这样的布局：

<ul>
    <ul class="swimlane">
        <li>Item a1</li>
    </ul>
    <ul class="swimlane">
        <li>Item b1</li>
        <li>Item b2</li>
        <li>Item b3</li>
    </ul>
    <ul class="swimlane">
        <li>Item c1</li>
        <li>Item c2</li>
    </ul>
</ul>

所以我们有一个关闭项目列表的列表。

现在我们试图通过允许table navigation from nvda来实现电路板导航。例如：clt+alt+left进入左侧车道的下一个*单元格。

为了做到这一点，我们看了咏叹调角色grid，row和gridcell。但看起来，这些东西只支持基于行的布局，而不支持基于列的布局。我们实际上没有跨越所有车道的行。理论上，每个项目都可以有任意高度。

有没有像column角色或解决方法来实现类似的东西？

*当然接下来并不总是很容易确定，因为车道可以有不同数量的项目，所以不是每个项目都有一个左邻居（例如项目中的b2项目）

另一种解决方案是手动实现nvda的表导航快捷方式。但似乎nvda在它们到达浏览器和我的应用程序之前捕获这些击键。那会有办法吗？

第三种解决方案是使用与nvda类似的快捷方式。但我们想避免这种情况。

Answer 1

模仿表的ARIA角色没有办法指定元素应该在哪个列中。角色期望DOM与真实表的定义方式类似 - 基于行。因此，您必须更改列表的定义方式，以便它们基于行而不是基于列。

（注意：您的图片与您的代码示例不符。下面的示例是引用您的代码示例。）

所以没有

<ul>
    <ul class="swimlane">
        <li>Item a1</li>
    </ul>
    <ul class="swimlane">
        <li>Item b1</li>
        <li>Item b2</li>
        <li>Item b3</li>
    </ul>
    <ul class="swimlane">
        <li>Item c1</li>
        <li>Item c2</li>
    </ul>
</ul>

你需要

<ul>
    <ul>
        <li>Item a1</li>
        <li>Item b1</li>
        <li>Item c1</li>
    </ul>
    <ul>
        <li></li>
        <li>Item b2</li>
        <li>Item c2</li>
    </ul>
    <ul>
        <li></li>
        <li>Item b3</li>
        <li></li>
    </ul>
</ul>

然后你可以使用表角色。

注意：ARIA 1.1中添加了一个新的table行。以前，只有grid可用。如果你的表不是交互式的（即只是静态文本），那么应该使用table角色（和cell角色）。如果您的表是交互式的，例如具有可以编辑的单元格的电子表格，则应使用grid角色（和gridcell角色）。即使您可以通过单击链接与表“交互”，在表格单元格中具有链接也不会被视为交互式。我使用“交互式”这个词来表示单元格是可编辑的。

<ul role="table">
    <ul role="row">
        <li role="cell">Item a1</li>
        <li role="cell">Item b1</li>
        <li role="cell">Item c1</li>
    </ul>
    <ul role="row">
        <li role="cell"></li>
        <li role="cell">Item b2</li>
        <li role="cell">Item c2</li>
    </ul>
    <ul role="row">
        <li role="cell"></li>
        <li role="cell">Item b3</li>
        <li role="cell"></li>
    </ul>
</ul>

另外，如果要定义表，那么您确实应该有列标题。列标题可以包含在role="row"或role="rowgroup"中。 rowgroup类似于有<thead>但rowgroup目前没有向屏幕阅读器传递任何额外的语义信息。我使用它是因为它有助于我的列标题在代码中脱颖而出。

<ul role="table">
    <ul role="rowgroup">
        <li role="columnheader">To Do</li>
        <li role="columnheader">WIP (2)</li>
        <li role="columnheader">Done</li>
    </ul>
    <ul role="row">
        <li role="cell">Item a1</li>
        <li role="cell">Item b1</li>
        <li role="cell">Item c1</li>
    </ul>
    <ul role="row">
        <li role="cell"></li>
        <li role="cell">Item b2</li>
        <li role="cell">Item c2</li>
    </ul>
    <ul role="row">
        <li role="cell"></li>
        <li role="cell">Item b3</li>
        <li role="cell"></li>
    </ul>
</ul>

Answer 2

只是我的两分钱与主要问题没有直接关系，但我认为可能会有所帮助：你的代码不会在像https://validator.w3.org这样的w3c验证器中验证

1）ul元素只允许li或脚本支持元素，如脚本或模板（如之前的注释中的@unor状态）。你不应该使用ul作为ul的直接子。这是验证器在这种情况下引发的消息：

元素ul的内容模型：零个或多个li和脚本支持元素。

2）ul元素不能有角色网格或表格。我不知道为什么，因为它看似合理，但严格说话，他们不能。这是验证器将出现的错误：

错误：元素ul上属性角色的值表错误。

您可以在Mozilla Developer网站上查看此内容：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

或者在这个堆栈溢出主题中谈论这个：

HTML5 nav element vs. role="navigation"

但在您的情况下，如果您将外部ul更改为div，它将验证：

<div role="grid">
    <ul class="swimlane">
        <li>Item a1</li>
    </ul>
    <ul class="swimlane">
        <li>Item b1</li>
        <li>Item b2</li>
        <li>Item b3</li>
    </ul>
    <ul class="swimlane">
        <li>Item c1</li>
        <li>Item c2</li>
    </ul>
</div>

虽然有一个ul元素列表，你应该更好地使用div中的列表：

<div role="grid">
 <ul>
  <li>
    <ul class="swimlane">
        <li>Item a1</li>
    </ul>
   </li>
   <li>
    <ul class="swimlane">
        <li>Item b1</li>
        <li>Item b2</li>
        <li>Item b3</li>
    </ul>
   </li>
   <li>
    <ul class="swimlane">
        <li>Item c1</li>
        <li>Item c2</li>
    </ul>
   </li>
</div>

也许是过于冗长的标记，我想知道ul不能与角色网格或表格一起使用的原因，因为它看起来很多人认为是自然的，将网格视为行列表。语义很难：/