Update ARIA index and tech page (#2185)

* update aria index and tech page

* supplement a missed paragraph

* fix wording

1 files changed, 86 insertions, 0 deletions

diff --git a/files/zh-cn/web/accessibility/aria/roles/index.html b/files/zh-cn/web/accessibility/aria/roles/index.html
new file mode 100644
index 0000000000..e32d5a1038
--- /dev/null
+++ b/files/zh-cn/web/accessibility/aria/roles/index.html
@@ -0,0 +1,86 @@
+---
+title: WAI-ARIA Roles
+slug: Web/Accessibility/ARIA/Roles
+tags:
+- ARIA
+- ARIA Roles
+- 可访问性
+- 无障碍
+- Reference
+- Roles
+translation_of: Web/Accessibility/ARIA/Roles
+---
+<p>此页面列出了涵盖 MDN 上讨论的所有 WAI-ARIA 角色的参考页面。有关角色的完整列表，请参阅 <a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques">ARIA 技术</a></p>
+
+<p>{{SubpagesWithSummaries}}</p>
+
+<div class="hidden">
+  <p>请通过在 Role 名称后添加您的姓名来声明您想要从事的 Role：（旧页面从 <a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques">https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques</a> 链接）。已完成初稿的已从以下列表中删除。</p>
+
+  <ul>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_Role">alertdialog</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Banner_role">banner</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Combobox_Role">Combobox</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Command_Role">Command</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role">Columnheader </a>(Estelle)</li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Complementary_role">complementary</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Composite_Role">composite</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Definition_Role">Definition</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Directory_Role">Directory</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Feed_Role">Feed</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_role">Gridcell</a> (Eric E)</li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Group_Role">Group</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Input_Role">input</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Landmark_Role">landmark</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Link_Role">Link</a> - old page</li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role">listbox</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Log_Role">Log</a> - old page</li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Marquee_Role">Marquee</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Math_Role">math</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menu_Role">menu</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menubar_Role">menubar</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuiitem_Role">Menuitem</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemcheckbox_Role">Menuitemcheckbox</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemradio_Role">Menuitemradio</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/None_Role">none</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Note_Role">note</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Option_Role">Option</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Presentation_Role">presentation</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Progressbar_Role">Progressbar</a> - old page</li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radio_Role">Radio</a> - old page</li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radiogroup_Role">radiogroup</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Range_Role">range</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Region_role">region</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Roletype_Role">roletype</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Rowheader_Role">rowheader</a>(Estelle)</li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Scrollbar_Role">Scrollbar</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Searchbox_Role">searchbox</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Section_Role">section</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Sectionhead_Role">sectionhead</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Select_Role">select</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Separator_Role">separator</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Slider_Role">Slider</a> - old page</li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Spinbutton_Role">Spinbutton</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Status_Role">Status</a> - old page</li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Structure_Role">structure</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tablist_Role">tablist</a> (Michiel)</li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">Tabpanel</a> (Michiel)</li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Term_Role">term</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Time_Role">Timer</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Toolbar_Role">toolbar</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tooltip_Role">Tooltip</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tree_Role">Tree</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">treegrid</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treeitem_Role">Treeitem</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Widget_Role">widget</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Window_Role">window</a></li>
+  </ul>
+</div>
+
+
+<section id="Quick_links">
+  <ol>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li>
+  </ol>
+</section>