javascript - 我可以使用 JavaScript 增强复杂表格的可访问性吗？

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，这是否会可靠地反射(reflect)在用户在屏幕阅读器中实际获得的内容中？

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

Answer 1

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

(*) 我知道(至少)有一个异常(exception)，aria-live .有浏览器和屏幕阅读器的组合，当页面加载时，该属性必须存在于元素上才能被接受。您在问题中提到了 aria-live 但该属性并没有真正发挥作用，除非您对页面进行动态更新(例如，如果您的表标题根据某些用户操作而更改)。

我打算根据您的代码片段展示一些示例代码以显示所需的结果，但您的示例有点令人困惑。您有一个跨越所有列的“子区域标题”。在视觉上，它看起来更像是表格的标题/摘要，而不是列标题。你能澄清一下吗？表格标题不应编码为标题 ( )。

是否要将“Header for subregion”读取为每个单元格的列标题？