静态网页怎么访问导航后导航背景换颜色_可访问性设计以人为本，使所有用户真正有效地使用产品...

“互联网的力量存在于它的普适性中，让包括残疾人在内的所有人都能访问互联网是普适性中必不可少的一部分。
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”-Tim Berners-Lee (Inventor of the World Wide Web)

互联网，让世界变得更小。它将人们的生活通过电脑、手机、网页等等紧密的连系起来。人与人之间的交流信息方式渐渐被电子化取代。快速、高效、便捷成为互联网时代的代名词。
而在我们这些芸芸众生中，有这么一群人，他们也许是有视觉障碍的，也许是有行动障碍的，亦或是有一定认知障碍的，这些障碍或暂时的，或永久的，他们的生活也因为互联网的快捷而改变了吗？又如何让所有人在各种场景下都能无障碍的访问网页，使用互联网呢？
可访问性设计（Accessibility design) 就是以“所有人”为核心，让网页在更广泛的场景下得到运用。

“可访问性设计是好设计。
Accessibility design is good design.”-Steven Ballmer (Former CEO of Microsoft)

对于很多产品来说，其实可访问性设计并没有完全涉及，但是对于一些国家来说，可访问性作为一种法律（Section 508) 来规定网页满足所有人可以访问的最低要求。
WCAG 2.0 (Web Content Accessibility Guideline 2.0）是美国万维网联盟（World Wide Web Consortium) 提出的关于互联网可访问性设计的规范，帮助定义如何使残疾人方便地浏览网页信息。
“POUR”四字原则，作为WCAG 2.0 的核心要求，让更多的产品开发者和设计师将可访问性设计真正地融入到以“人”为本的设计中。“POUR”四字原则并不是一个困难而又快速的规则，也不是特定的技术需求，它帮助设计师如何更好地理解用户的需求。那怎么才能在设计中很好地运用这四字法则呢 ?

网页上各种交互元素是否都能被注意到？比如说在看视频时，给视频加上字幕。

网页导航和操作是否可以不通过鼠标或者其他复杂的交互方式来进行？

用户是否可以充分理解界面的信息和操作的交互逻辑？

网页上是否能用不同技术进行交互？比如用VoiceOver，阅读网页内容。

设计中，在运用这些不同原则的同时，还利用3个不同程度的等级来划分不同可访问性设计的实现程度 (A,AA,AAA)。

一个A表示实现可访问性网页的最低要求，而AAA表示实现可访问性网页的黄金要求。考虑到各种因素，在网页设计中我们往往会采用AA原则，这样可以在保持原本设计方案的同时，实现比较好的可访问性设计。

“设计不只是看起来什么样子或者感觉怎么样。设计更是用起来怎么有效。
Design is not just what it looks like and feels like. Design is how it works.”-Steven Jobs (Co-founding of Apple)

据数据统计，全球大约有10%的男性以及0.5%的女性患有不同程度的色盲，也就是说，大约10个人就中有1个人受到色盲的影响。
色盲患者眼中的世界到底会和正常人眼中的世界产生多么巨大的区别呢? 让我们就以微策略 Library 中的 Map Visualization为例子，看看不同人眼中的网页设计。

图一是正常人眼中的Map Viz，其他是不同色盲患者眼中的Map Viz

虽然不同的色盲患者看到的色彩效果是不一样的，但是只要能给你的图片文字选择更加友好的设计，那么网页信息同样可以快捷有效的传递给视觉有障碍的人。

色彩对比作为网页可访问性中最常见的问题。对于具有不同程度视觉障碍的网页使用者，他们对于色彩也有不同形式的呈现。

利用Stark测试你的设计方案

作为一名设计师需要将文本和所处的背景的对比度控制在至少为4.5:1。这套规范主要是要确保弱视者、色盲看清楚屏幕上显示的文字内容。

利用好Sketch 插件Stark可以很好的帮助设计在设计阶段模拟不同程度的色盲患者的整体视觉效果，同时也能帮助设计师测试不同颜色和大小的字体在不同色彩背景下是否达到WCAG 2.0的规定。

“移动-点击”鼠标的交互模式对于用户来说是最为简便有效的网页定位方式。可是对于视觉有障碍的用户，他们会很难定位鼠标箭头的位置，而对于肢体有障碍的用户来说使用鼠标甚至都是非常困难的事情。如何将鼠标的“移动-点击”的交互模式转换成其他更为简单的步骤呢？

MicroStrategy Web Library中 Tab Order 设计

通过使用“点击”Tab键，来切换于不同的可操作元素（按钮和链接),将原本鼠标滑动选择方式用Tab选择来代替，可以使网页的跳转顺序更加符合页面元素的排列逻辑。

如何在文字图片繁琐的网页中定位到正在浏览的内容，同样也是利用了Tab导航设计后需要考虑的可访问性的问题。

在Web Library中使用Tab导览信息时利用框选指示器和信息提示框提示用户选中的信息

在图片和文字上利用框选指示器也叫做“Focus State",可以帮助用户在使用Tab键导览信息时，快速获取信息的位置和内容。而在没有文字的图标上使用信息提示框，可以有利于使用屏幕阅读器的用户理解图标的意义。

占位符信息（Placeholder text) 和表单标签（Form label) 都是表单设计中重要的组成部分，但是在设计中我们不能仅仅使用占位符信息来替代表单标签，这样可能会造成负面的影响。

左图是只有占位符信息的表单设计右图是有标签的表单设计

如果在表单只使用占位符信息的话，那么在用户填写了一些信息后，占位符信息就会消失，导致用户在提交表单时不能检查填写的准确性。同时在遇到报错的情况时,用户也不能定位错误从而解决问题。

提高可访问性设计的表单设计

在可访问性设计中，为了更好的让屏幕阅读器识别到相关的内容,可以将占位符信息和表单标签同时放置在表单上方，让文本信息更好的被捕捉到。

这可能是WCAG 2.0中最为麻烦的原则之一。为什么呢？并不是技术比较困难实现，而是要给所有的图片加上 Alt Text 可能比较费时。

给予有功能的图片附以文字说明

“Alternative Text” 也叫做“备选文本，替换文本”。当你利用一些图片来强化文本信息或者交互方式时，这个时候屏幕阅读器就需要文字来解释这些图片，这就是“替换文本”。
其实也不是所有的图片都需要替换文本来解释说明，如果你的图片只是用来装饰好看的话，这时如果再利用替换文本的话反而会给使用屏幕阅读器的用户带来疑惑。

因为可访问设计的普及，一系列相关的技术比如VoiceOver俨然而生。

WWDC18 有关 VoiceOver: App Testing Beyond The Visuals 的演讲让更多的产品设计者和开发者们认识到支持VoiceOver等其他辅助技术的重要性。
设计VoiceOver的目的和Accessibility一样就是让所有人都可以访问网页和软件。

“设计并不是为了哲学，它是为了生活。
Design is not for philosophy, it's for life.”-Issey Miyake (Japanese Fashion Designer)

这里包含的有关可访问性设计只是在网页设计上非常小的一部分。在未来的设计过程中需要将Accessibility的思维融入到完整的设计流程中去，同时结合产品的特点，用户的需求以及使用场景的特殊性让网页和产品服务更多的人。
更加重要的是，在设计中不要只局限于一种场景的认识，充分考虑了从手机到平板再到网页的跨平台可访问性设计才是做到了真正的“为所有人而设计”。

1.《A Web for Everyone Designing Accessible User Experiences》by Steve Krug，Aaron Gustafson

2. Stark: https://www.getstark.co/

3. Conducting a POUR Website: https://webaim.org/articles/pour/

4. Placeholders in Form Fields are harmful: https://www.nngroup.com/articles/form-design-placeholders/

5. Assistive Tech: VoiceOver on IOS: https://www.youtube.com/watch?v=bCHpdjvxBws

6. VoiceOver: App Testing Beyond The Visuals: https://developer.apple.com/videos/play/wwdc2018/226/

我们会每周推送商业智能、数据分析资讯、技术干货和程序员日常生活，欢迎关注我们的知乎公众号“微策略中国”或微信公众号“微策略 商业智能"。