可用性设计

可用性设计（design for accessibility）

因为有一门课程的作业需要制作网页来展示作业，所以我艰难入门前端学习。在设计思维和编程思维的碰撞中，加深了自己对可用性设计的理解。

我理解的可用性设计，指的是设计可以提供给广泛的人群使用，这里面包括一些视觉、运动、听觉、语言或者认知方面有障碍的个人。有人会认为设计广泛的可用性成本很高昂，会让设计增加额外的功能或者内容，从而增加开发成本。因此，广泛的可用性设计就不应该在要求快速迭代的互联网产品中实现。但其实想要纠正这些问题，并没有想象中那么复杂。首先谈谈可用性设计的必要性。

可用性设计的必要性

从设计方面来说，作为设计师，是有能力和责任确保用户都能访问我们设计的内容。世界上有多达10亿的在某种程度上有残疾的人。让用户都可以访问到我们的设计的好处是，它能为用户带来更好的体验。

从商业性来说，可用性更好的网站有着更好的搜索结果，可以覆盖更多的受众，它们是SEO-friendly的，下载时间更快，也更有利于后续的编程完善。

在网页开发上来讲，最普遍用的就是以下这些辅助技术：屏幕阅读工具（screen readers）屏幕放大工具 （screen magnifiers）语音识别工具 （speech recognition tools）

以下是我觉得能够比较好提高网页可用性设计的方法，仅供大家参考，也欢迎大家提出更多的想法。

1、增加颜色对比

具有良好色彩对比度能够让人更容易阅读。颜色对比是一个经常被忽视的问题。如果颜色对比度比较低，视力低下的人就不容易从背景颜色中读取文本。根据 w3c（https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html），文本与其背景之间的对比度，应该至少为4.5:1。对于比较大和比较粗的字体，比率会不一样，因为更大的字和更粗的字在比较低的对比度下，更容易阅读。

测量颜色对比度的工具：https://usecontrast.com/

2、不要只使用颜色来使关键信息易于理解

当需要强调某些重要信息的时候，显示动作或提示响应的时候，不要只使用颜色作为唯一的视觉提示。否则色盲或者色弱的人很难理解到强调的内容。可以尝试使用颜色以外的指示。例如文本标签或者图案。在屏幕上显示错误的时候，不要只是使用红色文本，可以添加图标。如果段落中有链接文本，可以给链接文本增加视觉显示。例如加粗或者下划线文本样式，以便链接突出显示。

当仅仅只使用颜色来区分数据，具有更复杂信息（例如图表和图形）的元素可能特别难以阅读。可以使用其他视觉方面来传达形状，标签和大小等信息，也可以结合多种模式，使得差异更加明显。

在设计的时候，其实有一个小技巧，就是把整个设计变成黑白，看看是否依旧能够理解其中的内容。或者可以使用ColorOracle，它可以实时显示有常见色觉障碍的人看到的内容。

3、设计可用的选中提示（焦点指示）

有的时候，在hover链接、输入框和按钮周围会有颜色轮廓提示。默认情况下，浏览器使用css class的时候会显示这样的轮廓。这样选中的样式可以帮助人们了解哪个元素是目前focus的，并帮助他们找到网站的位置。

普遍需要选中样式的内容有：链接、表单、按钮、菜单栏等等。他们需要一个选中提示（或者说焦点指示），来让他们跟其他元素区分开来。在设计上也并不是完全不能发挥的，设计师可以设计出符合网站风格的选中状态，一个具有良好对比度的选中状态。

4、在表格字段和输入中使用标签或者说明

很多表单在设计的时候会使用占位符文本作为标签。占位符文本通常是灰色的，对比度比较低，比较难阅读。有的时候写着写着就忘记了自己在写什么。因为你一旦开始输入内容，标签就会消失。我个人觉得最好的标签它应该不会消失，即使这个人已经输入完信息也是如此。当然我也能理解设计师为什么会这样设计，这其实是部分牺牲了可用性而倾向于简单显示。一直显示标签不代表着要显示不必要的信息，只需要确保提供必要的线索。

5、为图像和其他非文本内容编写有用的替代文本

有两种方式可以呈现替代文字：（1）使用<alt>在图像元素的属性内；（2）在图像本身的上下文或者周围环境。尝试描述图像表达的意思，以及对叙述的重要性，而不仅仅只是摆一张图片。如果图片纯粹是装饰性的，那么使用第一种方法就好。

6、在内容上使用正确的标记

标题可以标记内容开始的位置。标题还可以建立页面内容的层次结构。直接在网页的html表现为<h1>等标签来标记title。在开发的时候，使用适当的结构元素非常重要。html元素向浏览器传达的内容包括如何呈现或者处理这些内容。页面的结构对于安排内容非常重要。这样做不仅可以让用户看到所有标题列表，也可以做到按标题类型跳转内容，或者直接导航到各个标题。

7、支持键盘导航

有运动障碍的人通常都依赖键盘来导航内容。一个好的方法是仅仅使用键盘来测试网站，在链接和表单的地方使用tab键来移动，使用enter键来选择元素。验证所有交互式的组件是否可以有序运行。如果可以不使用鼠标浏览网页，证明网页做得非常accessible。

最后，需要注意导航的大小，包括链接的数量和文本的长度。对于某些残疾人来讲，进行长菜单的切换可能非常困难。在html里面使用<main>或<nav>，将使导航更容易。