Html 使用aria角色网格的基于列的布局

我们正在构建一个类似看板的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>

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

目前，我们的布局如下：

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

项目a1


项目b1
项目b2
项目b3


项目c1
项目c2

因此，我们有一个非车道列表，它本身就是项目列表

现在，我们正试图通过允许的方式来访问board导航。例如：

clt+alt+left

转到左侧车道中的下一个*单元格

为了做到这一点，我们研究了aria角色

grid

、

row

和

gridcell

。 但这些东西似乎只支持基于行的布局，而不支持基于列的布局。我们并没有跨越所有车道的行。理论上，每个项目都可以有任意高度

是否有类似于

专栏

的角色或解决方法来实现类似的目标

*

当然，下一步并不总是容易确定的，因为车道上可能有不同数量的项目，因此并非每个项目都有一个左邻（例如示例中的项目

b2

）

另一个解决方案是手动实现nvda的表导航快捷方式。但nvda似乎在这些按键到达浏览器和我的应用程序之前就捕捉到了它们。有办法解决这个问题吗

---

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

模拟表的ARIA角色无法指定元素应该在哪个列中。角色期望DOM类似于实际表的定义方式-基于行。因此，您必须更改列表的定义方式，使其基于行而不是基于列

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

因此，与其

项目a1


项目b1
项目b2
项目b3


项目c1
项目c2

你需要

项目a1
项目b1
项目c1



项目b2
项目c2



项目b3

然后可以使用表角色

注意：在ARIA 1.1中添加了一个新的

表

行。以前，只有

grid

可用。如果您的表格不是交互式的（即，只是静态文本），则应使用

表格

角色（和

单元格

角色）。如果您的表是交互式的，如电子表格中有可编辑的单元格，则应使用

grid

角色（和

gridcell

角色）。即使您可以通过单击链接与表格“交互”，在表格单元格中设置链接也不被视为交互。我用“交互式”这个词来表示单元格是可编辑的

第a1项
项目b1
项目c1



第b2项
第c2项



第b3项

此外，如果您要定义一个表，那么实际上也应该有列标题。列标题可以包含在

role=“row”

或

role=“rowgroup”

中。

rowgroup

类似于拥有一个

，但是

rowgroup

当前不会向屏幕阅读器传递任何额外的语义信息。我之所以使用它，是因为它帮助我的列标题在代码中脱颖而出

要做什么
在制品（2）
完成


第a1项
项目b1
项目c1



第b2项
第c2项



第b3项

仅我的两分钱与主要问题没有直接关系，但我认为这可能会有所帮助：您的代码不会在w3c验证器中进行验证，如

1） ul元素只允许li或脚本支持元素，如脚本或模板（如之前@unor在其注释中所述）。您不应将ul用作ul的直接子级。这是验证程序在这种情况下发出的消息：

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

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

错误：元素ul上的属性角色的值表不正确

例如，您可以在Mozilla开发者网站上查看：

或者在堆栈溢出主题中讨论此问题：

但在您的情况下，如果您将外部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>

项目a1


项目b1
项目b2
我