关于网站开发可浏览性（Accessibility）是顾客体验设计中的重要一环，好的可浏览性设计可以让多种顾客更简单浏览和使用（电脑、手机、网页、UI等等），使得有障碍的顾客更便捷地感知、理解、互动。理想状态下，上海网站制作师和程序开发者能充分设计，让产品的可浏览性到达好的境界，不过具体状况下，即使增加了如此多的可浏览性设计，残疾人和行动障碍者依然用不好手机、电脑等产品，乃至有一些“设计”还会人为制造障碍。

今天，咋们来探讨一下可浏览性设计的一部分基本原则吧。当咋们在探讨可浏览性设计以前，请你的产品至少是已经“被设计好了的”，也便是说它至少得契合《Web协会可浏览性指南设计规范2.0》和《inSection 508》的基本需求，经过充分的开发和测试。

OK，咋们开始进入主题了~

1、可浏览性设计并不是创新的障碍（上海网站制作）

要让产品可浏览性更好，并不是让你做一个丑陋、沉闷而杂乱无章的产品。当你在设计的时候，现有的可浏览性设计规范或者“推荐规范”的引入，确实会提供一定的约束，不过它们自身并不只是一种限制，它还是你设计和探索的新方向，毕竟，你设计的较终目标是为顾客提供更好的产品——好用好看。

当咋们在阅读这些设计规范的时候，请务必记住，这些产品并不只是为咋们的同行或者设计同好来设计的，它所涵盖的顾客各不相同。

作为上海网站制作师的你，你可以为你的同行和同好设计出极具共鸣的产品，不过从更广泛意义上来说，他们在你产品顾客的总量中，占据的比例并不高吧？

为那些真正同你的产品开展互动的各色顾客来设计吧。为每一个人设计。你的顾客可能是盲人，可能是色盲，视力不佳者，可能是听力障碍者，可能是有行动障碍的老人，可能是有认知障碍的顾客。你的顾客可能很年轻，也可能很老，他们可能是一般顾客，也可能是重度依赖者，也可能是相对顾客体验有极高需求的挑剔顾客。

拥抱可浏览性设计准则吧，假如你想创造一个令人惊艳的产品，那么这是你的必经之路。

2、不要让色彩成为你先进的视觉表达手段（上海网站制作）

视觉障碍者所存在的问题各不相同，色盲（男性1/12，女性1/200）、近视（1/30）以及失明（1/188）的顾客都会成为你的可浏览性设计所照顾的对象。

借助色彩来呈现高亮和互补是显而易见的设计方法。

那么你看一看下边灰阶的界面中，有几项填错了？好多人都会人为只有验证码填错了，由于只有验证码的字段有个小三角形，者表明它是有问题的。接下来整屏的灰色也没法让你判断出其他的问题。

不过当你看到彩色的界面的时候就知道，具体状况并不是这样子。设计师使用红色来标识错误的字段，四个字段其实全是错的，相对色盲的顾客，这样子设计的可浏览性简直是灾难性的。具体上，你可以使用粗边框、粗体文字提醒、下划线、斜体来呈现错误状态，而不止是色彩。

3、文字和背景有充分的对比（上海网站制作）

依据WCAG的规定，文本和所处的背景的对比度至少为4.5:1。这套规范主要是要弱视者、色盲看清楚屏幕上显示的文字信息。这也就意味着，假如你的文字大小为24px，19px粗体的时候，文字的灰度较少也得是#959595.

#959595 字体在白色背景上的成效。

相对较小的字体，能用的灰色较0也获得#767676，假如你的背景自身便是灰色的，那么文字的用色还得更沉才行。

#767676 字体在白色背景上的成效。

有个名为Color Safe的工具，可以你的设计用色保险。而WebAIM’s Color Contrast Checker也能帮你开展色彩对比度的检查，你选对了色彩。

LOGO和被禁用的元素则不受此标准约束。这里边包含了处于禁用状态的按钮或者菜单选项。不过占位符或者幽灵按钮的信息则依然在规定约束范畴内。

接下来的案例咋们看的是著名博客平台Medium，例子中仅有“M” 这样的Logo的对比度契合了标准，其他部分的灰度则很难让人看清，更何况是视觉障碍者。

下一个案例是BBC的网站，他们使用不同的色彩来强化对比，很明显他们的网站在对比度上做过很深的功课，由于他们的灰色较浅的用的便是#767676。

下边我还想说说Salesforce。很荣幸我能同Salesforce设计系统团队一同工作，他们刚刚完成了Salesforce1移动客户端的设计工作。

这样的案例中很明显，他们采用了高对比度的色彩组合。假如你没有深入清楚过他们，很难想象这些设计师相对高对比度的色彩组合有多么执着的追求。不过我想你应该也已经明白控制对比度的好处，你的界面会更加先进。

以上信息由新概念科技（上海网站制作,上海网站制作）为您提供，越来越多精彩信息：http://www.jianzhan0.com/

关注“新概念科技”微信公众号，迅速获取互联网较新资讯