说说Web 无障碍设计

何为无障碍？

好的网站设计是具有人文气息的，不仅仅是视觉的美观，加载渲染速度的快慢。而是使尽可能多的人能够使用Web站点，即便他们有或多或少的缺陷。而「无障碍设计」，就是现代Web 开发中一个值得关注的分支，来让我们开发易访问的内容的网站。它主要体现在以下几点：

让视觉障碍者可以通过「屏幕阅读器」（Screenreaders）得到友善的听觉体验。
设计需要对听力障碍者友好，通过视觉内容能够做出替代。这部分相关的程序事实上仍未得到足够重视，任重道远。
行动障碍者的优化更多的着重于是否能让用户仅用鼠标的寥寥几个按键就能得到有效的操作。
认知障碍者的优化主要体现在风格统一，用户信息展示要明确，业务逻辑要简洁明了等等。

何为 WAI-ARIA?

关于WAI-ARIA (Web Accessibility Initiative's Accessible Rich Internet Applications 也就是：Web 无障碍倡议-无障碍富互联网应用) 具体可以看我翻译的：WAI-ARIA basics。

WAI-ARIA 核心内容有哪些？

1.Signpost and Landmark (路牌与地标)

WAI-ARIA 给浏览器增加了 role 属性，这允许我们给站点中的元素增加我们想要的语义属性。 ARIA 的角色属性值可以作为地标(Landmark) 来复制 HTML5 元素的语义化（例如 nav tag）。甚至超越HTML5 的语义，给不同的功能块提供路标（Signpost），例如 search, tabgroup, tab, listbox 等等。

用法举例：

如何用role

打开地址： mdn.github.io/learning-ar…

然后使用VoiceOver 绑定键（你可以在VoiceOver Utility 中设置） + U 访问，然后使用光标或者键盘来选择菜单选项。由于是结构化的内容，你通过键盘上下就能听到对应的标题内容来跳转需要的内容。你就能看到:

每一块都很分明，做的不好的，Landmarks 直接没有，或者一个页面一个banner 三个 navigation。

2.aria-label

<input type="search" name="q" placeholder="Search query" aria-label="Search through site content">
复制代码

这样当你聚焦的时候就会VoiceOver 会念出'Search through site content'。

3.aria-labelby

<input type="search" name="q" placeholder="Search query" aria-labelby="searchLabel">
<span id='searchLabel'>Search through site content</span>
复制代码

2.动态内容更新

内容动态更新是对于无障碍是一个很麻烦的事情，因为早年的网站并没有这个困扰，所以 WAI-ARIA 增加一个新的概念：实时区域（live region）。用属性aria-live便可以触发实时区域（role="alert" 也可以），它有四个值：

off: 默认值，更新不会提醒。
polite: 只有用户空闲的情况下提醒。
assertive: 尽快提醒。
rude: 会以打断用户操作的方式直接提醒。

通常来说 assertive 设置足以让你的更新在显示时按时序读出，因此，如果改变多次，那么屏幕阅读器也只会念出最后一个改变。

那么就会有一个问题，如果不断增加子元素，那就会不断的出现提示，增加的子元素的内容。

通过添加 aria-atomic="true" 属性告诉屏幕阅读器去读取整个元素的内容作为一个整体来判断是否提示已修改，而不是里头某个子元素增加删除了。例子如下：

<section aria-live="assertive" aria-atomic="true">
复制代码

以上内容大略的说说了几个重点，至于具体全面的 aria-* 属性/状态，请看 Definitions of States and Properties (all aria-* attributes) ，关于角色，请看Definition of Roles

3.优化键盘的无障碍操作

Tab 和确认键是HTML 默认实现的无障碍操作，通过对tabindex 的合理使用（并不是到处乱用），可以让webpage 的操作体验变得更好，另一方面组合aria-setsize 和 aria-posinset 能最大化给屏幕阅读器提供信息。 tabindex 文档

4.非语义控件的可访问性

这是现代复杂 Web 应用的最大问题，为了实现复杂需求会大量使用非语义元素来实现一个控件，对于屏幕阅读器而言是灾难，对于使用者而言页面等于不可用。

首先还是离不开角色，如果你想用 a 标签做一个 button。可以，加上role="button" 即可。
熟悉表单验证用的常规状态属性aria-required/aria-disabled/aria-selected 等属性。
另外理解刚刚说过的aria-setsize 和 aria-posinset 能最大化给屏幕阅读器提供信息。
aria-hidden="true" 对屏幕阅读器进行一定程度的隐藏。

If You Can't Measure It, You Can't Improve It

彼得•德鲁克（Peter F. Drucker）说过这么一句话，那么我们介绍两款相关的软件用来测量网站对于无障碍的实现程度。

The A11y Machine

npm install -g the-a11y-machinea11ym --standards WCAG2AA,HTML https://developer.mozilla.org/
复制代码

然后打开当前目录下的 ./a11ym_output/index.html ，你可以看到它对于整体的分析结果。然后note codes 指向的会是每一个Web内容无障碍指南（WCAG）的每一个实现细则，你可以就像完成一个个代码风格错误一样逐个根据情况修复它。

Accessibility Developer Tools

这是一款由谷歌可访问性团队开发的谷歌 Chrome Extension。然后操作如图：

顺带一说，Google 的Audits 功能是基于 Lighthouse 的，关于它可以再写一整篇文章，按下不表。

然后得到的结果会是这样的：

他的评价体系比起a11ym 不可不谓温和。但是根据它给出的信息，我们还是可以进行对应的优化。

比起发达国家，国内的互联网技术的发展日新月异，但是从大部分的主流网站可以看得出，除开大厂，大家对于无障碍的支持是不够的。但我觉得这仅仅是出于不了解，如果不得而知，那么就无从做起，所以我们更多地提及无障碍技术，推广它，便能让中文互联网世界的无障碍更进一步。

所以像Leonie Watson 说的：

It doesn't have to be perfect, Just a little bit better that yesterday.