这些作为设计中的辅助技巧，可以使得残疾人士从理解、导航、交互以及互联网进行合理的使用，可以想象到在这个世界中，开发人员只需要是知道他们需要的访问可行性需要，而作为设计师的我们，就要使得变得更加完美。也许只有设计本身可以解决那些残缺人士对产品的烦恼吧。
下面的那些准则将会涵盖我们遇到的方方面面，以便产品的设计符合某种标准，当然最低的标准根据相关可访问性指南，那就是可访问性，其余的就是开发和测验了。
1.辅助技巧的使用不会阻碍创新
产品设计中没有任何的束缚，相信最后会是丑陋的、乏味枯燥、杂乱的。在这里将会介绍一些设计中的约束条件，并与我们的设计相结合。而这些设计基本原则只是为你打开一扇门，还有很多新的思路需要探索，而这也会导致我们的产品为用户提供越来越好的服务。
当读到这些基本的原则时，就会认为设计不希望与我们同行。
设计将为任何用户提供产品多样化的互动。
这里面包括盲人、色盲或者是视力不佳的，还有失聪以及听力困难的人，还有行动暂时困难或是永久性残疾的，最后还有认知困难的人。而设计者或许是年轻的、年老的、电工、普通人，以及那些为享受更高质量服务的群体。接受这些易用性原则，就像任何一条都是约束一样，这也是作为产品创造中最有的挑战的地方。
2.不要使用颜色作为传达信息的唯一视觉手段
这将会有助于那些对色彩识别有困难的人，比如：色盲、低视力人群、或者是盲人。
a、用颜色来突出主题要是可见的。例如，下面在灰度显示的例子中，有多少地方是错误的？
大多数人看这个例子都会说：验证码问题。这是因为输入框里面有一个三角形内感叹号显示出来的错误。
那么现在再对比同一个界面，只是这个填充颜色界面，有多少地方存在问题的？
随着色彩问题的深入，我们从文中四个方面解释。其实有很多的方案可以使得它能更加直观可接受的访问，例如对所有出现错误的地方使用红色的三角形图标。我们也可以使用文字提示，作为解释这里为什么出现了错误。也可以使用粗体框、粗体字体、下划线、斜体等其他更多选择，但是有一个基本原则：使用不少于一种颜色。而我们应该如何设计这个登录界面呢？而颜色又不是作为显示错误的唯一视觉手段。
3.确保文本与其背景之间有足够的对比度。
根据WCAG（注：Web内容无障碍指南），文本和文本背景之间的对比比率至少为 4.5 : 1 。如果我们使用24px或是19px的粗体，那么最低的比率是 3 : 1 。WCAG能帮助用户、或者是视力障碍的人能看到并阅读屏幕上的文字。这就意味着，当字体是24px或是19px的粗体或者是更大的时，可以在白色的背景上使用亮灰色＃959595。
对于较小的文字，可以在白色背景上使用亮灰色＃767676。另外，如果有一个灰色的背景，文字必须是暗。
当然有一些非常好用的工具可以帮助找到一个可访问的调色板，包括安全值，还有WebAIM’s的色彩对比检查，可以帮助检测已经使用的颜色。对于处于禁止状态的标志和元素不会被检测到，例如icon和菜单栏，还有占位符文本框。
下面是一个非常流行的博客站点，上面的文字就要低于标准，而且只有“M”的对比度符合标准。
从下面BBC的例子中通过显示这种色彩组合，可以很容易发现他们使用的是最轻灰度＃767676.
我很荣幸能参与到Salesforce的设计团队，在那里理解了Salesforce移动端对于颜色对比的原则。
分析发现采用高反差的颜色组合，他们的设计人员也进行了大量的实践，发现高对比度对于残疾人士更加好用，相信我们也能得出准许的最小对比比值不是很明显的在界面中显示出来。
4.提供键盘焦点和视觉焦点的指示
让我们来感谢现代化的web设计支撑的CSS(层叠式样式表)及所有，带来了的一切便利，如果没有CSS样式表，这将会很难在不同的设备和浏览器上提供一致的视觉体验。
现在，我们花点时间仔细看看CSS在互联网上使用最广泛的一个错误：那就是使得几乎所有的用户只能使用同一个站点和键盘输入，无论是那些视力障碍者还是普通用户，但是幸运的是由于css的开始被大量使用，包括Eric Meyer（注：css指南的权威人士），去除属性用于定型的：focus pseudo-class（焦点伪类）。
另外权威机构也深刻意识到了这点，删除在默认情况下的焦点样式，目的在于使得设计师和开发者替换他们原本可见一致风格的web页面，就像在chrome浏览器中按钮周围蓝色的光晕和IE及firefox的不太喜欢的灰色虚边框。
而问题是大多数的网站没有建立自己最主要的样式，这些焦点指示符也作为用户体验中最基本的存在，因为在互联网上再没有其他的了。
作为一个快速反应良好体验的网站，在用户打开站点的时候，就能看到公司的联系方式，也不会总是这样的，需要使用tab键进行切换，所以可以看到我们会看到联系方式但不是全部，这个时候只能考虑键盘和网页的互动效果了。
如果我们是在一个Mac上，那么可能需要启用在系统偏好设置>键盘>快捷键全键盘访问。
如果删除这些默认的焦点，也会有一些能体验到更快的在浏览器中使用。
在下面的例子中，BBC使用的颜色条来指示菜单栏的链接焦点。
twitter上使用默认焦点是文本提示和键盘焦点的组合，这个悬停时是灰绿色，产生三种不同的视觉效果，用来提示引导用户的操作。
当打开我们的主要浏览器时，如果删除了默认状态，那么就不会看到下面例子在chrome中看到蓝色药丸状的矩形框。
5.小心使用样式
近几年，我们经历了很多的css样式上的进化，现代设计已经相比较于传统的有了很大的区别，取而代之的是更加简约的属性和交互体验。如今的样式中有两个对于可访问性是至关重要的特征是：明确定义边界和明显的标签。
（1）样式无界限
下面是一个传统文本输入框的例子，它具有有限边界的属性的矩形。框内可以填充颜色，但是这里面没有这样做，另外还有一个可见的标签，且位于该字段的左侧。
明确定义边界的表单区域，为有认知障碍的用户带来行动上的方便是很重要的，知道点击区域的大小和位置，并使用相关规则或人的因素进行自适应匹配。对于有认知障碍的用户而言，可能很难找到视觉元素之间的相关性以及相互的作用的影响。
下面是非常流行笔记本应用程序的一个搜索栏。
如果整个屏幕上只有一个输入点，能猜出文本框的边界区域吗？点击“搜索笔记”，将会提示需要输入的内容。
这里从另一个比较流行的博客平台中的边框区域来举例子，当我需要在下面的区域输入文字的时候，屏幕上会在可单击的文本区域显示“说出你的故事……”
另外这里有一个相同的截图，我使用蓝色的矩形来显示可以添加文本框的边界区域，如果点击其他的区域将不会有任何的反应。
下面是以印象笔记作为例子，这里没有使用传统的视觉输入效果提示，而是为残疾人提供了更多的信息，在两条水平线之间有笔记标题，用户只要点击底部两条水平线之间的任何区域，都将可以输入自己的信息。
表格区域没有标签，标签区域主要是告诉我们此处文本框的目的，对于自动获取文本框焦点在这里非常有用，而且会一直存在。其中占位符就是一个显得适用的可替代标签。 他们通常是低对比度的，在下面的7个例子中，只有一个的对比度是满足我们需要的4.5:1的比例。
在下面的例子中，没有使用占位符文本框。那我们应该怎样进入到文本框中呢，例如左边蓝色框中，我输入自己的用户名，和email或者是trueblue号码？对于右边选择自己最喜爱食物的餐厅中的输入框，我是否需要输入地址、最大最小价格区间，上一步下一步做什么的流程呢！
这里的例子是在显示产品价格区间最简单的一种方法。我们可以在相对应的地方看到最大值和最小值。
6.避免用户身份信息泄漏的危机
这个问题在当今的互联网时代是一个最核心的问题，为了充分的理解这一点，需要看看w3c的相关设计指南。在这里可以看到：菜单、获取焦点、自动填充、结构、导航栏等许多的指南标准。而每一个模式都对应一套特定的可以预测的html语法，快捷键指南和ARIA属性的使用，这些ARIA的属性和键盘进行组合，可以快速的阅读访问。而且也可以更新。例如使用上下箭头键作为在列表中的简单交互。
非常不起眼的自动完成输入
下面也是自动预输入，只是它下面有相对应的列表。
这些都是采用相同的UI切换模式。用户主要在输入框输入信息上。然后会有一个结果出现在文本框的下方，用户可以通过鼠标直接点击，或者是使用方向键选择，
在下面的另一个案例中，个人隐私显示是自动完成的，不仅可以在用户界面中的过滤器列表选择一个项目，也可以选择编辑和通过单击铅笔和垃圾箱的图标编辑和删除。而添加的话就会自动完成身份验证。
这也会导致一个问题，由于都是自动完成的，就导致一些操作和状态在沟通上的困惑。而w3c和WAI也没有对此，定义出任何相关的规范。
当然，这种方法也适合菜单栏，从下面的例子中可以看到尽管非常相似，但是，左边的下拉菜单没有基于w3c的标准，可以进行相关的点击，而右边的就是一个标准的菜单。
一个菜单就是一个小小的部件，可以为用户提供一种选择，只是每个选择有可以像上面左边案例一样可以提供其他的选项，那么就不能称之为菜单，而且也改变了方向键和tab键的使用和交互模式，还有获取焦点的方式，而且下拉就会关闭。
不同于自动填充的例子讲述的那样，这种模式也可以很好的访问，对此我们需要啊知道两者之间在用户体验上的差别，了解这些微小的差别，将会指导设计如何的交互模型对于用户更加有用的，这将会导致选择更加适合自己的icon。
7.不要让用户徘徊
这一原则主要用于人机交互，这包括了常用键盘的用户和那些使用语音识别系统的Dragon NaturallySpeaking进行页面之间的互动，使用键盘和其他的辅助的用户，例如使用一些外接设备来控制屏幕中的内容，如果说页面中的一些元素不能被它们识别，那么就不会被控制，如果用户看不到界面中唯一的按钮了，那么就会出现问题，我们怎么可以使他们浏览那些空白的页面呢。
下面的截图中是从gmail和Dragon NaturallySpeaking提供我们谈到的确定下来的链接区域显示效果。用户可以大声讲话来激活这些链接，如何链接不可见的话，那么就会一直处于进程状态吗？或许会留下来一个空白页。
Alan Kay曾说：复杂的事情应该尽可能的使用简单的方案来使得变的更加容易解决。
我认为作为一个致力于障碍用户的业内人士。任何的复杂功能都可能被用户所使用，包括残疾人士也会用到，这就像下面Alan Kay所说的一样：突出最重要的内容，弱化次要的东西，
相反，悬停状态下的隐藏形式和背后的信息，应该使用其他更好的设计所替代。
（1）尽量避免使用次要的内部菜单形式的设计，
（2）减轻双击icon后的对比度和变暗难以辨认。
（3）使用有形的较不易识别，而使用一个简单的填充白色的icon，能更好的对悬停状态下的触发。
下面是linkedin上我的个人资料的一个例子。
下面的截图是我鼠标放在上面会发生的变化。
根据高亮部分的显示，可以看到有很多地方可以单独的编辑，包括我的姓名、职务、工作经历、教育、个人资料照片等，进一步使用可以看到，当鼠标悬停时，文字会变成蓝色，表示我正要点击的状态。
下面也还有一个可访问性的解决方案，就是在附近有一个小小的铅笔，而且是一直存在的。
当我悬停时，会变蓝。
对于这类型的解决方法，设计师会提出：这么“重”的效果，感觉不到轻松呀。
也许是这样的，它只是一种问题的解决方法，另外它只是出现在我自己的个人资料页面。我又会花多少时间来看自己的linkedin的个人资料呢？如果先对于那些经常使用的界面。另外如果我们不喜欢对旁边的图标使用铅笔，还有什么更好的可以替代？这些都可以深入思考。
下面是印象笔记的另外一个例子，这里的笔记列表窗口中，当用户的鼠标悬停在列中，四个右上角的图标就会自动显示出来。
在这种情况下，我通常会要求设计师将这四个图标始终显示出来。而且它们会使用绿白行，悬停时反白。
这种方案也会显得“重”，不过我们不是为了设计而设计，而是为了用户，为用户提供不同的需求和不同的技术多样化来访问互联网。
从表面上看起来似乎我们使用的元素受到了限制，从悬停的状态和设觉上都限制了你的创造力，如果说获得更多的用户青睐你的产品，这也是会反过来更加推动我们进行有创造力的设计。
有了正确的指导原则，就会发现在任何设计上的挑战，都会满足管理人员、市场营销、dribbble关注者以及所有用户的青睐，当然也包括残疾人士的需求能被满足。
作者：Jesse Hausler
https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b#.gxmm1li1x
