设计及搭建网站无障碍功能的13条指导方针

通过 Fiona Wang 11 June, 2020

inbound marketing CMS website design

如今打造网站便捷很多,尤其有很多强大的CMS(内容管理系统)平台背书。要想网站出色,你须时刻将用户体验UX放在第一位。用户体验对于网站和业务的成功与否有决定性的因素。曾有Forrester调研指出,一个完美的用户体验设计可以将转化率提高四倍。

说到用户体验,人们最先想到的就是交互式设计(Responsive Design)、图片质量以及网站速度等等,这些固然都很重要,但还有一个重要领域往往没有获得应有的重视:网站无障碍规范。

WebsiteAccessibility

什么是网站无障碍规范 (Website Accessibility)?

通常指为残障人群专设的一系列标准和参考,让该群体也可以使用网站来获取信息。这些标准由各国政府机构颁布,保障残障人士也可以有效使用网站。

网站无障碍功能主要关注的人群包含:

  • 听觉障碍
  • 肢体障碍
  • 语言障碍
  • 视觉障碍
  • 神经系统障碍
  • 认知障碍

其实做好网站无障碍功能,获益的远远不止残障人群。带宽有限和网络条件不好或使用更小屏幕(比如智能手表等),以上这些情况将同样受益于网站无障碍功能。如果能好好贯彻网站无障碍的各项要求,你将为所有人创建一个更好的用户体验,包括发展中国家的人群和年老人群都会得益。基于以上考虑,World Wide Web Consortium (W3C)万维网联盟创建了一套规则,称作 网络内容无障碍指导方针(WCAG2.1),企业可以学习参考,更好地服务各自用户。

WebsiteAccessibility2-06

13条网络无障碍合规指导方针

WCAG创建的标准集中关注以下三种情况:

  • 盲人使用屏幕阅读器
  • 部分残障人士有用户界面和设计调整需求(比如,视觉缺陷、色盲、癫痫症)
  • 动作技能缺陷人士使用键盘

13条指导方针实际都可以归结为以下四大原则:

网站无障碍原则1:可感知的

这条原则是指网站内容及用户界面可以不同方式被所有人群感知。换句话说,信息从任何感官来说都是清晰可见的:

  • 为分文本类内容提供文本替代,从而使其能以合适的形式被感知(比如,盲文、符号、大号字体等)
  • 为用户简化内容的视听感知过程(比如,将前景元素与背景分离)
  • 创建能以多种不同方式被呈现的内容(比如,一个更简单的布局)
  • 为多媒体提供字幕(比如,音频描述、手语)

网络无障碍原则2:可操作的

所有用户界面组成部分都应以某种方式展现,保证任何用户都可以操作。简单来说,你的界面不能要求一项用户无法实现的动作。

  • 提供导航功能,帮助人们找到内容
  • 让人们在键盘以外有其它输入方式
  • 给人们足够时间消化内容
  • 使用键盘可以触发每一个功能

网络无障碍原则3:可理解的

受众必须要能正确理解公司想要传递的信息和界面。

  • 确保内容以可以充分预知的方式呈现
  • 确保文本易于理解和阅读
  • 帮助人们避免错误,并且配备纠错功能(比如,错误标识)

网络无障碍原则4:抗差性

随着科技发展,你的内容要始终确保是无障碍可达的。关于此点只有一个简单的指导方针:

  • 实现最大化兼容性,令新科技可使用(比如,辅助科技)

以上简略指导方针都可以帮你创建并调整合适且优秀的用户体验,满足大众的需求。

如何确保网站无障碍合规:5个小建议

你已经了解了以上指导方针,那么下一步呢?以下是你可以优先考虑的具体实施步骤。

1. 添加描述性的图片Alt属性

图片Alt属性不仅对于SEO很重要,对于用户体验来说同样有很大影响力。为图片添加描述性的Alt属性,你其实让屏幕阅读器可以为用户提供正确的细节。确保不论是信息类图片还是外展链接图片,你都添加合适的Alt属性。

2. 确保你的内容管理系统(CMS)支持网站无障碍操作

在选择你的内容管理平台(CMS)时,你可先做一些调研。清晰了解该CMS如何配合创建无障碍内容。

3. 以清晰逻辑组织内容结构及标题

你应该以流畅的逻辑组织标题及提纲内容。这样,所有用户都可以更方便了解你的内容。使用级联样式表(CSS)展现结构与表述差异。比如,如果你的Header标题只是为了网页的展现,那么最好创建一个新的CSS以规定文本特征。同样值得注意的是,你需要在标题层级保持一致性。如果跳过了一层,比如说从H2到H4,屏幕阅读器就会以一种混乱的状况呈现,用户会觉得有一部分内容遗漏了。

4. 合理使用颜色

不少人都有色盲或色弱的问题,在使用颜色时,你需要合理选择以防止这些人士无法看到你的内容。比如,红绿色盲是很常见的。如果你用这两种颜色标示一些必须填写的表格部分,有些用户是无法辨识的。一个很好的解决方案就是配合使用颜色和指示标记。空格和边框都是很好的视觉分割内容板块的方式。

5. 创建键盘无障碍的内容

很多人都无法使用鼠标和触控板,只能用键盘功能,比如tab键和箭头来浏览网页。为了创建良好的用户体验,确保你的tab顺序与视觉顺序一致,从而用户可以流畅阅读每段内容。如果内容很长,那么加入跳跃键,从而用户可以轻易跳跃至他们想看的内容。

创建众乐乐的用户体验

每个来到你网站的用户都为了寻找他们所需要的信息,如果你的网站不是完全无障碍的,其实你会流失部分用户。

有一些工具比如accesiBe,可以自动操作WCAG合规。这些工具很容易使用(五分钟就可以下载)、成本低廉,并且可以24小时不断持续提供合规支持。

如果你可以为每一个受众都提供包容性的网站体验,你会赢得良好声誉,并建立起更紧密的信任关系。网络无障碍合规的影响远远不限于名称本身。点滴小流,终成江海。

在寻找有创意的设计吗?

和我们谈谈吧!