网站无障碍具体规范
2018-01-15
佚名
1328为了使网站建设趋向网站无障碍，方便部分特殊人群准确方便的获取所需信息；特制定以下规范针对HTML编写。
规范01：所有图片都必须加上alt属性
HTML页面的所有图片都必须加上相关联的说明和描述文字；所有img要加alt（alt中的文本不要超过150个字符）属性：
| <img src="images/logo.gif" alt="ADA 508 Logo"/> |
如果替代图片的alt属性文字不够清晰，则可以使用longdesc属性提供更详细的说明：
<img src="images/logo.gif" alt="ADA 508 Logo" longdesc = " LogoDescription.html"/> |
如果图片没有实际意义时alt属性可以用空来表示：
| <img src="images/english.gif" alt=""/> |
*alt=""（注意两引号中没有空格）
规范02：指出页面的编码类型
网页设计时需明确指出页面的编码类型，如UTF-8、GB2312，便于让不同语言的使用者能顺利读取这份文件，例如：
<meta http-equiv="content-type" content="text/html; charset= utf-8"> |
规范03：<input>标签使用alt，title描述
为input标签加入alt和title属性进行详细描述；如何使用alt和title需要看 input 的type的值:
<input type="text" value="http://about:blank" title="Web page address" name="wave4url"/> <input type="image" src="image.gif" alt="Submit" /> |
规范04：简写的地方都需要加上<abbr>标签
| Commer.Net <abbr title="Limited">Ltd.</abbr> |
规范05：网站中的标题使用h1-h6来编排
<h1>Enter your name:</h1> <h2>Enter your name:</h2> |
规范06：页面中禁止使用闪烁，跑马灯效果的信息内容
规范07：提供内容引导信息
网页在处理内容导引信息之时，应提供上下文 (context)和定向(orientation)信息来帮助使用者了解复杂的网页架构或相关组件。网页开发者应该要注意到一个网站内网页各部分之间的复杂关系，对于有认知障碍的和有视觉障碍的人要做解读可能会相当困难的。因此应该要考虑 他们的困难，提供详细的内容导引信息。
<div class="hidden">Your locations in the website</div> <ul class="li"> <li><a href='Home.html'>Home</a></li> <li><a href='OurProducts.html'>Our Products</a></li> <li><a href='AboutUs.html'>About Us</a></li> </div> |
其中在CSS中定义“hidden”的内容为hidden；这样在一般的浏览器上是不会显示该DIV里的内容；
在文档开始，结束或导航前面的位置加上相关描述字符：
<div class="footer"> ...... <div class="hidden">End of page</div> </div> |
规范08：用<title>标签为超级链接加上内容描述
设计并确保有意义的超级链接说明，便于网页内容的阅读；如果需要的话，为每个超级链接加上内容描述：
<a title="WAVE homepage" href="http://webaim.org/">HOME </a> |
规范09：image Maps对象中的每个area加alt进行描述
规范10：<object>标签，加入title属性及元素内容
<object classid="clsid:xxx-xxx-xxx" width="100%" height="100%" title= "Microsof Excel"> <param name="DataType" value="XMLDATA"> This is an Excel document.</object> |
规范11：< applet >标签，加入alt属性
<applet width="128" height="128" codebase="http://xxx.class/" alt=" My Applet Description"> This is a navigation applet. Alternative navigation can be found at: http://www.xxx.com/uaccess/navigate.html </applet> |
规范12：<textarea>标签加入alt属性
<textarea alt='enter article content'/> |
规范13：使用iframe时，iframe所连接的页面也必须是一个html页面，且需要加入元素内容
<iframe name="frame1" SRC="sample.htm"> Your browser does not support inline frames or is currently configured not to display inline frames. Content can be viewed at actual source page: http://www.xxx.com/sample.htm </iframe> |
规范14：语音档案必须有文字旁白
规范15：<table>使用按以下几种情况和规范 15.01 <table>用于表示数据列表时，用summary属性描述该表格的择要
<table summary="The number of employees and "> |
15.02 使用<Caption>标签描述表格的标题
<CAPTION> Table 1: Company data </CAPTION> |
15.03 在数据列表时合理使用th来表示表头；主要有以下几种情况：
情况一：当标题为第一行时
Table 1: Company data
姓名 | 出生日期 | 部门 | 工资领取 |
刘小雨 | 1985.12.15 | Developer | yes |
张小亭 | 1982.05.04 | Developer | yes |
表格 html代码如下：
<table border="1" summary="The number of employees ."> <CAPTION> Table 1: Company data </CAPTION> <tr> <th>姓名</th> <th>出生日期</th> <th>部门</th> <th>工资领取</th> </tr> <tr> <td>刘小雨</td> <td>1985.12.15/td> <td>Developer</td> <td>yes</td></tr> <tr> <td>张小亭</td> <td>1982.05.04</td> <td>Developer</td> <td>yes</td></tr> </table> |
情况二：当标题为第一列时
Table 2: Company data
姓名 | 刘小雨 | 张小亭 | 张小亭 |
出生日期 | 1985.12.15 | 1982.05.04 | 1982.05.04 |
部门 | Developer | Developer | Developer |
工资领取 | yes | yes | yes |
表格 html代码如下：
<table border="1" summary="The number of employees ."> <CAPTION> Table 2: Company data </CAPTION> <tr> <th>姓名</th> <td>刘小雨</td> <td>张小亭</td> <td>张小亭</td> </tr> <tr> <th>出生日期/th> <td>1985.12.15/td> <td>1982.05.04</td> <td>1982.05.04</td></tr> <tr> <th>部门</th> <td> Developer </td> <td>Developer</td> <td> Developer </td></tr> <tr><th>工资领取</th><td> yes </td><td> yes </td> <td>yes</td></tr> </table> |
15.04 当表格表现形式比较复杂时合理使用scope属性
Table 3: Company data
Employees | Founded | |
ACME Inc | 1000 | 1947 |
XYZ Corp | 2000 | 1973 |
表格 html代码如下：
<table border="1" summary="The number of employees."> <caption>Table 3: Company data</caption> <tr><td></td> <th scope="col">Employees</th><th scope="col"> Founded</th></tr> <tr> <th scope="row">ACME Inc</th> <td>1000</td> <td>1947</td></tr> <tr> <th scope="row">XYZ Corp</th> <td>2000</td> <td>1973</td></tr> </table> |
15.05 当表格表现形式比较复杂时合理使用headers属性
Year (id=year) | Bugs (id=bugs) | Sales (id=sales) |
1995(id=y1 headers=year) | 2.3 (headers= y1 bugs) | 500,000 (headers= y1 sales) |
1996(id=y2 headers=year) | 3.2 (headers= y2 bugs) | 1,700,000 (headers= y2 sales) |
1997(id=y3 headers=year) | 5.6 (headers= y3 bugs) | 8,200,000 (headers= y3 sales) |
1998(id=y4 headers=year) | 12.3 (headers= y4 bugs) | 33,000,000 (headers= y4 sales) |
表格 html代码如下：
<TABLE> <TR><TH width="61" ID="year">Year</TH> <TH width="34" ID="bugs">Bugs</TH><TH width="257" ID="salws">Sales</TH></TR> <TR><TH ID="y1" HEADERS="year">1995</TH><TD HEADERS="y1 bugs">2.3</TD><TD HEADERS="y1 sales">500,000</TD></TR> <TR><TH ID="y2" HEADERS="year">1996</TH><TD HEADERS="y2 bugs">3.2</TD><TD HEADERS="y2 sales">1,700,000</TD></TR> <TR><TH ID="y3" HEADERS="year">1997</TH><TD HEADERS="y3 bugs">5.6</TD><TD HEADERS="y1 sales">8,200,000</TD></TR> <TR><TH ID="y4" HEADERS="year">1999</TH><TD HEADERS="y4 bugs">12.3</TD><TD HEADERS="y4 sales">33,000,000</TD></TR> </TABLE> |
规范16： 对JavaScript的使用按以下几种方式
如果JavaScript被用于标签<a>中，用来执行一个JS函数，则需要写为：
<a href="javascript:myFunction()">Start myFunction</a> |
这样的写法是符合ADA508规范的，因为标签<a>的内容已经描述了单击这个标签将会执行一个函数。
如果JavaScript被用于标签<a>中，且标签中使用了图片，则图片需要加上alt属性，用来描述本链接的功能，例如：
<a href="javascript:myFunction()"> <img src="myFunction.gif" alt="picture link for starting myFunction"/> </a> |
切不可写为：
<a href="javascript:myFunction()"><img src="myFunction.gif"></a> |
因为读屏软件等工具无法知道图片上的描述文字，也就无法知道本链接的功能，导致易用性问题。
