设计中的可访问性:为 Web 设计之前要了解的 8 个因素
已发表: 2022-11-01大流行之后,人们过度依赖网络。 这种流行病使他们认为有多少在线购物或任何活动可以节省能源、精力和时间。 因此,他们更多地依赖网络。
然而,令人担忧的问题是,世界上五分之一的人口患有残疾,这会在网络交互时引起问题。 因此,是时候为大多数人在设计 Web 内容时忽略的设计带来可访问性了。
这就是为什么今天的博客将全是关于可访问性、重要性和指南的原因。 因此,深入了解设计中可访问性的细节。
什么是设计中的可访问性?
可访问性是指使设计易于理解并可供残障人士使用。 它确保每个人都理解设计而不会遇到任何困难。 简而言之,可访问性意味着构建任何人都可以理解或使用的工具、网站和其他产品,无论他们的残疾有多严重。
UX 设计中对可访问性的定义已经让您了解 Web 需要它的原因。 如果您仍然不清楚,请通过以下部分了解为什么可访问性在设计中很重要。
为什么需要让设计易于访问?

为残疾人创造易于理解的设计并不是为设计带来可访问性的唯一目的。 除此之外,可访问性使您可以针对广泛的人群并向他们推销您的产品或服务。 此外,它还提供其他好处。 看看为您的网站设计无障碍设计的必要性:
- 由于您可以定位更广泛的受众,因此会有更多的转化可能性。
- 实现业务目标会更容易。
- 销售额和投资回报率将会增加。
- 它提供了更高的用户体验,因为访问者可以轻松了解您通过设计传达的内容。
因此,这些是促使您为 Web 创建可访问设计的原因。 现在,如何制定富有成效的可访问性设计指南? 这会很有帮助,对吧? 继续挖掘以找到最有效的可访问性指南。

使设计易于访问的 8 个因素
在这里,我们研究了所有WCAG 2.1资源,并汇集了 8 个最佳因素,可帮助您创建可访问的网页、工具等。 因此,请检查以下八个因素并确保 UX 设计的可访问性:
适当的色彩对比

颜色对比度是指前景色和背景色在颜色和亮度上的差异。 根据网络可访问性,这意味着提供即使色盲也可以阅读的内容。 建议在背景图片和文字之间使用高对比度的颜色,以便于阅读。 对于图像,颜色对比度需要为4.5:1 。 此外,这个比例对于普通文本也是一样的。 此外,为粗体或大文本保持 3:1的颜色对比度。
如果您的文本和图像保持上述比例,任何人都可以阅读您的内容。
可读内容
颜色对比度不是使内容可读的唯一因素。 此外,您需要优化和格式化内容以增加可读性。 按照以下指南优化内容以获得更高的可读性:
- 在编写内容时尝试使用简短的句子和段落。
- 使用标题和图像使内容具有可扩展性。
- 不要在你的内容中使用复杂的词。
- 避免在内容中使用被动语态。
清晰的排版
为了提高设计的可访问性,您必须仔细选择内容的字体,因为有些字体难以阅读。 使用无衬线字体使您的内容易于理解。 除了选择可读的无衬线字体,如 Times New Roman、Arial、Calibri 等,您还需要记住一些事情。 如:

- 不要在您的内容中使用不同类型的字体。 为您的内容使用一种或最多两种字体。
- 您的字体大小应为14-16 pt 。
- 使用动画文本不是一个好的做法,因为它会降低内容的可读性。
- 尽量减少对文本使用大写和斜体样式。
时间和运动调整

大多数人在他们的文本中添加动作以使内容独特而复杂。 但是,在添加动作时,它们会妨碍内容的可访问性。 因此,残疾人在阅读您的网页内容时面临困难,而这里有视力障碍或失明的人数为22 亿。
这破坏了编写 Web 内容的目的,因为大部分观众无法阅读您的内容。
控制视频和音频

在网络上上传视频时,请确保添加了字幕。 此外,您应该提供视频和音频内容的成绩单。 此外,请停止为视频设置自动播放,因为这可能会让您的观众感到恼火。 让观众完全控制播放和暂停视频和音频。
一致的导航
Web 可访问性还取决于您网站的导航,您需要牢记以下几点来创建可访问的设计:
- 页面标题需要具有描述性。
- 向网站添加有意义的链接和站点地图。
- 应明智地添加菜单,以便任何人都可以了解页面的全部内容。
- 特别注意文档的页面布局和标题。
需要指南来删除 WordPress 中的页面标题吗?
浏览博客“在 WordPress 中删除页面标题的 5 种简单方法”。
转换按钮

您必须优化网站或内容的每个部分,其中 CTA 是您网站中最重要的部分之一。 因此,它需要引起访问者的注意。 使用大字体和有意义的词来使您的号召性用语更具转化率。 此外,保持适当的颜色对比度,否则您的 CTA 将不会对您的观众可见。
因此,为了增加 UX 设计的可访问性,请确保您保持良好的颜色对比度和字体大小。
非文本内容
您不仅应该优化基于文本的内容,还应该优化非文本内容,以便为您的产品、服务或网站解锁更高的可访问性。 现在,优化这些非文本内容,例如图标和图像; 您需要按照以下说明添加这些:
- 使用带有相关文本的可见图标,以便任何人都可以理解使用这些图标背后的上下文。
- 必须为您的非文本内容保持颜色对比。
- 图标大小需要大于文本。
- 不要忘记为您的非文本内容添加替代文本。
经常问的问题
可访问性和可用性是否相似?
可访问性和可用性并不相似。 可访问性意味着让世界各地的每个人(包括残疾人)都能理解 Web 内容和设计。 另一方面,可用性与用户与您网站的交互方式完全相关。
为了获得更高的可用性,您需要确保正确维护可访问性设计指南。 简单地说,可访问性和可用性是相互关联的。 如果不保持设计的可访问性,您的 Web 内容将无法获得完美的可用性。
想检查一些糟糕的网站设计示例吗?
查看博客“ 7个糟糕的网站设计示例”
一般的可访问性问题是什么?
用户在与您的产品和服务交互时可能会遇到各种可访问性问题。 例如,人们可能有色盲、行动不便、听觉和癫痫问题,这些问题会阻止他们与您的产品互动,这可能会造成巨大损失。
现在,要克服这些可访问性问题,您需要遵循上面讨论的可访问性设计指南。 因此,让您的网站不仅要考虑目标受众,还要考虑残疾用户。
包起来
为设计带来可访问性是一个非常重要的问题,因为世界上很大一部分人口是残疾人。 如果您的网络内容无法访问,您的市场将自动缩小。 因此,准备您的网页设计时要考虑到世界各地的所有人,并使其尽可能易于访问和包容。
好消息是,你已经知道怎么做了! 将所有上述可访问性因素一一应用于您的 Web 内容、产品或服务。 此外,您还可以查看网络上的可访问性设计示例以获取更多有关它的想法。 因此,开始采取措施制作更易于访问的 Web 内容或产品。

