雅虎UED--无障碍网页设计

转自：http://www.sharetk.com/html/ued/Interactive-Design/1394.html

随着web使用量的增加和人们网络意识的增强,一些特殊用户开始被我们所关注。其中有些人很难看清或根本无法看到电脑屏幕；有些人无法使用鼠标；有些人有阅读障碍；而年长者经常同时具有上述这些障碍，但仍需要使用网站。让每个人更容易地浏览，并协助这些特殊人士无障碍的使用网站，是非常有价值的。

互联网让世界发生了翻天覆地的变化，那么，它给盲人带来了什么？出乎绝大多数明眼人的意料———盲人也能上网，而且完全有可能做一个幸福的网民：网络聊天、发E－mail、看新闻、远程教学……甚至还有不少盲人程序员。语音读屏软件是协助盲人上网的关键，它能把敲出的每个字符以及打开的网页都朗读出来。有了它，电脑就好比装了个“声控向导”，盲人们虽然看不见，却同样能知道屏幕上有什么。

然而如同被堵住的盲道一样，我们网站会在不经意间为特殊用户制造一些障碍，如何扫除这些障碍，让这部分用户享受无障碍设计带来的便捷呢？

先来了解两个概念：ARIA和WCAG

ARIA（Accessible Rich Internet Application）：无障碍富互联网应用。ARIA可以让读屏软件等辅助工具准确识别网页中的内容，变化，状态的技术规范，可以让盲人这类用户也能无障碍阅读
WCAG(Web Content Accessibility Guideline): 由W3C制定的Web 内容可及性方针。W3C 建立的新標準旨在確保輔助技術可以與RIA搭配運作良好。WCAG有四个设计原则：可感知，可操作，易懂，完整。

不要被这两个概念吓到。无障碍并不是非常难以实施。它并不会像一些人想象的会有碍美观或影响交互。而是一种更人性化的设计和开发方式。

来看看建立无障碍访问的几项技术

1.提供非文字内容的替代文字

2.提供视频或者音频的替代文字

视频剪辑，应该提供字幕供听障人士使用，并提供文字或音频剪辑供视障人士使用

3.使用语义化的HTML

如果开发人员不喜欢 h1 与 h2 项目的预设字型大小，因而网页只有 h3 项目，则读屏软件使用者可能会觉得奇怪遗失的较高层级的小节到哪去了。或者，如果网页使用粗体字表示标题，而不是使用 h 项目，则使用者可能会混淆，因为读屏软件无法区分用于强调的粗体文字，以及加上粗体以表示标题的文字。

4.让功能可以通过键盘使用

提供快捷键
设置tabIndex指定逻辑定位点顺序
不要使用双击来触发交互（onDblClick），因为键盘不能执行这个行为。
如果使用onmouseover和onmouseout，请同时绑定onfocus和onblur来兼容键盘。

5.提供有意义的链接文字

提供完整且正确的超链接文字是十分有意义的，它对读屏软件的使用者十分重要，读屏软件可依序播报所有超链接，以协助盲人用户浏览整个网页。而且有意义的文字链接有利于SEO 。如果超链接要仰赖周围的文字才有意义 (例如只有 [按一下这里] 或 [进一步了解] 文字的链接)，则对于盲人用户聆听时不具有任何意义。

6.提供锚链接略过大型链接区块，直接进入正文部分

点击红色边框区域（skip to main content）后，直接跳到：

“跳过”链接通常放置在页面顶部并指向主要内容，是一种对键盘用户非常有益的交互，允许键盘用户跳过大块的内容和链接，特别是导航菜单，用户访问新页面时不必每次都浏览banner和导航。

7.不要仅用色彩来传达功能

对于色盲者来说，组合式色彩对他们会有分辨上的障碍，例如红色按钮的取消搭配上绿色按钮的确定，这样的组合对于正常人来说再简单不过，但是对于色盲者来说却是十分吃力的选择。

另外，确保你的设计有足够的颜色对比，这对低视力和色盲用户有益。WCAG 2.0 AAA级要求最小对比度为7:1，AA级的建议是4.5:1或更高。

8.为页面元素添加ARIA ROLE和属性

比如:搜索

菜单：

使用地标角色标记网页的主要页面元素，可让读屏软体为盲人用户读出页面元素的角色。用户即可选取其中一个区段，指示读屏软体开始读出网页的特定部分。也可略过不感兴趣的部分。

一些aria属性还可以告诉盲人用户诸如：点击的时候会出现菜单或是浮动元素（aria-haspopup）；那些表单项被选中（aria-checked）；当前元素是否可见（aria-hidden）

上述所介绍的这些技术实现起来并不难，只要用心我们的一点进步就可以帮助到更多的残障用户，这也是一种公益行为和用户体验的优化吧。