Tab(选项卡)的产品设计原则及应用[译]（4）

三、考虑Tab的易用性

更复杂的交互行为的出现，在不刷新页面的状态下异步更新内容，以及如何满足用户使用不同访问方式，包括那些很难确定的非典型状况下的访问需求，这些状况令易用性成为当前最热门的话题。本章节中，我们将讨论一些在设计Tab元素时你应该知道的易用性原则。

“选择”和“未选中”状态的标签 应该使用对比鲜明的颜色

为了让视力上有障碍的用户能分清哪些标签是已选中的，哪些是未选中的，应该使用高对比的背景色来做出区分。

Yahoo! News 网站中的反面案例：选中和未选中状态的标签 只有非常小的视觉上的差异，他们对视力好的用户没问题，但是会给视力不佳的用户带来麻烦。

此外，请务必保证标签的文字颜色（前景色）和标签背景色 有充分的对比。即使是未选中的标签，用户也应该能轻松阅读上面的文字。为了让未选择的标签看起来不显眼，而把它们都直接变灰 是不妥当的。

确保 隐藏内容区里的信息 在语音阅读器中是可读的

基于可访问性，Tab应该使用技术将未选中状态的内容区隐藏起来，但是不能在DOM Tree中删除他们。比如不能使用 display:none; 或者 visibility:none这样的css参数去定义容器。这类参数导致语音阅读器无法读取被隐藏的内容区中的信息。

（译注：中国设计师可能不太重视语音阅读器的可访问性，但是在国外，有专门的法令条款规定，机构网站不得歧视有障碍的用户，包括视力缺陷，行动障碍、癫痫患者等，所以外国的产品或前端工程师会很重视这一点，不然会遭到投诉甚至起诉。这种差异去看看中国人是如何设计盲道的就明白了。）

详情请见Roger Johansson’s 的文章 《利用css隐藏内容：问题和对策》”Hiding with CSS: Problems and solutions“.

（译注：Roger Johansson’s的文章中指出：许多CSS和JS教程建议使用display:none; visibility:none 来隐藏元素，但大多数状况下这是一个会降低可访问性的选择，。

display:none的真正含义是表示这一元素并不存在，不需要显示打印或被阅读。大多数语音阅读器会忽略任何使用display:none来隐藏链接，文字，导航和标题等。作者建议使用的技术是使用绝对定位坐标，例如 .structural { position:absolute; left:-9999px; } 。

另一个需要注意的问题是，当你决定使用JS去显示一个元素时，也应该用JS技术去隐藏它。因为考虑到客户端是否支持js以及安全等级，如果客户端的js没起作用，可能交互或动态菜单没效果，但起码内容是可访问的。但如果你使用css去隐藏一个元素，但使用js技术去显示它，在某些状况下，这个元素会变得一直无法访问。）

使用语义化的HTML结构来构造 Tab的标签。

使用无序或有序列表(译注：<ul> <li>这类标签）来构造标签的html代码，可以改善可访问性。因为使用语音阅读器的用户可以基于此来识别出这是一组Tab标签。如果标签上使用了图片来代替文字，别忘了添加ALT 或 title属性来 描述图片的含义。

允许键盘操作。

键盘导航是为一些有行动障碍或不能使用常规输入设备（如鼠标）的用户准备的。这种用户会使用替换形式（比如键盘或语音）来控制导航菜单，确保他们能将控制焦点在标签间切换，并激活他们想要的部分。

一个简单测试键盘导航的简单方法是：使用键盘上的Tab键，看你是否能将控制焦点 集中在每个标签上？使用回车键，当前的控制区域是否能被激活，使未选中状态有效地切换为选中状态。

提高对用户客户端的兼容性。

当客户端无法支持某些技术，比如当浏览器关闭了JavaScript功能时，或者 当用户没有安装Flash插件时，Tab内容区上的信息必须保证最基本的可访问性，交互元素确保能被替换为最基本的html文本。