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