Web内容无障碍指南（Web Content Accessibility Guidelines）

相关文章：

• 网页内容无障碍指引1.0
• 在 30 天內打造更具親和力的網站
• 腾讯网无障碍说明
• 如何开发无障碍的 Web 网页应用详细手册教程指南
• 开发和测试访问无障碍的 Web 应用
• WAI-ARIA 无障碍Web规范
• 使用 JAWS 测试 Web 应用的技巧

关于 Image

• 图片或者动画均需提供 alt 信息，使得读屏软件可以将图片动画的内容清楚的读出来。
• 对于某些用于装饰性的图片，则需设置 alt 为空，使得读屏软件可以忽略此元素。
• 对于图表文件，alt 属性的设置则需要简明扼要的表达出图表的信息，并不用把里面的细节都详细得描述出来。
• 对于图表文件，alt 属性的设置则需要简明扼要的表达出图表的信息，并不用把里面的细节都详细得描述出来。

<img src="cat.gif" alt="Image about cat" />

<img src="ring.gif" alt="" />

<a href="http://apple.com/iphone/"> 
    <img src="iphone.jpg" alt="">Apple iPhone 
</a>

CSS 将样式跟结构分离

很多装饰性的图片也都放在 CSS 里面来加载，带来的一个问题就是在 CSS 里面的图片在高对比度模式下都无法显示。如果这个图片并不仅仅是装饰性的，还可以触发功能，那就需要从 CSS 里面拿出来，当成一个独立的 img 或者 input元素。

<div class=” save_button” ></div> 
.save_button{ 
    background: url("images/save_button.png"); 
    width: 33px; 
    height: 33px; 
    vertical-align:middle;  
}

这样当用户切换到高对比度模式，这个图片就是一片空白，用户无法再去点击保存。

//推荐使用
<img src="images/save_button.png" alt="save"/> 
<input type="image" src="images/save_button.png" alt="save"/>

关于 Table

• 布局用 table，读屏软件没必要知道这是一个表，可以通过设置 role=presentation 使 JAWS 忽略这个表，只关注里面的内容。
• 数据用 table，则需要设置 caption 属性，说明整个表是用来做什么的，使得 JAWS 可以告诉用户这个表的作用。对于每一个单元内的数据，还应该通过 th 属性使得 JAWS 能识别这个数据的表头是什么。对于复杂表，可以通过 id 和 header 属性来标识。