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开发人员网站上查看此内容：

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

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

2 个答案: