如何设计具有可访问性的网页

1.什么是“可访问性”

可访问性（Accessibility）在《WebContent Accessibility Guidelines 1.0（网页内容可访问性指南）》里，对可访问性的描述是：网页内容对于特殊人群的可阅读和可理解性。同时指南里还特别指明：提高可访问性也能让普通用户更容易理解网页内容。这里所说的特殊人群通常指残障人士，例如视力障碍群体、行动障碍群体、学习障碍群体和听力障碍群体。进行网页的可访问性设计不仅意味着简约设计，创建一个易于访问的平台意味着要考虑所有方面，并且确保设计适合那些需要它的人。使所有功能（包括内容、设计、导航和布局等）变得灵活是创建可访问性平台的关键。（图源网络）2.为什么要设计具有可访问性的网页**1. 设计应以人为本：这样可以改善残疾人的的生活，使更多人受益。2. 以营销或以经济为中心的动机：具有可访问性的网站或者应用程序可以提高品牌知名度，因为它可以吸引更广泛的用户群体，从而带来更多的流量。同样，可访问性意味着用户的容纳性大，对于营销而言，这会很有利。3. 公共关系为中心的动机：政府主导的界面受到法律法规的影响，对可访问性的要求特别高，因为这些基本服务必须能够被包括残障群体在内的所有人使用。结论：虽然以上的原因是按中间包含的利他主义成分的多少来排序列出的，但是，最后呈现的具有可访问性的网站肯定比设计者最初动机重要得多。具有可访问性的界面所带来的满意度和易用性的提升并非仅仅适用于残障人士，而是适用于所有用户。而“适用于所有用户”正是《交互式设计四策略》中提到的“好的设计应满足极端的可能性”的表现。（《交互式设计四策略》中对于“极端可能性”的描述）3.如何设计“可访问性”1. POUR原则网页内容可访问性指南分为4 类，也称为POUR原则。它们是：可感知（Perspective）网页内容需要至少可供用户的一种感觉使用，通常是视觉或听觉。可操作（Operative）产品或服务应可以使用不同的输入方式——鼠标、键盘、语音命令等。可理解（Understandable）所有内容都应该清晰简洁，并允许用户按照自己的节奏进行探索。强大（Robust）产品或服务应该与人们使用的技术兼容——屏幕阅读器、不同的浏览器等。2. 指南对于视觉障碍者来说：1.确保产品中色彩的对比度足够：网页可访性指南中规定小文本和它的背景色之间至少要有4.5:1的对比度，大文本（加粗的14pt/普通的18pt及以上）和它的背景色之间至少有3:1的对比度。低于这些对比度，会导致一些老花眼、白内障、色盲患者等视障人群，无法识别文本。所以在设计中，我们要特别注意文本与背景间的对比度。（图源网络）对于文本和背景颜色的对比度，我们可以用一些工具来检查，如WebAim网站提供的色彩对比度检查器。（WebAim网站介绍）2.避免将颜色作为唯一的指标：确保很多信息不依赖色彩来进行传递，尤其是一些关键的系统信息，它们的可访问性更加需要被考量。（左图为一般用户看到的界面，右图为色盲人群看到的界面）对于图表信息，应该添加纹理或者图案，这样，即使是色盲用户也可以轻松分辨它们，而不用担心色彩会影响他们对于数据的感知。（图源网络）案例：UNO卡牌：号称只用颜色和数字就能和全世界的人一起玩。然而有人提出了质疑，因为色盲用户无法准确地区分颜色。所以美泰公司重新设计并推出了UNO色盲特别版，采用ColorADD标准（一个用图像去识别颜色的设计系统），每个颜色的卡牌上都加上了被设定好的特定形状，帮助色盲辨认颜色。（UNO色盲特别版与ColorADD标准）3.控制焦点状态对比度：所谓焦点状态，指的是用户使用键盘的「Tab」键来点击切换网页页面中不同链接的时候，每个链接周围会呈现出的描边外发光的视觉效果。如果要使用这种效果，应该要检查描边颜色与背景颜色间的对比度。（焦点状态展示  图源网络）4.提供多种验证方式：目前很多政务服务网站注册流程的验证方式都只提供图形验证码，但屏幕阅读器（可以识别网页中的文本并进行朗读）是无法识别验证码中的文本信息的。所以，我们除了要提供图形验证码之外，还应该提供多种验证方式让用户选择。（苹果网站的注册流程中，验证方式除了提供图形验证码之外，还会提供语音验证码）对于运动障碍者来说：1.合适的点击范围：当按钮过小、排列紧凑时，肢体障碍的用户用起来会非常吃力，对于四肢健全的用户来说也很容易产生误触。iOS平台对于点击范围的规范是:大于等于44x44pt。安卓平台的规范更严格一点，不能小于48x48pt。2.安全的触摸目标间距：触摸目标之间的间距也应该足够大以提高可读性：Material设计建议在触摸目标之间添加8pt的间距。(至少要保证到77mm，尽量做到99mm)（图源网络）对于具有认知障碍的人来说：**影响认知能力的疾病，例如痴呆症和诵读困难症。患有这些疾病的人群在阅读过程中可能会出现跳字，增字，替换字的情况。为改善这一问题，我们应把注意力放在改善文章可读性和易读性上。1.单行字符数量控制：

除了使用尽可能少的字体、统一文本的对齐方式外，还必须通过控制单行字符的个数来达到增加易读性的目的。（图源网络）单行字符过少，则会加快用户阅读扫视频率，打乱阅读节奏；单行字符过多，则加重用户阅读负担，降低用户专注度。所以控制单行字符数量十分重要。就中文而言，PC端的单行字符控制在70~80个之间，移动端单行字符数量控制在45个左右。（微信移动端和网页端的公众号文章显示）小结****我们在进行用户可访问性设计时，设计的目的常常是为了让一些有视觉、听觉、运动感受、认知有障碍的人更好进行互联网运用，但实际上，这种更广泛、更普遍意义上解决可访问性的问题的方法却能让所有人的产品使用体验得到改善。

4.一些帮助设计“可访问性”的工具