---
title: '使用 ARIA：角色、状态和属性'
slug: Web/Accessibility/ARIA/ARIA_Techniques
tags:
- ARIA
- 可访问性
- 无障碍
- Overview
- Reference
translation_of: Web/Accessibility/ARIA/ARIA_Techniques
---

<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>