跳到主要内容

可访问的数据表

数据表可能不是HTML中最令人兴奋的东西,但它们仍然是当今网络上最频繁出现的东西之一。 HTML5处理数据表的方式有一些细微的差别,所以这是一个很好的机会再看看这个网页的主力。

快速数据表概述:数据表创建行和列中保存的信息之间的关系。当您查看表格时,由于表格的布局和设计,这些关系很容易理解。如果您使用屏幕阅读器,则需要另一种方式来发现这些关系,而且(当然)是基础HTML如此重要的原因。

首先,字幕元件。 HTML5除了之外没有改变对齐属性已被弃用。它用于提供表格内容的快速表示法。

当屏幕阅读器聚焦在桌子上时,会自动读取标题。这使盲人很容易理解表中包含的内容。如果NVDA用户使用了Ť快捷键移动到示例1中的表(看可下载的文件),他们会听到'热饮消费统计'。

Headers属性仍然存在于HTML5中,但它现在可以应用于元素以及TD。它在标题和表格单元格之间创建关联。

Headers属性需要IDREF并创建一个读者可以使用的关联屏幕。的内容随着ID被屏幕阅读器公布,之前的内容使用相应的头属性。在示例2的表格中移动Alice的行,读者用户将听到“Tea 1 cup,Coffee 3 cups”。

范围属性也经历了微小的变化。它不能再适用于TDHTML5中的元素,只有。它仍然用于定义th适用的单元格范围。示例3中的表格说明了这一点。

在两个上使用headers属性TD元素更耗时,但它更具防弹性。传统的屏幕阅读器往往不能很好地发挥范围属性,所以暂时至少头/ Id关联更健壮。

最后,THEADTBODYTFOOT(此处未显示)元素仍可在HTML5中使用。不同之处在于它们的HTML4属性都不受支持。这些元素对于长数据表很有用,因为浏览器可以启用TBODY内容滚动,而离开THEADTFOOT内容可见。

应该避免使用表格,这是一种误解。幸运的是,我们已经过了表格用于布局的日子,但结构良好且设计清晰的数据表使屏幕阅读器用户可以轻松地以有意义的方式访问表格数据。

发现最好的20个线框工具适用于Creative Bloq的设计师。



翻译字数超限