alibaba-fusion · youluna · Mar 27, 2019 · Mar 26, 2019
diff --git a/site/zh-cn/a11y/index.md b/site/zh-cn/a11y/index.md
@@ -15,4 +15,5 @@
 
 <!-- -   1. [DEVELOPING](./part3/develop.md) -->
 
-1. [检验及测试](./part3/testing.md)
+1. [开发辅助工具](./part3/develop.md)
+2. [整体测试](./part3/testing.md)
diff --git a/site/zh-cn/a11y/part2/checklist.md b/site/zh-cn/a11y/part2/checklist.md
@@ -2,97 +2,84 @@
 
 <!-- TOC -->
 
--   [2.2 开发 Checklist](#2.2-开发-Checklist)
+-   [1. 开发 Checklist](#1-开发-Checklist)
 
-    -   [2.2.1 常规](#2.2.1-常规)
-    -   [2.2.2 语义化标签](#2.2.2-语义化标签)
-    -   [2.2.3 图片](#2.2.3-图片)
-    -   [2.2.4 表单](#2.2.4-表单)
-    -   [2.2.5 颜色和对比度](#2.2.5-颜色和对比度)
+    -   [1.1 常规](#11-常规)
+    -   [1.2 语义化标签](#12-语义化标签)
+    -   [1.3 图片](#13-图片)
+    -   [1.4 表单](#14-表单)
+    -   [1.5 颜色和对比度](#15-颜色和对比度)
 
--   [2.3 参考文献](#2.3-参考文献)
+-   [2. 参考文献](#2-参考文献)
 
-## 2.2 开发 Checklist
+## 1. 开发 Checklist 
 
 对上节的知识了解后，我们为开发者提供一个改造的清单，我们所罗列的都是无障碍不可避免的问题，按照清单修改，页面基本支持无障碍，请开发者对如下规则进行阅读：
 
-### 2.2.1 常规
+### 1.1 常规
 
 -   [ ] 设置 lang 让屏幕阅读器选择语言去读取，lang 参数值遵循[ISO_639-1 规则](https://zh.wikipedia.org/wiki/ISO_639-1)，
 
     ```html
-    <html lang="en">
-        或
-        <html xml:lang="en"></html>
-    </html>
+    <html lang="en"></html>
+    或
+    <html xml:lang="en"></html>
     ```
 
--   [ ] 所有标签属性要设置唯一 ID
+-   [ ] 标签属性的id需要全页面唯一
 
 -   [ ] 页面上的文本，要按照书写习惯添加标点符号。屏幕阅读器在读取文本标点符号适时出现停顿
 
 -   [ ] 当组件或元素聚焦时，要出现有聚焦的边框标志(比如按钮聚焦时，有蓝色边框)，使得与不聚焦状态做区别
 
 -   [ ] 所有按钮文本描述都是可读取的，icon 类按钮要有`aria-label`或`aria-labelledby`来辅助描述
 
--   [ ] 视频要添加字幕，通过引入文件，如下：
-
-```html
-<video controls>
-    <source src="movie.mp4" type="video/mp4" />
-    <track
-        label="English Captions"
-        kind="captions"
-        srclang="eN"
-        src="captions.vtt"
-        default
-    />
-    <track
-        label="Subtitulos en español"
-        kind="captions"
-        srclang="es"
-        src="subs.vtt"
-    />
-</video>
-```
+-   [ ] 视频需要以引入字幕文件的方式添加字幕，如下：
+
+    ```html
+    <video controls>
+        <source src="movie.mp4" type="video/mp4" />
+        <track
+            label="English Captions"
+            kind="captions"
+            srclang="eN"
+            src="captions.vtt"
+            default
+        />
+        <track
+            label="Subtitulos en español"
+            kind="captions"
+            srclang="es"
+            src="subs.vtt"
+        />
+    </video>
+    ```
 
 -   [ ] 对于一些文本属性，屏幕阅读器读取属性优先级如下(只读取优先级最高的)：aria-labelledby，aria-label，alt，title
 
     对于同一个元素 aria-labelledby，aria-label 只能使用一个(在同时使用时，用户代理在生成可访问的名称属性时将为 aria-labelledby 分配更高的优先级)。
 
--   [ ] 非语义标签的键盘事件捕获，要使用 onkeydown ，IE 浏览器不会为非字母数字键触发按键事件
+-   [ ] 非语义标签的键盘事件捕获，要使用onkeydown ，IE浏览器不会为非字母数字键触发按键事件
 
 -   [ ] 代码的逻辑顺序与显示的顺序要保持一致
 
--   [ ] 对于重复菜单的跳过，请[参考](../content-creation-link/page1.md)
+-   [ ] 需要能跳过页面重复出现的菜单，请参考上文[跳过多个页面重复出现的导航栏](../content-creation-link/page1.md)
 
--   [ ] 关于元素的隐藏，请[参考](../content-creation-link/page2.md)
+-   [ ] 关于元素的隐藏，请参考[详情](./content-creation-link/page2.md)
 
-### 2.2.2 语义化标签
+### 1.2 语义化标签
 
--   [ ] 务必使用语义化标签,并且 body 的直接子元素必须是以下几类标签。对于更多语义化标签请[查阅](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
+-   [ ] 务必使用语义化标签，并且body的直接子元素必须是以下几类标签，其次以下语义化标签与role为等价关系。对于更多语义化标签请[查阅](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
 
-    ```html
-    <header>
-        or role="banner" //`
-        <header>
-            `与`role="banner"`等价
-            <nav>
-                or role="navigation"
-                <main>
-                    or role="main"
-                    <article>
-                        or role="article"
-                        <aside>
-                            or role="complementary"
-                            <footer>or role="contentinfo"</footer>
-                        </aside>
-                    </article>
-                </main>
-            </nav>
-        </header>
-    </header>
-    ```
+
+    | 语义化标签 | role | 
+    | :------| ------: | 
+    | header | banner | 
+    | nav | navigation |
+    | main | main |
+    | article | article |
+    | aside | complementary |
+    | footer | contentinfo |
 
 -   [ ] 每个页面，有且仅有一个`<main>`标签或 role="main"的元素，并且为页面的主题内容
 
@@ -102,20 +89,20 @@
 
 -   [ ] 要正确使用如下标签：
 
-```
+    ```
     b	粗体文本
     em	着重文本
     i	斜体字
     strong 加重语气
     ins	删除文本
     del	下划线文本
-```
+    ```
 
 -   [ ] 标题要使用 h1~h5，不能出现 h 标签跳跃，遵循从 h1 到 h5 顺序
 
-### 2.2.3 图片
+### 1.3 图片
 
--   [ ] 图片要设置 alt 属性或者 longdes 属性
+-   [ ] 图片要设置 alt 属性或者 longdesc 属性
 
     -   对于有意义的图片，要设置 alt 并且描述文字简洁，不冗余，例如 logo：
 
@@ -131,7 +118,7 @@
 
 -   [ ] 不要使用图片标题，使用文本标题
 
-### 2.2.4 表单
+### 1.4 表单
 
 -   [ ] 表单元素的 label 要遵循约定关系[WCAG 用户输入目的的列表](https://w3c.github.io/WCAG21-zh/index.html#input-purposes)
         遵循这些规范有助于浏览器自动回填数据、屏幕阅读器更好地传达信息
@@ -140,19 +127,18 @@
 
     使用 Tab 键可以顺序的切换表单元素
 
-    对于 label 描述表单控件,例如日期，提供具体的格式，方便用户输入，例子如下：
-
-    ```
-        <label for="date">日期（日-月-年）</label>
-        <input type="text" name="date" id="date" />
+    对于 label 描述表单控件，例如日期，提供具体的格式，方便用户输入，例子如下：
+    ```html
+    <label for="date">日期（日-月-年）</label>
+    <input type="text" name="date" id="date" />
     ```
 
-### 2.2.5 颜色和对比度
+### 1.5 颜色和对比度
 
 -   [ ] 不要依赖单一元素。例如：在展示图片、表格时，用户要加入纹理或图案。保证色盲用户能辨别，不用担心颜色会影响他对数据的理解。
 
-## 2.3 参考文献
+## 2. 参考文献
 
 -   [Princeton Content Creator Checklist](https://ux.princeton.edu/accessibility/accessibility-checklist)
 -   [MSU A11y Checklist](https://webaccess.msu.edu/Help_and_Resources/checklist.html)
--   [a11yproject Checklist](https://a11yproject.com/)
+-   [The A11Y Project](https://a11yproject.com/)
diff --git a/site/zh-cn/a11y/part2/component-usage.md b/site/zh-cn/a11y/part2/component-usage.md
@@ -1,30 +1,33 @@
 <button>[回到首页](../index.md)</button>
 
--   [2.1.1 组件的分类](#211-组件的分类)
-    -   [2.1.1.1 数据展示类](#2111-数据展示类)
-    -   [2.1.1.2 即时反馈类](#2112-即时反馈类)
-    -   [2.1.1.3 菜单与导航类](#2113-菜单与导航类)
-    -   [2.1.1.4 表单类](#2114-表单类)
--   [2.2 参考文献](#22-参考文献)
 
-# 2.1 Funion 组件使用
 
-Fusion 是一种旨在提升设计与开发之间 UI 构建效率的工作方式。我们致力于对无障碍的支持，其中 Fusion 基础组件已提供无障碍支持，开发者可以进行测试和使用，并提供[Fusion](https://fusion.design/component)无障碍说明文档和使用。所有非组件 API 属性都可以透传至 DOM 元素(我们可以传递参数，改变 aria 和 role 属性)。
+- [1. 使用无障碍的Fusion组件](#1-使用无障碍的Fusion组件)
+- [2. 组件的分类](#2-组件的分类)
+    -   [2.1 数据展示类](#21-数据展示类)
+    -   [2.2 即时反馈类](#22-即时反馈类)
+    -   [2.3 菜单与导航类](#23-菜单与导航类)
+    -   [2.4 表单类](#24-表单类)
+- [3. 参考文献](#3-参考文献)
 
-经过上一章节的学习，对无障碍有初步的认识，如何进行改造呢，下面我们给我一些指引：
+## 1. 使用无障碍的Fusion组件
 
--   对于组件，我们为开发者内置 role 和一些 aria-*属性，开发者也可以对非组件 API 属性都可以透传至 DOM 元素，进行修改 role 和 aria-*参数，但是要注意对应关系，请[参考](../part1/WAI-ARIA.md)
--   对一些特殊的组件传递参数才能支持无障碍，设置`id`,`autoFocus`和传参数，如下：
-    -   id - `Balloon`,`Rating`
-    -   autoFocus - 弹层自动聚焦，例如`Dialog`,`Overlay`,`Dropdown`
-    -   传参数 - 有些组件需要根据具体的业务，实现不同的可访问性，这里为开发者内置一些参数，想使用无障碍的时候，用户只需要根据现有的需求，选择对应的内置参数，例如设置 aria-label,以下组件需要用户传参数才支持无障碍组件如下：`NumberPicker`、`Transfer`
+Fusion 是一种旨在提升设计与开发之间 UI 构建效率的工作方式。我们致力于对无障碍的支持，其中 Fusion 基础组件已提供无障碍支持，开发者可以进行测试和使用，并提供[Fusion](https://fusion.design/component)无障碍使用和说明文档。所有非组件 API 属性都可以透传至 DOM 元素(我们可以传递参数，修改aria和role属性)。
+
+经过上一章节的学习，对无障碍有初步的认识，如何进行改造呢，下面给出一些指引：
+
+-   对于组件，我们为开发者内置role和特定aria-*属性，开发者也可以对非组件 API 属性都可以透传至 DOM 元素，进行修改 role 和 aria-*参数，但是要注意对应关系，请[参考](../part1/WAI-ARIA.md)
+-   对一些特殊的组件传递参数才能支持无障碍，设置`id`，`autoFocus`和传参数，如下：
+    -   id - `Balloon`，`Rating`
+    -   autoFocus - 弹层自动聚焦，例如`Dialog`，`Overlay`，`Dropdown`
+    -   传参数 - 有些组件需要根据具体的业务，实现不同的可访问性，这里为开发者内置一些参数，想使用无障碍的时候，用户只需要根据现有的需求，选择对应的内置参数，例如设置 aria-label，以下组件需要用户传参数才支持无障碍组件如下：`NumberPicker`、`Transfer`
 -   我们为开发者提供无障碍的使用文档，请[参考](https://fusion.design/component)组件 API 中`ARIA and KeyBoard`
 
-## 2.1.1 组件的分类
+## 2. 组件的分类
 
-本部分我们会为开发者介绍具体如何对组件改造，使开发者更好的使用组件,分如下四类：
+本部分介绍具体如何对组件改造，让开发者更好的使用组件可访问性，分如下四类：
 
-### 2.1.1.1 数据展示类
+### 2.1 数据展示类
 
 -   `Icon`
     -   图标类元素
@@ -38,9 +41,9 @@ Fusion 是一种旨在提升设计与开发之间 UI 构建效率的工作方式
     -   默认为纯数据展示的表格 - 若作为布局使用复杂功能，需自定义 role 等属性，[参考文档](https://fusion.design/component/table)
 -   `Tag`
     -   删除类标签，删除按钮默认朗读为“删除”，可自定义文案，自定义方式参考[国际化语言包的设置](https://fusion.design/component/config-provider)
--   `Paragraph`, `Progress`, `Timeline`, `Collapse`
+-   `Paragraph`、`Progress`、`Timeline`、`Collapse`
 
-### 2.1.1.2 即时反馈类
+### 2.2 即时反馈类
 
 -   `Message`
     -   默认 role="alert"，当出现在 document 中时，屏幕阅读器会优先朗读它的内容。 
@@ -58,14 +61,14 @@ Fusion 是一种旨在提升设计与开发之间 UI 构建效率的工作方式
     -   可通过`autoFocus`开启默认聚焦，焦点为弹层内容上第一个可聚焦元素 `<Overlay autoFocus />` 
     - 请务必设置可聚焦的 trigger 元素
 
-### 2.1.1.3 菜单与导航类
+### 2.3 菜单与导航类
 
 -   菜单
 
     -   `Menu`
         -   支持键盘导航
         -   默认 role="menu"，子元素为"menuitem"，菜单自定义单选子元素为"menuitemradio"，菜单自定义多选子元素为"menuitemcheckbox"
-        -   使用`selectMode`API 改变组件可选状态后，默认 role="listbox"，跟是否多选改变`aria-multiselectable`的值，子元素为“listitem”
+        -   使用`selectMode`属性 改变组件可选状态后，默认 role="listbox"，根节点是否多选改变`aria-multiselectable`的值，子元素为“listitem”
         -   请根据实际需求覆盖默认 role `<Menu role="listbox" />` `<Menu.Item role="listitem" />`
     -   `Nav`
         -   默认 role="listbox"，子元素为"listitem"
@@ -82,9 +85,8 @@ Fusion 是一种旨在提升设计与开发之间 UI 构建效率的工作方式
         -   朗读格式默认为“上一页，当前\${i}页”，可自定义文案，自定义方式参考[国际化语言包的设置](https://fusion.design/component/config-provider)
     -   `Step`、`Breadcrumb`
         -   默认`aria-current`标记当前步骤
-    -
 
-### 2.1.1.4 表单类
+### 2.4 表单类
 
 -   推荐： Form Field Input CheckBox Radio Switch Select NumberPicker Button Range Rating DatePicker TimePicker Upload
 -   不推荐：TreeSelect CascaderSelect Transfer
@@ -104,39 +106,39 @@ Fusion 是一种旨在提升设计与开发之间 UI 构建效率的工作方式
     -   `Button` `SplitButton` `MenuButton`
 
         -   默认使用`<button>`标签来渲染，可自定义标签类型`<Button component="a">`
-        -   可通过配置设置自动聚焦，<MenuButton menuProps={{autoFocus: true}} /> <SplitButton menuProps={{autoFocus: true}} />
+        -   可通过配置设置自动聚焦，`<MenuButton menuProps={{autoFocus: true}} /> <SplitButton menuProps={{autoFocus: true}} />`
 
     -   `NumberPicker`
         -   支持键盘上下按键，增加、减少数字。
-        -   开发者可通过传递`upBtnProps` `downBtnProps`参数，自定义增加减少按钮的`aria-label`文案，[参考文档](https://fusion.design/component/number-picker)。
+        -   开发者可通过传递`upBtnProps` `downBtnProps`参数，自定义增加减少按钮的`aria-label`文案，[参考文档](https://fusion.design/component/number-picker)
 
     -   `Range` 
-        - 使用左右方向键去改变数值。
-        -   默认 role=“slider”，滑动更新以下值`aira-valuenow`(定义当前值),`aria-valuetext`(可读的替代文本),`aria-valuemax`(最大值),`aria-valuemin`(最小值)
+        - 使用左右方向键去改变数值
+        -   默认 role=“slider”，滑动更新以下值`aira-valuenow`(定义当前值)，`aria-valuetext`(可读的替代文本)，`aria-valuemax`(最大值)，`aria-valuemin`(最小值)
     -   `Rating`
-        -   传入 id 支持无障碍。
+        -   传入 id 支持无障碍
         -   支持键盘操作
-        -   通过 readAs 函数自定义展示/朗读的文案。
+        -   通过 readAs 函数自定义展示/朗读的文案
     -   `DatePicker`
-        -   使用 role 为 grid,rowgroup,row 和 cell,并设置`aria-disabled`(是否为禁选择状态)与`aria-selected`(是否被选择)。
+        -   使用 role 为 grid，rowgroup，row 和 cell，并设置`aria-disabled`(是否为禁选择状态)与`aria-selected`(是否被选择)。
         -   建议给予充分的`aria-label`提示，鼓励用户按照指定格式手动输入日期
     -   `TimePicker` 
         - 建议给予充分的`aria-label`提示，鼓励用户按照指定格式手动输入日期
-        -   使用 role 为 listbox 和 option,设置 aria-selected,tabIndex。
+        -   使用 role 为 listbox 和 option，设置 aria-selected，tabIndex
     -   `Upload`
-        -   设置 role 为 upload 和在 input 中设置 aria-hidden，不让屏幕阅读器读取。
+        -   设置 role 为 upload 和在 input 中设置 aria-hidden，不让屏幕阅读器读取
         -   建议至少保留一种点击上传的途径
     -   `Transfer`
-        -   使用 role 为 menu，menuitemcheckbox 和 aria-checked，tabIndex 属性。
-        -   可自定义文案，自定义方式参考[国际化语言包的设置](https://fusion.design/component/config-provider)
+        -   使用 role 为 menu，menuitemcheckbox 和 aria-checked，tabIndex 属性
+        -   可自定义文案，自定义方式参考[国际化语言包的设置](https://fusion.design/component/config-provider)。
         -   无障碍设计中，请尽可能地避免这一组件的使用
 
 
-    *   `TreeSelect` `CascaderSelect` `Cascader` 
+    -   `TreeSelect` `CascaderSelect` `Cascader` 
         -   均支持方向键操作，上下按键为同级内容切换，左右按键为父子级切换.
         -   无障碍设计中，请尽可能地避免这些组件的使用
 
-## 2.2 参考文献
+## 3. 参考文献
 
 -   [WAI-ARIA 1.1](https://www.w3.org/TR/wai-aria-1.1/#region)
 -   [WCAG 2.0](https://www.w3.org/TR/WCAG20/)