Question

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

我正在关注W3C提供的用于创建可访问DIV表的示例。我已经添加了适当的角色标记和属性。

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

例如：注意div与＆＃34; testClass＆＃34;被放置了。

<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，{{ 1}}，rowheader，columnheader，row）。就像你的例子一样。事实上，为了样式目的，你有一些单元格包裹在cell中没有任何区别。由于您的<div> testClass没有角色，因此屏幕阅读器会忽略它。

关于ARIA表角色的一个很酷的事情是屏幕阅读器将它们视为真实表格，以便 ctrl + alt + 箭头键工作在桌子上航行时。

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

NVDA + Firefox
JAWS + IE / Firefox / Chrome
iOS上的VoiceOver

注意：NVDA + Chrome不支持grid角色，但它确实支持table角色。
NVDA + IE不支持这两种角色。

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

Answer 2

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

Answer 3

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

为什么不使用语义表？

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

可访问的DIV表

3 个答案: