diff --git a/site/zh-cn/a11y/part1/WAI-ARIA.md b/site/zh-cn/a11y/part1/WAI-ARIA.md
index 816da56fa4..63b98d7dc7 100644
--- a/site/zh-cn/a11y/part1/WAI-ARIA.md
+++ b/site/zh-cn/a11y/part1/WAI-ARIA.md
@@ -2,13 +2,25 @@
 
 <!-- TOC -->
 
--   [1. 什么是 WAI-ARIA](#1-什么是-wai-aria)
--   [2. WAI-ARIA 的组成与使用规范](#2-wai-aria-的组成与使用规范)
-    -   [2.1 ARIA 的组成](#21-aria-的组成)
-    -   [2.2 了解`role`与`aria-*`的对应关系](#22-了解role与aria-的对应关系)
-    -   [2.3 了解 ARIA 的具体使用规则](#23-了解-aria-的具体使用规则)
-        -   [规则 1：避免冗余信息](#规则-1避免冗余信息)
--   [参考资料](#参考资料)
+- [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必须唯一)
+- [3. WAI-ARIA总结](#3-wai-aria总结)
+- [4. 参考资料](#4-参考资料)
 
 <!-- /TOC -->
 
@@ -26,46 +38,194 @@
 
 ## 2.1 ARIA 的组成
 
-ARIA 主要由两部分组成：
+```
+<div role="button" aria-pressed="false">I'm a button</div>
+```
+
+从上面的例子中我们可以看到，ARIA 主要由两部分组成：
 
 -   `role`
-    -   角色，标记元素的作用
+    -   角色，用来表示元素的含义
 -   `aria-*`
-    -   标记所在元素的属性、状态
+    -   标记元素的属性、状态
 
-下面是一些最常见的 aria-\*属性的列表，但是要获得完整的列表，请访问[官方文档](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#Roles):
+### `role`
+关于`role`，我们需要知道它的取值不是随意的，而且大部分是为了补充HTML的语义，这些`role`的值可参阅下表，也可以[点击此处](http://whatsock.com/training/matrices/)获得完整的`role`分类与介绍：
 
--   `aria-label` - 给出了元素的名字
--   `aria-labelledby` - 给出了页面上某处文本的名字，传递该元素`id`
--   `aria-hidden` - 不可见的元素，同时无法被 accessibility API 读取
--   `aria-disabled` - 可见元素，但是不能被编辑或操作
--   `aria-readonly` - 元素可见且能被操作，但是不能被编辑
--   `aria-required` - 元素是必填字段
+| | | | | |
+|-|-|-|-|-|
+|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 规范仍然是一个工作草案，并不是所有的浏览器都实现这些属性（目前只有[Edge 浏览器做到了满分](https://www.html5accessibility.com/)），可能需要有多个属性来处理各种浏览器，并且实现上可能不一致。
+### `aria-*`
+
+`aria-*`往往是搭配`role`进行使用的。
+
+在学习如何搭配`role`与`aria-*`时，我们可以将`aria-*`分为`required properties`与`supported properties`进行学习。比如对于`role=button`，它有两个`supported properties`：`aria-expanded`与`aria-pressed`，我们可以选择加或者不加这两个属性；再比如对于`role=checkbox`，它有一个`required properties`：`aria-checked`，与`supported properties`不同，这个属性是必须使用的。
+
+关于这些搭配的具体方式，我们可以[点击此处](https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties)找到详细说明。
+
+另外，我们还可以发现，有的`aria-*`可以被运用在所有的主语言元素上，即使此时`role`没有被使用。我们将这些`aira-*`被称作`global states and properties`，即全局状态或属性（实际上，看似`role`没有被使用，其实它们是被应用在一个名为`roletype`的`role`上，`roletype`属于`base role`，能被所有的`role`继承）。这些全局状态或属性的`aria-*`的取值可参见下表，也可以点击[此处](https://w3c.github.io/aria/#global_states)获取详细信息：
+
+| | | | |
+|-|-|-|-|
+| 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
+
+另外并不是说在 HTML 中使用了 ARIA，Web 页面就提高了可访问性了，就无障碍化了，如果 ARIA 没有用好，反而会把你带到另一个坑中，使你的页面可访问性更差。因此在使用 ARIA 时，我们需要仔细理解 ARIA 的使用规范。
+
+## 2.2 ARIA 的使用规范
+
+### `role`必须使用有效的值
+
+开发者需要确保所有的`role`的取值都是有效的，有效的`role`取值可[参见上文内容](#211-role)，比如：
+
+```
+<div role="button">I'm a button</div>            // 正确使用案例
+<div role="bigbutton">I'm a big button</div>     // 错误使用案例，"bigbutton"不是一个 ARIA role
+```
+
+### `role`的特定嵌套关系
+
+开发者在使用role的过程中需要注意，一些`role`必须被包含在特定的父元素中，一些`role`必须包含特定的子元素。比如：
+
+```
+// 正确使用案例，role=listitem 包含在 role=list 元素中
+<div role="list"> 
+    <span role="listitem">Rainbow Trout</span> 
+    <span role="listitem">Brook Trout</span>
+    <span role="listitem">Lake Trout</span>
+</div>
+```
+
+```
+// 错误使用案例，role=listitem 未包含在 role=list 元素中
+<div> 
+    <span role="listitem">Rainbow Trout</span> 
+    <span role="listitem">Brook Trout</span>
+    <span role="listitem">Lake Trout</span>
+</div>
+```
+
+### `role`的使用不能改变原生语义
+
+比如开发者想构建一个标签，可以按如下方式构建：
+
+```
+<div role=tab><h2>heading tab</h2></div>
+```
+
+但是不能按照如下方式构建:
+
+```
+<h2 role=tab>heading tab</h2>    // 错误案例，改变了原生语义
+```
 
-在上面的内容中我们介绍了 ARIA 的组成，ARIA 在 HTML 中的使用有一定的规范，并不是说在 HTML 中使用了 ARIA，Web 页面就提高了可访问性了，就无障碍化了，如果 ARIA 没有用好，反而会把你带到另一个坑中，使你的页面可访问性更差。因此在使用 ARIA 时，我们需要仔细理解 ARIA 的使用规范。
+### `role`的使用不能产生冗余
 
-## 2.2 了解`role`与`aria-*`的对应关系
+比如下面添加了`role`是无用的，会带来信息的冗余：
 
-使用 ARIA 的 role 时，我们需要注意两点：
+```
+<button role="button">press me</button>
+```
 
--   `role`值的选取
--   每个`role`都有自己对应的一个或多个可选属性`aria-*`，
+### `aria-*`必须符合有效的名称
 
-具体解释说明以上的两个注意点，关于第一点，`role`值不是胡乱取的，`role`的值可以是`alert`，`button`等等，可以参阅[此处](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#Roles)获取完整 role 的可选值列表。
+开发者不能使用一个不存在或者错误拼写的`aria-*`，比如：
 
-配合每个`role`的`aria-*`也不是随意选取的，比如`alert`这个 role 就只有以下三个 aria 属性：`aria-live`, `aria-atomic`, `aria-relevant`。您可以参阅[此处](http://whatsock.com/training/matrices/)获得完整的`role`与`aria-*`对应关系。
+```
+aria-hidden="true"      // 正确使用案例
+aria-hudden="true"      // 错误使用案例，错误拼写了"hidden"
+```
 
-## 2.3 了解 ARIA 的具体使用规则
+为了确保使用的是存在且拼写正确的属性名称，开发者可以参考以下资料：
+-   [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)
+    -   WAI-ARIA状态和属性的字母顺序列表
+-   [State and Property Attributes](https://www.w3.org/TR/wai-aria-1.1/#host_general_attrs)
+-   [State and Property Attribute Processing](https://www.w3.org/TR/wai-aria-1.1/#state_property_processing)
+-   [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)
 
-### 规则 1：避免冗余信息
+### `aria-*`必须使用有效的值
 
-当能找到原生的 HTML 元素，或者是带有相同语义或行为的属性时，不要继续添加 ARIA role
+开发者在使用`aria-*`时，需要对其赋予有效的值，比如：
+
+```
+aria-hidden="true"      // 正确使用案例
+aria-hidden="yes"       // 错误使用案例，aria-hidden的可选值中无"yes"选择
+```
+
+为了确保使用的是允许的值，开发者可以参考以下资料：
+-   [W3C WAI-ARIA 1.1 Supported States and Properties](https://www.w3.org/TR/wai-aria-1.1/#state_prop_values)
+    -   提供了ARIA状态和属性的允许取值
+
+### `aria-*`必需值需要被提供
+
+开发者需要检查`role`是否含有必须提供的`aria-*`。
+
+我们可以在这张[表格](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中的元素
+
+开发者在给`aria-labelledby`属性赋值时，应注意与DOM元素中的id值对应，比如：
+
+```
+<div id="test_one">it's a test</div>
+
+<input type="text" aria-labelledby="test_one"></input>    // 正确使用案例
+<input type="text" aria-labelledby="test_two"></input>    // 错误使用案例，文档中没有对应的id="test_two"
+```
+### `role=application`需谨慎使用
+
+简而言之，真正会使用`role=application`的场景是非常罕见的，除非需要模拟真实的桌面应用程序，因为当使用`role=application`时，屏幕阅读器会停止拦截击键，并将所有击键直接传递给浏览器，这会使得用户无法轻松浏览页面，更具体的介绍请[参考此处](https://www.w3.org/TR/using-aria/#using-application)。
+
+### `role="presentation"`或`aria-hidden="true"`不能用在可聚焦元素上
+
+`role=presentation`或其同义词`role=none`，表示在它所在的元素中删除语义，在可聚焦元素上使用`role="presentation"`或`aria-hidden="true"`会导致该元素失去焦点，比如：
+
+```
+<button role=presentation>press me</button>     // 错误使用案例
+<button aria-hidden="true">press me</button>    // 错误使用案例
+```
+
+### `ARIA`中使用的`id`必须唯一
+
+重复的`id`是非常常见的一个错误，分配相同的`id`值会导致辅助技术忽略第二个实例，破坏内容的可访问性。
+
+```
+// 错误案例，使用了重复的id，应该修改其中的一个id值
+<div role="button" id="hibutton">click me</div>
+<div role="button" id="hibutton">click me again</div>
+```
+
+# 3. WAI-ARIA总结
+
+需要注意的是，ARIA 规范仍然是一个工作草案，并不是所有的浏览器都实现这些属性（目前只有[Edge 浏览器做到了满分](https://www.html5accessibility.com/)），可能需要有多个属性来处理各种浏览器，并且实现上可能不一致。
 
-# 参考资料
+# 4. 参考资料
 
 -   [WAI-ARIA basics](https://developer.mozilla.org/zh-CN/docs/learn/Accessibility/WAI-ARIA_basics)
 -   [WAI-ARIA 无障碍 Web 规范](https://www.w3cplus.com/wai-aria/wai-aria.html)
 -   [各浏览器的可访问性支持情况](https://www.html5accessibility.com/)
 -   [ARIA 的使用规则](https://www.w3.org/TR/using-aria/#rule1)
+-   [List of axe 3.1 Rules](https://dequeuniversity.com/rules/axe/3.1)
+-   [WAI-ARIA 状态属性分类](https://www.w3.org/TR/wai-aria-1.1/#state_prop_taxonomy)
+-   [Role Attribute](https://www.w3.org/TR/wai-aria-1.1/#host_general_role)
diff --git a/site/zh-cn/a11y/part1/basics.md b/site/zh-cn/a11y/part1/basics.md
index 72602e2baa..9e8270e83e 100644
--- a/site/zh-cn/a11y/part1/basics.md
+++ b/site/zh-cn/a11y/part1/basics.md
@@ -4,9 +4,10 @@
 
 <!-- TOC -->
 
--   [1. 无障碍领域的术语](#1-无障碍领域的术语)
--   [2. 屏幕阅读器及其原理](#2-屏幕阅读器及其原理)
--   [3. 参考资料](#3-参考资料)
+- [无障碍背景](#无障碍背景)
+    - [1. 无障碍领域的术语](#1-无障碍领域的术语)
+    - [2. 屏幕阅读器及其原理](#2-屏幕阅读器及其原理)
+    - [3. 参考资料](#3-参考资料)
 
 <!-- /TOC -->
 
@@ -50,7 +51,7 @@
 
 无障碍辅助技术有很多，比如屏幕放大镜，屏幕阅读器，文本转语音软件，语音识别软件等，其中最常使用的便是屏幕阅读器（screen reader）。屏幕阅读器通过大声播放屏幕上展示的内容，帮助盲人或弱视群体使用应用。
 
-现在有很多屏幕阅读器，例如 Windows 的 NVDA 和 JAWS，Chrome 的 ChromeVox，以及 OS X 的 VoiceOver。据统计，截止到 2017 年 10 月，约有 46%的用户使用 JAWS，32%用户使用 NVDA，12%的用户使用 VoiceOver。
+现在有很多屏幕阅读器，例如 Windows 的 NVDA 和 JAWS，Chrome 的 ChromeVox，以及 OS X 的 VoiceOver。[根据相关机构统计](https://webaim.org/projects/screenreadersurvey7/)，截止到 2017 年 10 月，约有 46%的用户使用 JAWS，32%用户使用 NVDA，12%的用户使用 VoiceOver。
 **屏幕阅读器也是无障碍测试的主要工具。**
 
 辅助技术通过 `可访问性树` 与页面进行交互，构建完整、健康的 `可访问性树` 是提高网站可访问的关键。 `可访问性树` 与 `DOM 树` 有什么关联呢？
diff --git a/site/zh-cn/a11y/part2/content-creation-link/page1.md b/site/zh-cn/a11y/part2/content-creation-link/page1.md
index 16d3b30e71..cc3be2a10c 100644
--- a/site/zh-cn/a11y/part2/content-creation-link/page1.md
+++ b/site/zh-cn/a11y/part2/content-creation-link/page1.md
@@ -1,12 +1,13 @@
 <button>[回到页面内容指引](../content-creation.md)</button>
 
-# 跳过多个页面重复出现的导航栏
+# 1. 跳过多个页面重复出现的导航栏
 
 <!-- TOC -->
 
--   [正常页面（即 anchor 可用的页面）](#正常页面即anchor可用的页面)
--   [单页应用](#单页应用)
--   [参考资料](#参考资料)
+- [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)
 
 <!-- /TOC -->
 
@@ -19,7 +20,7 @@
 -   正常页面
 -   单页面应用
 
-## 正常页面（即 anchor 可用的页面）
+## 1.1 正常页面（即 anchor 可用的页面）
 
 这种情况下，我们可以用 HTML+Css 的方式，简单实现该功能。
 
@@ -58,7 +59,7 @@ a.skip:hover {
 
 当我们第一次按下 Tab 键时，这个超链接它会获得焦点，:focus 状态生效，因此出现在了页面的左上角。在包含正文内容信息的 div 中，我们会对其标注上 id="content" 。
 
-## 单页应用
+## 1.2 单页应用
 
 单页面应用（SinglePage Web Application，SPA）是一种从 Web 服务器加载的富客户端，单页面跳转仅刷新局部资源 ，公共资源(js、css 等)仅需加载一次，因此页面片段间的切换快，用户体验良好。但是由于单页面的 url 模式不同于多页面的 url 模式，对`'domain.com/#content'`进行了拦截，上述采用`<a>`标签锚点的方式的跳转部分会失效，我们可以通过 Js 的方式来解决。
 
@@ -103,7 +104,7 @@ document.querySelector("div").focus();		// not work
 document.querySelector("footer").focus();	// worked
 ```
 
-# 参考资料
+# 2. 参考资料
 
 -   https://www.bignerdranch.com/blog/web-accessibility-skip-navigation-links/
 -   https://bitsofco.de/how-and-when-to-use-the-tabindex-attribute/
diff --git a/site/zh-cn/a11y/part2/content-creation-link/page2.md b/site/zh-cn/a11y/part2/content-creation-link/page2.md
index 13c48bed00..9cbe6ed9e4 100644
--- a/site/zh-cn/a11y/part2/content-creation-link/page2.md
+++ b/site/zh-cn/a11y/part2/content-creation-link/page2.md
@@ -1,19 +1,19 @@
 <button>[回到页面内容指引](../content-creation.md)</button>
 <!-- TOC -->
 
-- [元素的隐藏](#元素的隐藏)
-- [隐藏元素的方法及其差异](#隐藏元素的方法及其差异)
-  - [1. Text Indent 文本缩进](#1-text-indent-文本缩进)
-  - [2. Position Absolute and Collapsed 绝对定位+高度塌陷](#2-position-absolute-and-collapsed-绝对定位高度塌陷)
-  - [3. Position Absolute and Offscreen 绝对定位+远离屏幕](#3-position-absolute-and-offscreen-绝对定位远离屏幕)
-  - [4. hidden属性](#4-hidden属性)
-  - [5. aria-hidden="true"](#5-aria-hiddentrue)
-  - [6. display:none](#6-displaynone)
-  - [7. visibility:hidden](#7-visibilityhidden)
-- [参考资料](#参考资料)
+- [1. 元素的隐藏](#1-%E5%85%83%E7%B4%A0%E7%9A%84%E9%9A%90%E8%97%8F)
+- [2. 隐藏元素的方法及其差异](#2-%E9%9A%90%E8%97%8F%E5%85%83%E7%B4%A0%E7%9A%84%E6%96%B9%E6%B3%95%E5%8F%8A%E5%85%B6%E5%B7%AE%E5%BC%82)
+  - [2.1. Text Indent 文本缩进](#21-text-indent-%E6%96%87%E6%9C%AC%E7%BC%A9%E8%BF%9B)
+  - [2.2. Position Absolute and Collapsed 绝对定位+高度塌陷](#22-position-absolute-and-collapsed-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E9%AB%98%E5%BA%A6%E5%A1%8C%E9%99%B7)
+  - [2.3. Position Absolute and Offscreen 绝对定位+远离屏幕](#23-position-absolute-and-offscreen-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E8%BF%9C%E7%A6%BB%E5%B1%8F%E5%B9%95)
+  - [2.4. hidden属性](#24-hidden%E5%B1%9E%E6%80%A7)
+  - [2.5. aria-hidden="true"](#25-aria-hidden%22true%22)
+  - [2.6. display:none](#26-displaynone)
+  - [2.7. visibility:hidden](#27-visibilityhidden)
+- [3. 参考资料](#3-%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99)
 
 <!-- /TOC -->
-# 元素的隐藏
+# 1. 元素的隐藏
 
 我们可以将元素的隐藏分为以下两类：
 - 对正常用户不可见
@@ -27,7 +27,7 @@
 
 综上，在考虑元素的隐藏问题时，需要考虑两个方面：是否对正常用户隐藏？是否对读屏软件隐藏？接下来，我们将从这两个方面介绍一些隐藏元素的方法与他们之间的差异。
 
-# 隐藏元素的方法及其差异
+# 2. 隐藏元素的方法及其差异
 
 下表罗列了我们将要介绍的几种隐藏元素的方法及其差异。
 
@@ -45,7 +45,7 @@
 
 下面详细介绍一下表中罗列的几种隐藏元素的实现方法以及一些需要注意的事项。
 
-## 1. Text Indent 文本缩进
+## 2.1. Text Indent 文本缩进
 
 ```
 .element-invisible {
@@ -55,7 +55,7 @@
 ```
 这种方法无法用在RTL(Right to Left)语言中。
 
-## 2. Position Absolute and Collapsed 绝对定位+高度塌陷
+## 2.2. Position Absolute and Collapsed 绝对定位+高度塌陷
 
 ```
 .element-invisible {
@@ -65,7 +65,7 @@
 }
 ```
 
-## 3. Position Absolute and Offscreen 绝对定位+远离屏幕
+## 2.3. Position Absolute and Offscreen 绝对定位+远离屏幕
 
 ```
 .element-invisible {
@@ -78,7 +78,7 @@
 }
 ```
 
-## 4. hidden属性
+## 2.4. hidden属性
 
 ```
 <p hidden> hello a11y </p> // you can't see this, screen reader can't see this 
@@ -86,7 +86,7 @@
 ```
 在使用hidden属性时，所有用户都看不见当前的元素。
 
-## 5. aria-hidden="true"
+## 2.5. aria-hidden="true"
 
 ```
 <p aria-hidden="true"> hello a11y </p> // you can see this, screen reader can't see this
@@ -96,7 +96,7 @@ aria-hidden对我们的无障碍页面优化很重要的一个特性，对于我
 
 可以用来优化广告信息，或者对于盲人无用的信息。
 
-## 6. display:none
+## 2.6. display:none
 
 ```
 .element-invisible {
@@ -106,7 +106,7 @@ aria-hidden对我们的无障碍页面优化很重要的一个特性，对于我
 
 使用display:none可以隐藏元素，这个元素同时也不能被读屏器访问，且隐藏后不占据空间。
 
-## 7. visibility:hidden
+## 2.7. visibility:hidden
 
 ```
 .element-invisible {
@@ -117,7 +117,7 @@ aria-hidden对我们的无障碍页面优化很重要的一个特性，对于我
 使用visibility: hidden也可以隐藏元素，这个元素同时也不能被读屏器访问，但是与display: none不同的是，前者隐藏后占据空间。另外display: none和visibility: hidden可以对屏幕外的内容进行焦点管理，这部分内容的详细介绍在[焦点管理](https://yuque.antfin-inc.com/fusion-design-system/a11y/dn24ez)一文中详细介绍。
 
 
-# 参考资料
+# 3. 参考资料
 - [HTML5 Accessibility Chops: hidden and aria-hidden](https://developer.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/)
 - [无障碍开发系列之隐藏内容访问](https://blog.csdn.net/yc123h/article/details/51337398)
 - [Hiding Content for Accessibility](https://snook.ca/archives/html_and_css/hiding-content-for-accessibility)
diff --git a/site/zh-cn/a11y/part2/content-creation-link/page5.md b/site/zh-cn/a11y/part2/content-creation-link/page5.md
index 4141d3c89c..791a4b40f4 100644
--- a/site/zh-cn/a11y/part2/content-creation-link/page5.md
+++ b/site/zh-cn/a11y/part2/content-creation-link/page5.md
@@ -1,10 +1,9 @@
 <button>[回到页面内容指引](../content-creation.md)</button>
 <!-- TOC -->
 
-- [1. 应当慎重设计既可hover又可click的元素](#1-应当慎重设计既可hover又可click的元素)
-- [2. 尽量使用文本而不是文本图片](#2-尽量使用文本而不是文本图片)
-- [3. 其他建议](#3-其他建议)
-- [参考资料](#参考资料)
+- [1. 应当慎重设计既可hover又可click的元素](#1-%E5%BA%94%E5%BD%93%E6%85%8E%E9%87%8D%E8%AE%BE%E8%AE%A1%E6%97%A2%E5%8F%AFhover%E5%8F%88%E5%8F%AFclick%E7%9A%84%E5%85%83%E7%B4%A0)
+- [2. 尽量使用文本而不是文本图片](#2-%E5%B0%BD%E9%87%8F%E4%BD%BF%E7%94%A8%E6%96%87%E6%9C%AC%E8%80%8C%E4%B8%8D%E6%98%AF%E6%96%87%E6%9C%AC%E5%9B%BE%E7%89%87)
+- [3. 参考资料](#3-%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99)
 
 <!-- /TOC -->
 本文章主要指出一些我们应当避免的设计，并总结一些设计建议。
@@ -32,15 +31,7 @@
 
 因此`图片+alt`的方式只适用于少量文本，大量的文字内容还是需要放在文本的位置处。
 
-# 3. 其他建议
-- 合理使用aria-label，对于不能描述的，可以通过aria-label来加强描述
-- input标签和textarea内使用placeholder作为默认提示语
-- 对于“，”可以使语句朗读过程中出现停顿的效果，这样盲人体验更好
-- 列表结构尽量使用ul、ol、dl结构组织内容，读屏软件可提示给用户该结构是由列表内容组成
-
-
-
 不断补充中……
-# 参考资料
+# 3. 参考资料
 - [Alternative Text](https://webaim.org/techniques/alttext/)
 - [移动端h5无障碍优化](http://site.alibaba.net/accessibility/docs/demo/h5/list.html)
\ No newline at end of file