基于aria角色网格的列布局
我们正在构建一个类似kanban的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>所以我们有一张列在车道外的清单，它们本身就是物品清单。
现在，我们正在尝试通过允许来自nvda的表格导航来实现板导航。clt+alt+left走到左边车道上的下一个牢房。
为了做到这一点，我们研究了咏叹调角色grid，row和gridcell。但看起来，这些东西只支持基于行的布局，而不支持基于列的布局。我们并没有跨越所有车道的一排排。理论上，每个项目都可以有任意高度。
是否有类似于column角色或解决方案来实现类似的事情？
当然，*下一步并不总是那么容易确定，因为车道可以有不同数量的项目，所以不是每个项目都有一个左邻居(例如。(示例中的项目b2 )
另一种解决方案是手动实现nvda的表格导航快捷键。但是，nvda似乎在这些击键到达浏览器和我的应用程序之前就捕捉到了它们。有什么办法可以绕开吗？
第三种解决方案是使用与nvda类似的快捷方式。但我们希望避免这种情况。
回答 2
Stack Overflow用户
发布于 2018-04-24 18:49:37
模拟表的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>然后就可以使用表角色了。
注意:在ARIA1.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>Stack Overflow用户
发布于 2019-04-16 12:29:38
只是我的两分钱与主要问题没有直接关系，但我认为这是有帮助的:您的代码不会在w3c验证器(如https://validator.w3.org )中进行验证。
1) ul元素只允许li或脚本支持的元素，如脚本或模板(正如先前@unor在其注释中所述)。您不应该使用ul作为ul的直接子级。这是验证器在本例中发出的消息：
元素ul的内容模型:0或多个li和支持脚本的元素。
2) ul元素不能具有角色网格或表。我不知道为什么，因为这似乎是合理的，但严格地说，他们不能。这是验证器会出现的错误：
错误:元素ul上属性角色的坏值表。
例如，您可以在网站上查看这一点：
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
或者有些人在这个堆栈溢出主题中谈到了这一点：
但在您的情况下，如果您将外部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不能与角色网格或表一起使用，因为许多人似乎认为网格是一行列表，这是很自然的。它很难是语义的:/
https://stackoverflow.com/questions/50003897
复制相似问题
腾讯云开发者
