带有 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 转到左侧车道中的下一个* 单元格。

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

是否有类似column 角色或解决方法来实现类似的事情？

* 当然 next 并不总是很容易确定，因为车道可以有不同数量的项目，所以不是每个项目都有左邻居（例如示例中的项目 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 开发者网站上查看：

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 不能与角色网格或表格一起使用，因为这似乎是许多人认为很自然的东西，将网格视为行列表。很难有语义：/