我可以使用 JavaScript 增强复杂的 table 可访问性吗？

Question

一个网站有大量复杂的信息tables with multi-level headers，一个简单的版本是：

table { border: 1px solid black; border-collapse:collapse; width: 100%; }
td, th { border: 1px solid black; }
th { background-color: lightgray; }

<!-- simplified table -->
<table>
  <thead>
    <tr><th></th><th>Col 1</th><th>Col 2</th></tr>
  </thead>
  <tbody>
    <tr><th>Row 1</th><td>Foo</td><td>Bar</td></tr>
    <tr><th colspan="3">Header for subregion</th></tr>
    <tr><th>Row 2</th><td>Foo</td><td>Bar</td></tr>
    <tr><th>Row 3</th><td>Foo</td><td>Bar</td></tr>
  </tbody>
</table>

由于各种原因，服务器端和手工编码的解决方案已经过时。如果我使用应用建议的 WAI 修复程序 ("use id and headers attributes to associate header and data cells explicitly") 的 JavaScript 来增强 HTML，这是否会可靠地反映在用户在屏幕 reader 中实际获得的内容中？

使用 ARIA Live Regions 似乎会不必要地更新它们以进行大量更改。那么，理想情况下，如果没有它，它可以工作吗？

Answer 1

简短的回答是 "yes"。一般来说 (*)，您通过 javascript 应用的任何属性，无论是 ARIA 属性还是任何其他 html 属性，都将可用于屏幕 readers。

(*) 我知道（至少）有一个例外，aria-live。有浏览器和屏幕 reader 组合，当页面加载时，该属性必须存在于元素上才能被接受。您在问题中提到了 aria-live，但该属性并没有真正发挥作用，除非您动态地更新您的页面（例如，如果您 table header s changed based on some用户操作）。

我打算根据您的代码片段展示一些示例代码以显示所需的结果，但您的示例有点令人困惑。您有一个跨越所有列的 "Header for subregion"。在视觉上，它看起来更像是 table 的 caption/summary 而不是 header 列。你能澄清一下吗？ Table 字幕应 而不是 编码为 headers ().

是否要将 "Header for subregion" 读作每个单元格的 header 列？

我可以使用 JavaScript 增强复杂的 table 可访问性吗？

Can I enhance complex table accessibility with JavaScript?

html

javascript

accessibility

wai-aria