display:table对一些屏幕阅读器有语义影响

讨论这个话题的前提是我们直接无视IE6/IE7浏览器,查看浏览器支持情况。有时,我们希望使用HTML table的布局属性,但又不想使用table的语义,因为我们不是用来处理表格数据(tabular data)。比如:

  • 创建等高列;
  • 实现大小不确定元素的垂直居中;
  • 容器内子项目数目未知,子项目平均分配容器的水平空间;

查看应用实例demo页

这种情况下,你可以为html元素使用css定义display:table, display:table-row, display:table-cell来达到目的。同时也不会破坏我们的结构,标签选用符合语义化要求。

display:table和屏幕阅读器

使用css改变一个元素的display属性不会改变HTML的底层语义。从逻辑上讲,display:table不应该使屏幕阅读器把css表格看作真正的表格。

456 berea street最近做了一个测试,测试屏幕阅读器在不同浏览器下如何对待css 表格,在此基础上我又添加了测试内容,下面是结果摘要:

NVDA + IE:不会将css表格读为“表格”。
NVDA + chrome:不会将css表格读为“表格”。
NVDA + Firefox:原作者认为除只含有一个单元格的表格外,css表格会被读为“表格”。我的测试结果是:只有多行多列的情况下,才会读为“表格”,单行多列,单行单列均不会读作“表格”。
VoiceOver:不会将 css 表格读为“表格”。
ORCA:在页面中进行表格导航时,会将所有的css表格读为“表格”。

这是 display:table 测试页面,如有兴趣,自己可试一下。

另外有读者测试了Window-Eyes 和 JAWS在IE和Firefox下的表现,均不会把css表格作为“表格”对待。

综上所述,使用display:table来实现我们前面提到的例子,只要不是模拟“多行多列”的情况,就基本没有问题。

《display:table对一些屏幕阅读器有语义影响》有3个想法

  1. 能请教下,除了文章介绍的方面,display:table还有其他的影响吗(比如布局上面)?谢谢
    ps:刚刚自己试了下,好像没有差别,但是不知道在一些复杂的布局里面会不会有问题。

    1. 文章的最后总结中有写,只要不是模拟“多行多列”的情况就基本没有影响。

发表评论