目标:可访问性
目标屏幕阅读器:JAWS和NVDA
我正在将role="grid"
添加到项目列表中。网格中的每一行都包含一些表示项目名称、描述等的网格单元格。我无法将标记更改为使用表,所以这就是我使用role="grid"
的原因。
我的问题第一个问题:
在我工作的上下文中,我可以更容易地向每个网格单元添加可视隐藏的页眉,而不是向每个列都有列页眉的网格中添加单独的行是否可以用标题标记每个网格单元格,而不是创建一行列标题(role="columnheader"
)?这将如何影响屏幕阅读器的可访问性水平?用户是否总是希望网格具有列标题?
我的第二个问题:
我想包括一些不在我用role="grid"
标记为网格行的容器中的内容。是否可以将网格容器外的内容与网格关联为网格行?
注意:请记住,更改标记不是一个选项,因此诸如";将其构建为表";对这里没有帮助。
谢谢!
我无法更改标记以使用表,所以这就是我使用role="网格";。
如果您可以在代码中指定role="grid"
,那么您似乎可以指定role="table"
。有什么不可能的原因吗?我之所以这么问,是因为网格应该保留给可以编辑实际单元格内容的时候,有点像电子表格。一个单元格中有一个交互式元素,这并不意味着它应该是一个网格。所以我的第一个建议是使用role="table"
。
然而,当您有一组可以导航到每个";事物;使用箭头键。
我猜你已经读过网格的规范了。
对我来说,向每个网格单元添加一个视觉隐藏的标题比向每个列都有列标题的网格添加一个单独的行更容易是否可以用标题标记每个网格单元格,而不是创建一行列标题
虽然可以做到这一点,但您将错过真正的列和行标题的一些好处。有了基本的<table>
,对于屏幕阅读器等辅助技术用户来说,同时拥有<th scope="col">
和<th scope="row">
非常有帮助。后者经常被忽视。
想象一下自己在一张大桌子中间。很多行和列。您知道表中单元格的当前值,因为屏幕阅读器刚刚宣布了它。现在您想向下导航一个单元格。如果没有行标题,则不会听到下一个单元格值的任何上下文。如果要向左或向右导航一个单元格,如果没有列标题,则不会听到下一个单元格值的任何上下文。
如果将列标题硬编码为可视隐藏元素,则将始终听到为单元格宣布的列标题,即使您垂直向下导航列也是如此。对于屏幕阅读器用户来说,这将是出乎意料的行为。只有当您在一行中水平导航,而不是在一列中垂直向下导航时,才应宣布列标题。当您垂直导航时,应该公布行标题。
我不想在这里说得太苛刻,但我认为你需要回到你的声明:
这对我来说更容易
并决定编码的易用性是否比最终用户体验更重要。
如果由于技术原因,您不能使用列和行标题,因为您使用的库不允许或其他原因,那么作为最后的手段,您可以尝试使用视觉隐藏元素对其进行编码,但我不建议将其作为首选。
我想包括一些不在我用role="标记的容器中的内容;网格";作为网格行。
这有点棘手。aria-owns
属性正是您所需要的,但通常在父元素无法通过普通DOM嵌套拥有子元素时使用。在您的情况下,听起来大多数元素都是根据DOM嵌套的,但您也会有DOM之外的东西。
棘手的部分是当你把两者混合在一起的时候。如规范所示:
如果一个元素同时具有aria owns和DOM子元素,则子元素相对于父/子关系的顺序是首先是DOM子元素的顺序,然后是aria中引用的元素的顺序。
因此,如果首先公布字面DOM子级,然后再公布aria-owns
子级,您可能会得到一些奇怪的阅读顺序。绝对值得一试。您可能需要在每一行上放置一个ID,包括表外的内容,然后在表的aria-owns
中使用所有这些ID,即使大多数行都是";自然地";由于DOM而由表拥有。