可访问 DIV table

Question

https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/table/table.html

我正在按照 W3C 提供的示例创建可访问的 DIV table。我添加了适当的角色标签和属性。

将一些单元格包裹在 div 中，破坏 table 的可访问性？

例如：注意 div 和 "testClass" 的位置。

<div role="table"
 aria-label="Students"
 aria-describedby="students_table_desc">
<div id="students_table_desc">
  Students currently enrolled in WAI-ARIA 101 for the coming semester
</div>
<div role="rowgroup">
  <div role="row">
    <span role="columnheader">
      First Name
    </span>
    <span role="columnheader">
      Last Name
    </span>
    <span role="columnheader">
      Company
    </span>
    <span role="columnheader">
      Address
    </span>
  </div>
</div>
<div role="rowgroup">
  <div role="row">
    <span role="cell">
      Fred
    </span>
    <div class="testClass">
      <span role="cell">
        Jackson
      </span>
      <span role="cell">
        Acme, Inc.
      </span>
    </div>
    <span role="cell">
      123 Broad St.
    </span>
  </div>
  <div role="row">
    <span role="cell">
      Sara
    </span>
    <span role="cell">
      James
    </span>
    <span role="cell">
      Acme, Inc.
    </span>
    <span role="cell">
      123 Broad St.
    </span>
  </div>

</div>

Answer 1

不，它不会 break.I 认为它不会坏。它认为它会工作得很好

Answer 2

使用 div（和 span）不会让屏幕阅读器有机会索引有价值的内容，因此它会被忽略，SR 会阅读文本。所以它不会破坏任何东西。

为什么不是语义table？

https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML

Answer 3

我以前使用过 ARIA tables，虽然我更喜欢使用原生 <table> 元素，但使用适当的 table 角色效果很好，只要你指定了它们（table、rowheader、columnheader、row、cell）。就像你的例子一样。为了样式目的，您将一些单元格包裹在 <div> 中这一事实没有任何区别。由于你的testClass<div>没有作用，所以会被屏幕忽略reader。

ARIA table 角色最酷的地方在于屏幕 readers 将它们视为真实的 tables 以便 ctrl+ alt+箭头键 在浏览 table.

时起作用

请注意，IE 上的 NVDA（目前）不支持 table 或 grid 角色，但它适用于常见的辅助技术 + 浏览器组合，例如：

NVDA + Firefox
大白鲨 + IE/Firefox/Chrome
旁白开启 iOS

注意：NVDA + Chrome不支持table角色，但支持grid角色。
NVDA + IE 不支持任何一个角色。

注意 2：当 table 的单元格是交互式的（如电子表格）时，应使用 grid 角色。当 table 中的单元格为静态时，应使用 table 角色。

可访问 DIV table

Accessible DIV table

html

accessibility

screen-readers

wai-aria

nvda