WebAIM -考虑网页的可访问性

创建可访问表万博体育官网网址
数据表

标记数据表

数据表的目的是在一个网格或矩阵中显示表格信息,并使用列或行显示网格中信息的含义。有视力的用户可以直观地扫描表。它们可以快速地在表中的数据与其相应的行和/或列标题之间建立可视化的关联。不能看到表的人无法创建这些可视化关联,因此必须使用适当的标记在表中的元素之间创建编程关联。当适当的HTML标记就绪时,屏幕阅读器的用户可以在数据表中一次导航一个单元格,并且他们将听到对他们说的列和行标题。

表标题

数据表通常在表的前面或后面有简短的描述性文本,以指示该表的内容。属性将此文本关联到其各自的表<标题>元素。的<标题>元素必须是开幕后的第一件事<表>标签。

<表>
<标题>雪莱的女儿< /标题>

虽然不是每个表都必须有标题,但是标题通常是非常有用的。如果存在,则应该使用属性关联到表<标题>元素。

标识行标题和列标题

创建可访问数据表的一个关键步骤是指定行和/或列标题。万博体育官网网址在标记中,< td >元素用于表数据单元格和< th >元素用于表标题单元格。回到我们最初的数据表示例,该表的列标题是的名字,年龄,生日。行标头是杰基贝丝。还要注意相关的标题。

雪莱的女儿< /标题>
的名字 年龄 生日
杰基 5 4月5日
贝丝 8 1月14日

表标头不能为空。对于某些表的左上角单元格,这一点尤其值得关注

将数据单元格与适当的标头关联

现在我们已经创建了标题,我们需要将数据单元格与适当的标题关联起来。

范围属性

scope属性标识表标头是列标头还是行标头。下面是表的标记,使用范围属性:

<表>
<标题>雪莱的女儿> < /标题

< tr >
< th范围=“上校”> < / th >名称
< th范围=“上校”年龄> < / th >
< th范围=“上校”> < / th >生日
< / tr >

< tr >
< th范围= "行">杰基< / th >
< td > 5道明> < /
4月5日< td > < / td >
< / tr >

< tr >
< th范围= "行"贝思> < / th >
< td > 8道明> < /
< td > 1月14日道明> < /
< / tr >

表> < /

范围属性告诉浏览器和屏幕阅读器,与标题相关联的列中的所有内容与范围=“上校”在那一列,和那一个单元格范围= "行"是该行中所有单元格的标题。

所有< th >元素通常应该始终具有范围属性。虽然屏幕阅读器可以根据表布局正确猜测标题是列标题还是行标题,但分配范围可以使这一点更加明确。

张成的头

范围将适用于即使表具有多层标题的复杂表(例如在跨单元格中)。表标头的作用域将应用于该标头所跨越的所有单元格。

雪莱的女儿< /标题>
的名字 年龄 生日
出生在 杰基 5 4月5日
贝丝 8 1月14日
通过婚姻 贝丝 8 1月14日

在本例中,“by birth”行标头的范围为row,名称的标头也是如此。显示Jackie年龄的单元格将有3个标题——一个列标题(“age”)和两个行标题(“by birth”和“Jackie”)。屏幕阅读器将识别所有这些内容,包括数据单元格内容(例如,它可能读取“by birth”。杰基。年龄。5。”)。

请注意

尽管多年来一直是表的标准标记,但一些屏幕阅读器仍然不完全支持具有跨界或多层行和/或列标题的复杂表。在可能的情况下,尝试“平化”表格,避免跨越单元格和多层标题单元格。

id属性

关联数据单元格和标题的另一种方法是使用id属性。这种方法一般不推荐,因为范围对于大多数表来说,即使表很复杂,有多层表头,通常也足够了。

在非常复杂的表中范围可能导致表标头应用于(或有一个范围)不与该标头关联的单元格,那么id可以使用。在这些情况下,whileid可能使表在技术上可访问,如果要读取多层的行和/或列标题,那么屏幕阅万博体育官网网址读器用户在功能上可能无法访问或理解。

使用这种方法,每个< th >被分配一个唯一的id属性值。然后,每一个< td >表中的单元格是给定的属性的值与每个匹配< th > id与单元格关联的值。这些值用空格隔开,并且应该按照屏幕阅读器读取它们的顺序列出。如果在上面的例子中使用了header /id,那么Jackie的年龄单元格可能被标记为5)。

同样,需要强调的是,这种方法更复杂,使用更多标记(和可能被破坏的可能性),而且很少是必要的(使用范围)。

使用比例调整,而不是绝对调整

适用于布局表的规则也适用于数据表。尽可能让浏览器窗口决定表格的宽度,以减少那些视力较低的人需要的水平滚动。如果需要定义单元格宽度,请使用相对值,如百分比,而不是像素值。通常应该避免定义的单元格高度,这样单元格就可以向下扩展以适应其内容——这对于可能放大文本内容的低视力用户特别有用。

其他表标记

总结

总结的属性<表>标记可用于提供数据表结构的摘要(而不是内容)。对摘要的支持各不相同,但一般来说,它是特定于屏幕阅读器的(其他人不能访问它),并且没有得到很好的支持。万博体育官网网址此外,总结属性不是HTML5规范的一部分。一般来说,如果一个表格非常复杂,需要解释它是如何构造的,那么它可能不是很容易访问的,应该简化它。万博体育官网网址由于这些原因,我们不建议使用summary。如果使用了它,那么它绝对不能用于布局表。

头,脚,和身体

theadtfoot元素定义表的页眉和页脚行。它们没有提供可访问性功能,通常只在打印长表格时使用——头行和/或脚行将在每个打印页面的顶部或底部重复出现。类似地,tbody元素定义了数据表的主体内容(意味着除了头或脚以外的任何内容)。同样,这个元素没有提供任何额外的可访问性好处,但是将它用于表样式或其他原因也没有害处。