Update ARIA index and tech page (#2185)

* update aria index and tech page

* supplement a missed paragraph

* fix wording

1 files changed, 209 insertions, 131 deletions

diff --git a/files/zh-cn/web/accessibility/aria/aria_techniques/index.html b/files/zh-cn/web/accessibility/aria/aria_techniques/index.html
index 2f704dff7f..e8117f3603 100644
--- a/files/zh-cn/web/accessibility/aria/aria_techniques/index.html
+++ b/files/zh-cn/web/accessibility/aria/aria_techniques/index.html
@@ -1,136 +1,214 @@
 ---
-title: ARIA techniques
+title: '使用 ARIA：角色、状态和属性'
 slug: Web/Accessibility/ARIA/ARIA_Techniques
 tags:
-  - ARIA
-  - Accessibility
-  - NeedsTranslation
-  - TopicStub
+- ARIA
+- 可访问性
+- 无障碍
+- Overview
+- Reference
 translation_of: Web/Accessibility/ARIA/ARIA_Techniques
 ---
-<h3 id="Roles">Roles</h3>
-
-<h4 id="Widget_roles">Widget roles</h4>
-
-<ul>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role" title="Using the alert role">Alert</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role" title="Using the alertdialog role">Alertdialog</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" title="en/ARIA/ARIA_Techniques/Using_the_button_role">Button</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role" title="en/ARIA/ARIA_Techniques/Using_the_checkbox_role">Checkbox</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role" title="Using the dialog role">Dialog</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role" title="en/ARIA/ARIA_Techniques/Using_the_link_role">Link</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role" title="en/ARIA/ARIA_Techniques/Using_the_log_role">Log</a></li>
- <li>Marquee</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="en/ARIA/ARIA_Techniques/Using_the_progressbar_role">Progressbar</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radio</a></li>
- <li>Scrollbar</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="en/ARIA/ARIA_Techniques/Using_the_slider_role">Slider</a></li>
- <li>Spinbutton</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role" title="Using the link role">status</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="en/ARIA/ARIA_Techniques/Using_the_textbox_role">textbox</a></li>
- <li>Timer</li>
- <li>Tooltip</li>
-</ul>
-
-<h4 id="Composite_roles">Composite roles</h4>
-
-<p>The techniques below describes each composite role as well as their required and optional child roles.</p>
-
-<ul>
- <li>Grid (including row, gridcell, rowheader, columnheader roles)</li>
- <li>Menubar/ Menu (including menuitem, menuitemcheckbox, menuitemradio)</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="en/ARIA/ARIA_Techniques/Using_the_listbox_role">Listbox</a> (包含 option role)</li>
- <li>Tablist (包含 tab 和 tabpanel roles)</li>
- <li>Tree (including group and treeitem roles)</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radiogroup (see radio role)</a></li>
- <li>Treegrid</li>
-</ul>
-
-<h4 id="Document_structure_roles">Document structure roles</h4>
-
-<ul>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role">Article</a></li>
- <li>Definition</li>
- <li>Directory</li>
- <li>Document</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role" title="en/ARIA/ARIA_Techniques/Using_the_group_role">Group</a></li>
- <li>Heading</li>
- <li>Img</li>
- <li>List, listitem</li>
- <li>Math</li>
- <li>Note</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" title="en/ARIA/ARIA_Techniques/Using_the_presentation_role">Presentation</a></li>
- <li>Region</li>
- <li>Separator</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role" title="en/ARIA/ARIA_Techniques/Using_the_toolbar_role">Toolbar</a></li>
-</ul>
-
-<h4 id="Landmark_roles">Landmark roles</h4>
-
-<ul>
- <li>Application</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_banner_role" title="en/ARIA/ARIA_Techniques/Using_the_banner_role">Banner</a></li>
- <li>Complementary</li>
- <li>Contentinfo</li>
- <li>Form</li>
- <li>Main</li>
- <li>Navigation</li>
- <li>Search</li>
-</ul>
-
-<h3 id="States_and_properties">States and properties</h3>
-
-<h4 id="Widget_attributes">Widget attributes</h4>
-
-<ul>
- <li>aria-autocomplete</li>
- <li>aria-checked</li>
- <li>aria-disabled</li>
- <li>aria-expanded</li>
- <li>aria-haspopup</li>
- <li>aria-hidden</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="Using the aria-invalid attribute">aria-invalid</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="Using the aria-labelledby attribute">aria-label</a></li>
- <li>aria-level</li>
- <li>aria-multiline</li>
- <li>aria-multiselectable</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li>
- <li>aria-pressed</li>
- <li>aria-readonly</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute" title="Using the aria-required property">aria-required</a></li>
- <li>aria-selected</li>
- <li>aria-sort</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="Using the aria-required attribute">aria-valuemax</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></li>
-</ul>
-
-<h4 id="Live_region_attributes">Live region attributes</h4>
-
-<ul>
- <li>aria-live</li>
- <li>aria-relevant</li>
- <li>aria-atomic</li>
- <li>aria-busy</li>
-</ul>
-
-<h4 id="Drag_drop_attributes">Drag &amp; drop attributes</h4>
-
-<ul>
- <li>aria-dropeffect</li>
- <li>aria-dragged</li>
-</ul>
-
-<h4 id="Relationship_attributes">Relationship attributes</h4>
-
-<ul>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute" title="Role">aria-activedescendant</a></li>
- <li>aria-controls</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="Using the aria-labelledby attribute">aria-describedby</a></li>
- <li>aria-flowto</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></li>
- <li>aria-owns</li>
- <li>aria-posinset</li>
- <li>aria-setsize</li>
-</ul>
+
+<p>ARIA 定义了可以应用于元素的语义，这些语义分为 <strong>roles</strong>（定义一种用户界面元素）、<strong>states</strong> 和 <strong>properties</strong>，这些都是角色所支持的。作者必须在元素的生命周期中为其分配一个 ARIA 角色和适当的状态和属性，除非该元素已经具有适当的 ARIA 语义（通过使用适当的 HTML 元素）。添加 ARIA 语义只会向浏览器的可访问性 API 公开额外信息，而不会影响页面的 DOM。</p>
+
+<h2 id="Roles">角色</h2>
+
+<h3 id="Widget_roles">组件角色</h3>
+
+<div class="index">
+  <ul>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Gridcell_role">gridcell</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role">link</a></li>
+    <li>menuitem</li>
+    <li>menuitemcheckbox</li>
+    <li>menuitemradio</li>
+    <li>option</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role">progressbar</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role">radio</a></li>
+    <li>scrollbar</li>
+    <li>searchbox</li>
+    <li>separator (when focusable)</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role">slider</a></li>
+    <li>spinbutton</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Switch_role">switch</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">tabpanel</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></li>
+    <li>treeitem</li>
+  </ul>
+</div>
+
+<h3 id="Composite_roles">复合角色</h3>
+
+<p>下面的技术描述了每个复合角色及其必需和可选的子角色。</p>
+
+<div class="index">
+  <ul>
+    <li>combobox</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a> (包含 <a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a>, <a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Gridcell_role">gridcell</a>, rowheader, columnheader)</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/listbox_role">listbox</a> (包含 option)</li>
+    <li>menu</li>
+    <li>menubar</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role">radiogroup</a> (参考 radio)</li>
+    <li>tablist (包含 <a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a> 和 <a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">tabpanel</a>)</li>
+    <li>tree</li>
+    <li>treegrid</li>
+  </ul>
+</div>
+
+<h3 id="Document_structure_roles">文档结构角色</h3>
+
+<div class="index">
+  <ul>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Application_Role">application</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Cell_Role">cell</a></li>
+    <li>columnheader</li>
+    <li>definition</li>
+    <li>directory</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Document_Role">document</a></li>
+    <li>feed</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Figure_Role">figure</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role">group</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/heading_role">heading</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Role_Img">img</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Listitem_role">listitem</a></li>
+    <li>math</li>
+    <li>none</li>
+    <li>note</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></li>
+    <li>rowheader</li>
+    <li>separator</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></li>
+    <li>term</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role">toolbar</a></li>
+    <li>tooltip</li>
+  </ul>
+</div>
+
+<h3 id="Landmark_roles">具有里程碑意义的角色</h3>
+
+<div class="index">
+  <ul>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Banner_role">banner</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Complementary_role">complementary</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">contentinfo</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Form_Role">form</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Main_role">main</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">navigation</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Region_role">region</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Search_role">search</a></li>
+  </ul>
+</div>
+
+<h3 id="Live_Region_Roles">实时区域角色</h3>
+
+<div class="index">
+  <ul>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Alert_Role">alert</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role">log</a></li>
+    <li>marquee</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role">status</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/ARIA_timer_role">timer</a></li>
+  </ul>
+</div>
+
+<h3 id="Window_Roles">窗口角色</h3>
+
+<div class="index">
+  <ul>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">alertdialog</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/dialog_role">dialog</a></li>
+  </ul>
+</div>
+
+<h2 id="States_and_properties">状态和属性</h2>
+
+<h3 id="Widget_attributes">组件属性</h3>
+
+<div class="index">
+  <ul>
+    <li>aria-autocomplete</li>
+    <li>aria-checked</li>
+    <li>aria-current</li>
+    <li>aria-disabled</li>
+    <li>aria-errormessage</li>
+    <li>aria-expanded</li>
+    <li>aria-haspopup</li>
+    <li>aria-hidden</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute">aria-invalid</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></li>
+    <li>aria-level</li>
+    <li>aria-modal</li>
+    <li>aria-multiline</li>
+    <li>aria-multiselectable</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li>
+    <li>aria-placeholder</li>
+    <li>aria-pressed</li>
+    <li>aria-readonly</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute">aria-required</a></li>
+    <li>aria-selected</li>
+    <li>aria-sort</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute">aria-valuemax</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></li>
+  </ul>
+</div>
+
+<h3 id="Live_region_attributes">实时区域属性</h3>
+
+<div class="index">
+  <ul>
+    <li>aria-live</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute">aria-relevant</a></li>
+    <li>aria-atomic</li>
+    <li>aria-busy</li>
+  </ul>
+</div>
+
+<h3 id="Drag_drop_attributes">拖放属性</h3>
+
+<div class="index">
+  <ul>
+    <li>aria-dropeffect</li>
+    <li>aria-dragged</li>
+  </ul>
+</div>
+
+<h3 id="Relationship_attributes">关系属性</h3>
+
+<div class="index">
+  <ul>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute">aria-activedescendant</a></li>
+    <li>aria-colcount</li>
+    <li>aria-colindex</li>
+    <li>aria-colspan</li>
+    <li>aria-controls</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Annotations#associating_annotated_elements_with_their_details">aria-details</a></li>
+    <li>aria-errormessage</li>
+    <li>aria-flowto</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></li>
+    <li>aria-owns</li>
+    <li>aria-posinset</li>
+    <li>aria-rowcount</li>
+    <li>aria-rowindex</li>
+    <li>aria-rowspan</li>
+    <li>aria-setsize</li>
+  </ul>
+</div>
+
+<h3 id="MicrosoftEdge-specific_properties">MicrosoftEdge 特定的属性</h3>
+
+<div class="index">
+  <ul>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/x-ms-aria-flowfrom">x-ms-aria-flowfrom</a> {{Non-standard_Inline}}</li>
+  </ul>
+</div>