我可以加强与JavaScript的复杂的表无障碍?

问题描述 投票:2回答:1

一个网站具有复杂信息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>

由于种种原因,服务器端和手工编码解决方案都出来了。如果我使用JavaScript应用于建议WAI修复("use id and headers attributes to associate header and data cells explicitly")来增强HTML,这将能够可靠地体现在哪些用户在屏幕阅读器实际上得到?

使用ARIA Live Regions似乎将不必要它们更新为变化的主机。因此,理想情况下,可以在不这项工作?

javascript html accessibility wai-aria
1个回答
1
投票

简短的回答是“是”。在一般(*),你通过JavaScript应用任何属性,ARIA属性是否或任何其他HTML属性,将提供给屏幕阅读器。

(*)有(至少)一个例外,据我所知,aria-live的。在有些情况下该属性具有当页面以加载它的兑现元素上存在的浏览器和屏幕阅读器组合。你在你的问题中提到aria-live但该属性并没有真正发挥作用,除非你正在更新到您的网页dyanamically(例如,如果你的表头文件改变了基于某个用户操作)。

我要展示一些示例代码,让系统根据您的代码片段所期望的结果,但你的例子是有点混乱。你有一个“标题为次区域的”跨越所有列。在视觉上,它看起来更像是比它列标题的表的标题/摘要。你能澄清?表格标题不应该被编码为标题( <TH> )。

你想“报头为:分区”应该被理解成列标题的每一个细胞?

© www.soinside.com 2019 - 2024. All rights reserved.