可访问的 DIV 表

Question

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

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

将某些单元格包装在 div 中会破坏表格的可访问性吗？

例如：注意带有“testClass”的div的放置位置。

<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

我之前使用过 ARIA 表格，虽然我更喜欢使用原生 <table> 元素，但只要您指定了所有表格角色（table、rowheader、columnheader、 row，cell)。就像你的例子一样。出于样式目的，您将一些单元格包裹在 <div> 中这一事实没有什么区别。由于您的 testClass <div> 没有角色，因此屏幕阅读器将忽略它。

ARIA 表格角色的酷之处在于屏幕阅读器将它们视为真实表格，以便 ctrl+alt+箭头键 工作在表格中导航时。

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

• NVDA + 火狐
• JAWS + IE/Firefox/Chrome
• iOS 上的旁白

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

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

Answer 2

不，它不会坏。我认为它不会坏。它认为它会工作得很好

Answer 3

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

为什么不用语义表？

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