可访问的 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 不支持任何一个角色。

Note2：当表格的单元格是交互式的（如电子表格）时，应使用

grid

角色。 当表格中的单元格是静态时，应使用

table

角色。

Answer 2

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

为什么不用语义表？

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

Answer 3

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