标签归档:屏幕阅读器测试

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来实现我们前面提到的例子,只要不是模拟“多行多列”的情况,就基本没有问题。

创建高可访问性的图像链接

俗话说:一图胜千言。在屏幕空间有限的互联网上更是如此,图像可以让用户快速了解一篇文章内容的概要、一个新产品的魅力或一组数据的概要。图像也可以用来精细控制排版和设计。互联网用户倾向于点击图像,因为它们通常与链接关联。问题就在于此。在视觉上,图像代表了链接的目的,但你怎能保证链接对视觉障碍用户同样是可用的呢?

空的ALT属性会产生不好的体验

假设我们有一个链接,只包含一个图像。如果图像没有可用的替代文字,你会怎么做?(根据以前的指导原则)为了可访问,您必须包含一个alt属性。但是,简单地增加一个空的 ALT属性同样是不好的,图片的ALT属性必须要反映出链接的目的。

这个例子是一个打扮的像厨师的猫咪的图像。假设我们无法获得图像的title、目标网页的title、标题或图像的其他具体标题。当图像只有一个空的ALT属性时,会发生什么?

<a href="http://www.flickr.com/photos/draket/226893468/">
<img src="/226893468_53c604dc77_m.jpg" alt="" />
</a>

屏幕阅读器为了让用户了解链接的目的,它会读取链接的URL:“226893468”。这不是一个好的体验。

解决方案:添加一个通用的Alt文字

如果你不能为图像添加一个特定的alt文本,至少可以使用通用的文字来描述链接的目的。

<a href="http://www.flickr.com/photos/draket/226893468/">
<img src="/226893468_53c604dc77_m.jpg" alt="See this image on Flickr" />
</a>

链接中增强文本的图像

继续阅读创建高可访问性的图像链接