Web表格开发如何避免Accessibility缺陷

文章转自：http://www.xcoder.cn/html/web/Client/2012/1007/8.html

表格也是HTML非常重要的组成部分，它最重要的用途是清晰地排列、展现数据信息，也有不少开发者利用它规划网页布局。由此引申出表格的两种类型，数据表格和布局表格(layout table)。数据表格通过多行多列清晰、准确地展现信息，而布局表格通常是被用来布局页面上的图片或者文字。虽然数据表格和布局表格的定义很清晰，但有些开发人员还是对何时使用数据表格，何时使用布局表格感到困扰，一个简单好用的判断标准是询问自己，“该表格行或者列之间的数据是否有“关系”?”，如果您的答案是“是”，那么我们基本可以判断这个表格是数据表格。以下着重介绍使用表格时最容易发生的两类问题及解决方案。

　　为数据表格设置caption或者summary属性

　　一个简单的数据表格用一行来显示列名，或者用一列来显示行名,

<th>元素可以被用来标识行名或者列名，这对于开发人员来说应该是众所周知的。但对于数据表格，我们建议必须设置有效的caption或者summary属性，为什么要这么做呢?请参考图4所示，该图中的表格既没有summary也没有caption，当使用屏幕阅读器来查看页面上的所有表格的时候，屏幕阅读器会自动获取表格从第一行开始包含的数据信息显示在表格选择界面，虽然显示的内容很长，但用户很难凭此判断出该表格主要存储什么信息。通过为表格设置caption或者summary属性可以避免该问题的发生。

▲图4 屏幕阅读器识别无caption/summary的表格

　　示例代码如下：

<table border= " 1 " summary= " This table shows the scheduled jobs ">
<caption>Job scheduling</caption>
<tr>
<th scope= " col ">Job title</th>
<th scope= " col ">Start  and  end dates</th>
<th scope= " col ">Preferred  time</th>
<th scope= " col ">Frequency</th>
<th scope= " col ">Job Status</th>
</tr>
...
</table>

　　需要注意的是，当你为某个数据表格指定了caption属性时，

<caption>的值必须有意义，且与使用caption属性的数据表格正确关联。作者的项目中就出现过多次

<caption>值和数据表格不对应的问题，比如如上数据表格caption被指定为"产品属性"等，这显然是风马牛不相及的，会误导用户。

　　恰当使用布局表格(layout table)

　　HTML布局表格可以被用来布局页面上的图片、文字等，这是layout table很可取得一面。但另一方面，页面上的layout table如果编码不当的话会给屏幕阅读器的使用者浏览web页面带来一些困扰。当使用屏幕阅读器 显示网页上的所有表格的时候，缺省地，layout table是不会出现在表格列表中的，但事实上屏幕阅读器经常会错把layout table当成数据table罗列出来，当用户选择了该冒充数据表格的layout table去“听”内容时，又没有实际的内容，用户会感到非常的困惑。数据表格如何恰当使用，请参考以下几点：

　　a) 避免为layout table设置summary属性

　　为了解决layout table“冒充”数据表格的问题，有些开发人员会如下设置layout table的summary属性：summary="", 或者summary="layout table"，这看起来是一个可取的办法但却并不是推荐的实现技术，我们要避免为layout table提供summary。

　　b) 利用WAI-ARIA presentation role定义layout table

　　通过为layout table定义WAI-ARIA presentation role，可以强制屏幕阅读器忽略表格的结构而仅仅关注表格的内容，从而有效地在避免表格结构带来的混淆。

　　c) 推荐采用CSS样式表来实现页面布局。

　　Cascading style sheets (CSS)

　　众所周知，CSS用来描述web 页面元素的表现形式，可以定义字体，颜色，间隔等等。Web开发人员通过CSS的定义，可以保证Web UI的一致性，同时，用户自定义的CSS可以使得用其倾向的样式取代web开发人员所定义的样式。例如，弱视人群可以定义更大的字体和更高的对比度使其更容易阅读web内容。但就目前的情况而言，并不是所有的web浏览器都很好的支持了CSS这项技术，如果web页面中包含CSS，但用户所用的浏览器或者辅助工具不支持，那有些重要的内容就很有可能被用户所忽视，所以这个验证点要求，如果浏览器不支持或者将CSS disable掉的时候，用户仍然可以直接清晰的”读懂“页面上的内容或者通过web开发者提供的一些其他的等价的方式“读懂”页面。

　　避免使用CSS生成传达重要信息的内容

　　:before and :after pseudo-elements可以产生一些额外的信息，例如可以确定样例代码的起始和结束，如下例：

.example:before { font-style: italic; color: red; content:  " Start example. "; }
.example:after { font-style: italic; color: red; content:  " End example. "; }
....
<code class= " example ">
<table border= " 1 " summary= " A simple data table showing the number of boys and girls in each grade ">
<caption>Boys  and Girls in Elementary School Classes</caption>
</code>

　　开发人员在开发过程中往往会忽视跨浏览器的兼容，上述样式单的定义只在Firefox中有很好的支持，但是IE确不支持，所以使用IE的用户就访问不到需要传达的信息。在这种情况下，开发人员应该提供等价的文字内容以保证内容的可读性。但对于用CSS产生的纯装饰的Image，不需要提供等价的文字内容。

　　如果使用CSS产生重要的image，当CSS被禁用的时候，等价的文字内容必须是可获得的。

　　例如，有一个广告图片，是一个CSS背景图片， 显示30天免费试用，当用户点击该图片的时候，会被带到登录页面，显而易见，这个图片传递了重要的信息。

　　当用户采用高对比度访问该页面的时候，CSS的背景图片会消失。这是开发人员没有实施恰当的编码来处理这种高对比度的模式，而导致用户无法访问该图片。

　　只要通过恰当的处理，就可以处理这种情况，如下代码：

<style type= " text/css ">
#trial {
background-image: url(30daytrial.jpg);
background-repeat: no-repeat;
background-position:  left top;
padding-top: 68px;
}

.access {
position: absolute;
left: -3000px;
width: 500px;
}
</style>

<div id= " trial ">...</div>
<span class= " access "><a href= " # "> 30  day free</a></span>

　　通过上边的代码，在高对比度和disable的模式下，用户依然可以通过Screen reader读取到这个重要信息。

　　使用CSS来隐藏内容

　　有些内容不希望显示在页面上，但又希望可以被一些辅助工具，例如screen reader读出来，那就可以使用CSS来达到这个目的。如下例：

<style type= " text/css ">
.access {position:absolute;
left: -3000px;
width: 500px; }
</style>
...
<p class= " access ">The access keys  for this page are:</p>
<ul class= " access ">
<li>ALT plus  1 links  to the w3.ibm.com home page</li>
....

　　 不要使用display:none属性来隐藏内容，因为它不仅不显示在页面上，而且对那些辅助的工具也成了不可见的。