五 2 2012
使用html css 技巧改善网站的无障碍访问
前阵子，在奇舞团重构营分享了 Ivo Gomes 的《HTML/CSS tips to improve the accssibility of your websites》，抽空翻译了下，不当之处还望见谅，感谢！
为什么我要关注无障碍阅读
无障碍阅读是什么？
- 无障碍阅读是为盲人等残障人事服务的；
- 无障碍站点本身是极其枯燥和乏味的；
- 无障碍阅读的实现成本较大、困难众多；
- 只提供文字版本是远远不够的；
- 无障碍需要我们去做相关的验证；
- 我们要保证读屏设备的无障碍可访问性，如果它能运行良好的话；
嗯，那我该怎么做呢？
1、增大你的字号
不要使用过小的字号（10px、12px）；
尝试使用16px，甚至更大的字号；
小贴士：尝试距离屏幕一米远，然后去阅读你的站点，看文字是否能够看清。
2、使用相对单位的字号
请注意样式的继承。
如图所示：body下的元素 h1 最终字号将是：2*1.6=3.2
推荐的方式：
3、增加行间距
如图所示：行间距太小，阅读起来好吃力;
增大行间距的效果，赞！
4、提供跳转链接提示
提供跳转链接提示可以帮助用户快速跳转到目的地，无需用户逐个点击去探测将要跳转到哪。
大多数开发者可能会选择隐藏跳转提示，其实这个也不能完全说是不对的。
通常我们所使用的隐藏跳转提示的方法：
推荐的方法
如图：给予跳转前的提示，告之用户该链接会将他带向哪里。
5、正确使用表格
如果你必须使用表格(仅仅是为展示数据)，那么请务必保证正确使用。
为表格定义一个summary和caption标签
用th标签来定义行、列的头部;
最终效果如图所示
6、不要移除链接的外边线
依靠键盘来导航的用户需要知道此时哪个链接获取到了焦点(focused)
因此，千万，千万不要移除这个线，尽管它看起来跟凤姐似的。
我知道，你肯定要说：这个太丑了，产品说：….
好吧，你可以移除这个线，但仅仅是在active状态下可以这么做！
7、不要创建一个空链接
无论到何时，请确保你的链接内有文本，这个很重要！
千万不要这么做！
7、显示链接的目标
你应该显示该链接将在一个新窗口打开，或者跳转到一个非html文档，例如word,ppt等。
高亮显示链接将在新窗口打开
你也可以使用实体符替代图片来实现
我们也可以为非html文档添加一些有意思的提示
也可以为外部站点做一些相关描述
最佳实践：如上图所示
8、更多的链接提示
当我们使用大块的链接时，务必保证最重要的信息优先展示出来。
当我们使用javascript触发链接时，应该为链接提供一个 href
9、无鼠标导航
当用户不使用鼠标或无法使用鼠标时，提供一个导航反馈。
这其中包括使用键盘做导航，用手指操作的触摸屏，或者其他的一些设备。
提示：使用：hover的同时，也使用：focus
提示：在IE7及之前的版本都支持active状态，从IE8开始IE支持focus状态。
10、段落间距
确保两个段落间有足够的间距;正如之前所说的增大行间距一样，这个技巧可以很好的提升文本的可阅读性。
额，估计你看不出这里是两个段落
优化后的效果，清晰易读。
我们应该一直为段落使用p标签，尽管看起来很傻。我们经常会看到这样的代码：
11、检查色彩的对比度
检测页面前景色与背景色的对比度。这里有一个谷歌的色彩检查对比工具http://snook.ca/technical/colour_contrast/
colour.html
如图所示：它会将你所输入的颜色做分析比对，并给出相关建议。
12、关于alt属性
alt属性为图像提供了一个额外的文本信息。但这个并不意味着你必须给所有的图片都要添加这个属性。
如果它是一个空白图片的话，那么它还是一个很不错的方案。
当该图片与文本相关联时应当添加alt替代文本。
如果图片是无关紧要的，此时alt也应该有，但可以是空白的。
13、关于title属性
title属性应该被用来为页面上的元素提供一些额外的信息。因此，停止复制链接内的文本到title属性里吧！
屏幕阅读器会将该链接文本阅读两次。
正确使用title属性：
title属性应该提供一些额外的信息，它将不会很快的在屏幕上显示。
14、为标题使用H标签
html中的标题标签共分h1-h6六个元素，他们非常有用，尤其是在一些看起来很适合用标题标签的元素上。
每一个文档应当有一个逻辑结构，层级间不能跳跃。
主内容区域应该有一个一级标题，每一个文档内只允许出现一个h1标签。
* 我们可以使用多个H1标签，但只能用在内容的标题上。
标题元素应该有一个树形结构
16、使用lang属性
屏幕阅读器的使用者需要知道这个文档是用哪个语言来书写的，否则他们将会使用默认的英语来阅读每个文本。如果这个站点不是用英文写的，那么，你能想象它读出来会是什么样的…
如何使用lang属性呢？
例如这段代码就告诉我们这个站点是以葡萄牙语书写的。
这个是用英文写的单词或者词组。
16、标注背景颜色
请记得给元素应用背景图片的时候加一个背景色。
如果背景图片加载失败，文本可能会变得很难阅读。
但是，如果我们添加了一个背景色情况就会得到改观。
因此，我们通常需要添加一个背景色，以此达到平稳退化。
17、书写一个有用的页面标题
页面标题是当我们搜索一个页面或者站点（通常是在搜索引擎上、或者浏览器上的选项卡工具条、或者收藏夹菜单）时首先你会看到的东西。
我们可以将标题做一个调换，将文档标题放置于首位，站点名称放置于尾部。这样做可以让标题在收藏夹、浏览器选项卡、搜索结果页上优先显示出来。
这里有一些简单的规则
使用一些分隔字符来做区分。例如使用“ – ”或者“ | ”
标题是写给人看的，不是写给搜索引擎看的。
不要将关键词或者面包屑写到页面标题中。
18、在表单中使用label标签
使用label元素提高表单元素的可访问性。
我们可以通过一些内在的联系从而更好的控制表单元素，例如给label元素的属性for设置与表单元素id属性相同的值。
利用label增加元素的可点击范围
如图所示，没有添加label的元素可点击范围很小。
使用label关联后的点击区域明显增大。
19、将表单元素分组
使用fieldset和legend元素将表单元素分组。
如果你只是想要让页面内容外围有一个边线环绕着，那么请不要使用fieldset元素。
使用fieldset和legend元素来控制逻辑上相关的表单控件，请将它们结合在一起使用。
在屏幕阅读器朗读这些文本前，请确保文本足够简练、确保legend和label文本配合使用时能够正常工作。
使用group元素
使用optgroup元素进行下拉框内容分组筛选。
20、增大按钮
确保你的按钮有足够大的点击区域。过小的点击区域需要极大的点击成本，用户必须精确的点击到按钮上才能完成操作。我们可以通过增大按钮的点击区域使他们能够更好的操作。
………………………………………………………………
上图为盲人使用的屏幕阅读设备。
…
如果你将站点设计的足够友好，残障人士都可以正常访问，那么，你同样也可以做到让其他人更好的使用和访问。
写在最后：以上几点中有很多是和大众版开发几乎完全相同的，个人感觉还是有很大的借鉴空间。也许你会觉得做无障碍阅读很费事且没有太大的实际意义，但“勿以善小而不为”，多一份爱心，就多一份和谐，愿我们生活的世界不再是那么冷漠！
近期评论