files/zh-cn/web/accessibility/aria/aria_techniques/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

---
title: ARIA techniques
slug: Web/Accessibility/ARIA/ARIA_Techniques
tags:
  - ARIA
  - Accessibility
  - NeedsTranslation
  - TopicStub
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>