说说Web 无障碍设计

何为无障碍？

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

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

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

1. 首先仍是离不开角色，若是你想用 a 标签作一个 button。能够，加上role="button" 便可。
2. 熟悉表单验证用的常规状态属性aria-required/aria-disabled/aria-selected 等属性。
3. 另外理解刚刚说过的aria-setsize 和 aria-posinset 能最大化给屏幕阅读器提供信息。
4. 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-machine

a11ym --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.

推荐阅读：

• Web内容无障碍指南 (WCAG) 2.0
• Web 无障碍倡议-无障碍富互联网应用 基础

博客原文