html - 可访问的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当表格中的单元格为静态时，应使用角色。