Skip to content

Commit

Permalink
Merge pull request #5 from alibaba-fusion/docs/a11y
Browse files Browse the repository at this point in the history 
update
  • Loading branch information
@nianxiongdi
nianxiongdi authored Mar 28, 2019
2 parents 622a0c2 + b394382 commit e1611cf
Show file tree
Hide file tree
Showing 8 changed files with 402 additions and 80 deletions.
139 changes: 81 additions & 58 deletions site/zh-cn/a11y/part1/WAI-ARIA.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,30 @@

<!-- TOC -->

- [1. 什么是 WAI-ARIA](#1-什么是-wai-aria)
- [2. WAI-ARIA 的组成与使用规范](#2-wai-aria-的组成与使用规范)
- [2.1 ARIA 的组成](#21-aria-的组成)
- [`role`](#role)
- [`aria-*`](#aria-)
- [2.2 ARIA 的使用规范](#22-aria-的使用规范)
- [`role`必须使用有效的值](#role必须使用有效的值)
- [`role`的特定嵌套关系](#role的特定嵌套关系)
- [`role`的使用不能改变原生语义](#role的使用不能改变原生语义)
- [`role`的使用不能产生冗余](#role的使用不能产生冗余)
- [`aria-*`必须符合有效的名称](#aria-必须符合有效的名称)
- [`aria-*`必须使用有效的值](#aria-必须使用有效的值)
- [`aria-*`必需值需要被提供](#aria-必需值需要被提供)
- [`aria-labelledby`属性应引用存在于DOM中的元素](#aria-labelledby属性应引用存在于dom中的元素)
- [`role=application`需谨慎使用](#roleapplication需谨慎使用)
- [`role="presentation"`或`aria-hidden="true"`不能用在可聚焦元素上](#rolepresentation或aria-hiddentrue不能用在可聚焦元素上)
- [`ARIA`中使用的`id`必须唯一](#aria中使用的id必须唯一)
- [1. 什么是`WAI-ARIA`](#1-什么是wai-aria)
- [2. `WAI-ARIA`的组成与使用规范](#2-wai-aria的组成与使用规范)
- [2.1 `ARIA`的组成](#21-aria的组成)
- [`role`](#role)
- [`aria-*`](#aria-)
- [`ARIA`组成小结](#aria组成小结)
- [2.2 `ARIA`的使用规范](#22-aria的使用规范)
- [1. `role`必须使用有效的值](#1-role必须使用有效的值)
- [2. `role`的特定嵌套关系](#2-role的特定嵌套关系)
- [3. `role`的使用不能改变原生语义](#3-role的使用不能改变原生语义)
- [4. `role`的使用不能产生冗余](#4-role的使用不能产生冗余)
- [5. `aria-*`必须符合有效的名称](#5-aria-必须符合有效的名称)
- [6. `aria-*`必须使用有效的值](#6-aria-必须使用有效的值)
- [7. `aria-*`的`required properties`必须提供](#7-aria-的required-properties必须提供)
- [8. `aria-labelledby`属性应引用存在于DOM中的元素](#8-aria-labelledby属性应引用存在于dom中的元素)
- [9. `role=application`需谨慎使用](#9-roleapplication需谨慎使用)
- [10. `role="presentation"`或`aria-hidden="true"`不能用在可聚焦元素上](#10-rolepresentation或aria-hiddentrue不能用在可聚焦元素上)
- [11. `ARIA`中使用的`id`必须唯一](#11-aria中使用的id必须唯一)
- [3. WAI-ARIA总结](#3-wai-aria总结)
- [4. 参考资料](#4-参考资料)

<!-- /TOC -->

# 1. 什么是 WAI-ARIA
# 1. 什么是`WAI-ARIA`

[ARIA](https://www.w3.org/TR/wai-aria-1.1/)是"Accessible Rich Internet Applications"的缩写。它是 W3C 的 Web 无障碍推进组织(Web Accessibility Initiative / WAI)在 2014 年 3 月 20 日发布的可访问富互联网应用实现指南。它定义了一组可用于其他元素的 HTML 特性，用于提供额外的语义化以及改善缺乏的可访问性。

Expand All @@ -34,9 +35,9 @@
> - ARIA 是对 HTML 语义化的补充。它具备比现有的 HTML 语义化标签和属性更完善的表达能力，并让你页面中元素的关系和含义更明确
> - ARIA 规范为浏览器和解析 HTML 文档的辅助性技术提供了一种可以让人们以多种方式访问和使用 Web 的标准方法
# 2. WAI-ARIA 的组成与使用规范
# 2. `WAI-ARIA`的组成与使用规范

## 2.1 ARIA 的组成
## 2.1 `ARIA`的组成

```
<div role="button" aria-pressed="false">I'm a button</div>
Expand All @@ -50,44 +51,63 @@
- 标记元素的属性、状态

### `role`

关于`role`，我们需要知道它的取值不是随意的，而且大部分是为了补充HTML的语义，这些`role`的值可参阅下表，也可以[点击此处](http://whatsock.com/training/matrices/)获得完整的`role`分类与介绍：

| | | | | |
|-|-|-|-|-|
|alert|alertdialog|application|directory|
|document|feed|grid|gridcell|
|group|log|marquee|menu|
|menubar|menuitemcheckbox|menuitemradio|none|
|note|presentation|scrollbar|search|
|status|switch|tab|tablist|
|tabpanel|timer|toolbar|tooltip|
|tree|treegrid|treeitem| |
| role | role | role | role |
| -------- | ---------------- | ------------- | --------- |
| alert | alertdialog | application | directory |
| document | feed | grid | gridcell |
| group | log | marquee | menu |
| menubar | menuitemcheckbox | menuitemradio | none |
| note | presentation | scrollbar | search |
| status | switch | tab | tablist |
| tabpanel | timer | toolbar | tooltip |
| tree | treegrid | treeitem | |

### `aria-*`

`aria-*`往往是搭配`role`进行使用的。
`aria-*`往往是搭配`role`进行使用的。为了更方便读者理解如何进行搭配，我们总结了两种对`aria-*`进行分类的方式：

- 按照`全局属性`和`私有属性`分类

我们可以发现，有的`aria-*`可以被运用在所有的主语言元素上，即使此时`role`没有被使用。我们将这些`aira-*`被称作`global states and properties`，即全局状态或属性。

实际上，看似`role`没有被使用，其实它们是被应用在一个名为`roletype`的`role`上，`roletype`属于`base role`，能被所有的`role`继承。这些全局状态或属性的`aria-*`的取值可参见下表，也可以点击[此处](https://w3c.github.io/aria/#global_states)获取详细信息：

| aria-* | aria-* | aria-* |
| --------------------- | -------------------- | -------------------- |
| aria-atomic | aria-busy (state) | aria-controls |
| aria-current (state) | aria-describedby | aria-details |
| aria-disabled (state) | aria-dropeffect | aria-errormessage |
| aria-flowto | aria-grabbed (state) | aria-haspopup |
| aria-hidden (state) | aria-invalid (state) | aria-keyshortcuts |
| aria-label | aria-labelledby | aria-live |
| aria-owns | aria-relevant | aria-roledescription |

在学习如何搭配`role`与`aria-*`时，我们可以将`aria-*`分为`required properties`与`supported properties`进行学习。比如对于`role=button`，它有两个`supported properties`：`aria-expanded`与`aria-pressed`，我们可以选择加或者不加这两个属性；再比如对于`role=checkbox`，它有一个`required properties`：`aria-checked`，与`supported properties`不同，这个属性是必须使用的。
除`全局属性`之外的其他属性，就不能随心所欲的混合搭配，比如`aria-valuemax`就不能用在`role=button`上，这需要遵守一定的规范，这些规范可以[在官网上](https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties)找到官方说明，也可以[点击此处](http://whatsock.com/training/matrices/)获取比官网更直观易懂的aira role关系矩阵说明。

关于这些搭配的具体方式，我们可以[点击此处](https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties)找到详细说明。
- 按照`required`和`supported`分类

另外，我们还可以发现，有的`aria-*`可以被运用在所有的主语言元素上，即使此时`role`没有被使用。我们将这些`aira-*`被称作`global states and properties`，即全局状态或属性（实际上，看似`role`没有被使用，其实它们是被应用在一个名为`roletype`的`role`上，`roletype`属于`base role`，能被所有的`role`继承）。这些全局状态或属性的`aria-*`的取值可参见下表，也可以点击[此处](https://w3c.github.io/aria/#global_states)获取详细信息：
我们可以将`aria-*`分为`required properties`与`supported properties`。

| | | | |
|-|-|-|-|
| aria-atomic | aria-busy (state) | aria-controls
| aria-current (state) | aria-describedby | aria-details
| aria-disabled (state) | aria-dropeffect | aria-errormessage
| aria-flowto | aria-grabbed (state) | aria-haspopup
| aria-hidden (state) | aria-invalid (state) | aria-keyshortcuts
| aria-label | aria-labelledby | aria-live
| aria-owns | aria-relevant | aria-roledescription
比如对于`role=button`，它有两个`supported properties`：`aria-expanded`与`aria-pressed`，我们可以选择添加或者不添加这两个属性。

另外并不是说在 HTML 中使用了 ARIA，Web 页面就提高了可访问性了，就无障碍化了，如果 ARIA 没有用好，反而会把你带到另一个坑中，使你的页面可访问性更差。因此在使用 ARIA 时，我们需要仔细理解 ARIA 的使用规范。
比如对于`role=checkbox`，它有一个`required properties`：`aria-checked`，这个与`supported properties`不同，这个属性是必须添加的。

## 2.2 ARIA 的使用规范
关于这些搭配的具体方式，我们可以[在官网上](https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties)找到官方说明，也可以[点击此处](http://whatsock.com/training/matrices/)获取比官网更直观易懂的aira role关系矩阵说明。

### `role`必须使用有效的值
### `ARIA`组成小结

在上面的内容中我们介绍了`role`和`aria-*`，也提及了一些参考资源。在今后的使用中，有两张表格是每位开发者可以经常查阅的：
- [原生HTML标签与`role`的对照表](https://www.w3.org/TR/html-aria/#docconformance)
- [`role`与`aria-*`必填属性的对照表](http://whatsock.com/training/matrices/)

**另外并不是说在HTML中使用了`ARIA`，Web页面就可以提高可访问性、实现无障碍，如果没有用好，反而会把你带到另一个坑中，使你的页面可访问性更差。因此在使用`ARIA`时，我们需要仔细理解`ARIA`的使用规范。**

## 2.2 `ARIA`的使用规范

### 1. `role`必须使用有效的值

开发者需要确保所有的`role`的取值都是有效的，有效的`role`取值可[参见上文内容](#211-role)，比如：

Expand All @@ -96,7 +116,7 @@
<div role="bigbutton">I'm a big button</div> // 错误使用案例，"bigbutton"不是一个 ARIA role
```

### `role`的特定嵌套关系
### 2. `role`的特定嵌套关系

开发者在使用role的过程中需要注意，一些`role`必须被包含在特定的父元素中，一些`role`必须包含特定的子元素。比如：

Expand All @@ -118,7 +138,7 @@
</div>
```

### `role`的使用不能改变原生语义
### 3. `role`的使用不能改变原生语义

比如开发者想构建一个标签，可以按如下方式构建：

Expand All @@ -132,24 +152,26 @@
<h2 role=tab>heading tab</h2> // 错误案例，改变了原生语义
```

### `role`的使用不能产生冗余
### 4. `role`的使用不能产生冗余

比如下面添加了`role`是无用的，会带来信息的冗余：

```
<button role="button">press me</button>
```

### `aria-*`必须符合有效的名称
### 5. `aria-*`必须符合有效的名称

开发者不能使用一个不存在或者错误拼写的`aria-*`，比如：

```
aria-hidden="true" // 正确使用案例
aria-hudden="true" // 错误使用案例，错误拼写了"hidden"
aria-hide="true" // 错误使用案例，不存在该属性
```

为了确保使用的是存在且拼写正确的属性名称，开发者可以参考以下资料：
- [The ARIA Role Matrices](http://whatsock.com/training/matrices/)
- 推荐资料，建议保存链接以备日后频繁查询
- [Taxonomy of WAI-ARIA States and Properties](https://www.w3.org/TR/wai-aria-1.1/#state_prop_taxonomy)
- 分类介绍了`widget attributes`, `live region attributes`, `drag-and-drop attributes`, `relationship attributes`
- [Definitions of States and Properties (all aria-* attributes)](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def)
Expand All @@ -159,7 +181,7 @@ aria-hudden="true" // 错误使用案例，错误拼写了"hidden"
- [WAI-ARIA Attributes Module](https://www.w3.org/TR/wai-aria-1.1/#xhtml_mod)
- [WAI-ARIA Attributes XML Schema Module](https://www.w3.org/TR/wai-aria-1.1/#xhtml_schema_mod)

### `aria-*`必须使用有效的值
### 6. `aria-*`必须使用有效的值

开发者在使用`aria-*`时，需要对其赋予有效的值，比如：

Expand All @@ -172,18 +194,18 @@ aria-hidden="yes" // 错误使用案例，aria-hidden的可选值中无"ye
- [W3C WAI-ARIA 1.1 Supported States and Properties](https://www.w3.org/TR/wai-aria-1.1/#state_prop_values)
- 提供了ARIA状态和属性的允许取值

### `aria-*`必需值需要被提供
### 7. `aria-*`的`required properties`必须提供

开发者需要检查`role`是否含有必须提供的`aria-*`。

我们可以在这张[表格](http://whatsock.com/training/matrices/)中找到这些必须提供特定`aria-*`的`role`的详细说明，比如对于`role=heading`，它有一个必须要求提供的属性`aria-level`：
我们可以在这张[表格](http://whatsock.com/training/matrices/)（建议保存这张表格以备日后频繁查询）中找到这些必须提供特定`aria-*`的`role`的详细说明，比如对于`role=heading`，它有一个必须要求提供的属性`aria-level`：

```
<div role="heading" aria-level="1">I'm a heading</div> // 正确使用案例
<div role="heading" >I'm a heading</div> // 错误使用案例，未提供必需的aria-level属性
```

### `aria-labelledby`属性应引用存在于DOM中的元素
### 8. `aria-labelledby`属性应引用存在于DOM中的元素

开发者在给`aria-labelledby`属性赋值时，应注意与DOM元素中的id值对应，比如：

Expand All @@ -193,11 +215,12 @@ aria-hidden="yes" // 错误使用案例，aria-hidden的可选值中无"ye
<input type="text" aria-labelledby="test_one"></input> // 正确使用案例
<input type="text" aria-labelledby="test_two"></input> // 错误使用案例，文档中没有对应的id="test_two"
```
### `role=application`需谨慎使用

### 9. `role=application`需谨慎使用

简而言之，真正会使用`role=application`的场景是非常罕见的，除非需要模拟真实的桌面应用程序，因为当使用`role=application`时，屏幕阅读器会停止拦截击键，并将所有击键直接传递给浏览器，这会使得用户无法轻松浏览页面，更具体的介绍请[参考此处](https://www.w3.org/TR/using-aria/#using-application)。

### `role="presentation"`或`aria-hidden="true"`不能用在可聚焦元素上
### 10. `role="presentation"`或`aria-hidden="true"`不能用在可聚焦元素上

`role=presentation`或其同义词`role=none`，表示在它所在的元素中删除语义，在可聚焦元素上使用`role="presentation"`或`aria-hidden="true"`会导致该元素失去焦点，比如：

Expand All @@ -206,7 +229,7 @@ aria-hidden="yes" // 错误使用案例，aria-hidden的可选值中无"ye
<button aria-hidden="true">press me</button> // 错误使用案例
```

### `ARIA`中使用的`id`必须唯一
### 11. `ARIA`中使用的`id`必须唯一

重复的`id`是非常常见的一个错误，分配相同的`id`值会导致辅助技术忽略第二个实例，破坏内容的可访问性。

Expand Down
17 changes: 13 additions & 4 deletions site/zh-cn/a11y/part1/basics.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
<!-- TOC -->

- [无障碍背景](#无障碍背景)
- [1. 无障碍领域的术语](#1-无障碍领域的术语)
- [2. 屏幕阅读器及其原理](#2-屏幕阅读器及其原理)
- [3. 参考资料](#3-参考资料)
- [1. 无障碍领域的术语](#1-无障碍领域的术语)
- [2. 屏幕阅读器及其原理](#2-屏幕阅读器及其原理)
- [3. 参考资料](#3-参考资料)

<!-- /TOC -->

Expand Down Expand Up @@ -51,7 +51,16 @@

无障碍辅助技术有很多，比如屏幕放大镜，屏幕阅读器，文本转语音软件，语音识别软件等，其中最常使用的便是屏幕阅读器（screen reader）。屏幕阅读器通过大声播放屏幕上展示的内容，帮助盲人或弱视群体使用应用。

现在有很多屏幕阅读器，例如 Windows 的 NVDA 和 JAWS，Chrome 的 ChromeVox，以及 OS X 的 VoiceOver。[根据相关机构统计](https://webaim.org/projects/screenreadersurvey7/)，截止到 2017 年 10 月，约有 46%的用户使用 JAWS，32%用户使用 NVDA，12%的用户使用 VoiceOver。
现在有很多屏幕阅读器，例如:
- MAC
- [VoiceOver](https://help.apple.com/voiceover/mac/10.14/)
- Windows:
- [NVDA](https://www.nvaccess.org/)：NVDA是一个免费开源的读屏软件
- JAWS
- Chrome插件
- [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)：一款浏览器下使用的屏幕阅读器

[根据相关机构统计](https://webaim.org/projects/screenreadersurvey7/)，截止到 2017 年 10 月，约有 46%的用户使用 JAWS，32%用户使用 NVDA，12%的用户使用 VoiceOver。
**屏幕阅读器也是无障碍测试的主要工具。**

辅助技术通过 `可访问性树` 与页面进行交互，构建完整、健康的 `可访问性树` 是提高网站可访问的关键。 `可访问性树` 与 `DOM 树` 有什么关联呢？
Expand Down
8 changes: 4 additions & 4 deletions site/zh-cn/a11y/part2/content-creation-link/page1.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@

<!-- TOC -->

- [1. 跳过多个页面重复出现的导航栏](#1-%E8%B7%B3%E8%BF%87%E5%A4%9A%E4%B8%AA%E9%A1%B5%E9%9D%A2%E9%87%8D%E5%A4%8D%E5%87%BA%E7%8E%B0%E7%9A%84%E5%AF%BC%E8%88%AA%E6%A0%8F)
- [1.1 正常页面（即 anchor 可用的页面）](#11-%E6%AD%A3%E5%B8%B8%E9%A1%B5%E9%9D%A2%E5%8D%B3-anchor-%E5%8F%AF%E7%94%A8%E7%9A%84%E9%A1%B5%E9%9D%A2)
- [1.2 单页应用](#12-%E5%8D%95%E9%A1%B5%E5%BA%94%E7%94%A8)
- [2. 参考资料](#2-%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99)
- [1. 跳过多个页面重复出现的导航栏](#1-跳过多个页面重复出现的导航栏)
- [1.1 正常页面（即 anchor 可用的页面）](#11-正常页面即-anchor-可用的页面)
- [1.2 单页应用](#12-单页应用)
- [2. 参考资料](#2-参考资料)

<!-- /TOC -->

Expand Down
Loading

0 comments on commit e1611cf

Please sign in to comment.