diff options
Diffstat (limited to 'files/zh-cn/web/accessibility')
6 files changed, 858 insertions, 284 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 & 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> diff --git a/files/zh-cn/web/accessibility/aria/index.html b/files/zh-cn/web/accessibility/aria/index.html index da650a78f6..b59dc1e7ca 100644 --- a/files/zh-cn/web/accessibility/aria/index.html +++ b/files/zh-cn/web/accessibility/aria/index.html @@ -3,175 +3,123 @@ title: ARIA slug: Web/Accessibility/ARIA tags: - ARIA - - Accessibility - - NeedsTranslation - - TopicStub + - 可访问性 + - 无障碍 + - HTML translation_of: Web/Accessibility/ARIA --- -<p>Accessible Rich Internet Applications <strong>(ARIA)</strong> 是能够让残障人士更加便利的访问 Web 内容和使用 Web 应用（特别是那些由JavaScript 开发的）的一套机制。</p> -<p>ARIA是对超文本标记语言（HTML ）的补充，以便在没有其他机制的情况下，使得应用程序中常用的交互和小部件可以传递给辅助交互技术。例如，ARIA支持HTML4中的可访问导航地标、JavaScript小部件、表单提示和错误消息、实时内容更新等。</p> +<p><strong>ARIA</strong> (Accessible Rich Internet Applications) 是一组属性，用于定义使残障人士更容易访问 Web 内容和 Web 应用程序（尤其是使用 JavaScript 开发的应用程序）的方法。</p> -<p>ARIA 是一组特殊的易用性属性，可以添加到任意标签上，尤其适用于 HTML。role 属性定义了对象的通用类型（例如文章、警告，或幻灯片）。额外的 ARIA 属性提供了其他有用的特性，例如表单的描述或进度条的当前值。</p> +<p>它补充了 HTML，以便在没有其他机制时可以将应用程序中常用的交互和小部件传递给辅助技术。例如，ARIA 支持 HTML4 中的可访问导航地标、JavaScript 小部件、表单提示和错误消息、实时内容更新等。</p> -<p>ARIA 在大多数流行的浏览器和屏幕阅读器中得到了实现。尽管如此，实现方式有所不同，而且旧的技术对其支持不好（或者不支持）。使用可以优雅降级的“安全的” ARIA，或者要求用户升级使用新的技术。</p> - -<div class="blockIndicator warning"> -<p>这些小部件中的许多后来被合并到HTML5中，如果存在这样的元素，<strong>开发人员应该更倾向使用对应的语义化HTML元素，而不是使用ARIA</strong>。例如，原生元素具有内置的<a href="https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets">键盘可访问性</a>、角色和状态。但是，如果您选择使用ARIA，您有责任在脚本中模仿(等效的)浏览器行为。</p> +<div class="notecard warning"> + <p>许多这些小部件后来被合并到 HTML5 中，如果存在这样的元素，<strong>开发人员应该更喜欢使用正确语义的 HTML 元素而不是使用 ARIA</strong>。例如，原生元素具有内置的<a href="/zh-CN/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets">键盘可访问性</a>、角色和状态。但是，如果您选择使用 ARIA，则您有责任在脚本中模仿（等效）浏览器行为。</p> </div> +<p>这是进度条小部件的标记：</p> -<p>下面是一段进度条组件的代码：</p> - -<pre class="brush: html notranslate"><code><div id="percent-loaded" role="progressbar" aria-valuenow="75" - aria-valuemin="0" aria-valuemax="100" /></code> +<pre class="brush: html"><div id="percent-loaded" role="progressbar" aria-valuenow="75" + aria-valuemin="0" aria-valuemax="100"> +</div> </pre> -<p>由于这个滚动条是用<code><div></code>写的，没有字面含义。然而，对开发者来说，在HTML4中，又没有更多的语义化的标签，所以我们需要引入ARIA这个角色和属性，这些是通过向元素添加属性来指定的。举个例子，<code>role="progressbar"</code>这个属性告诉浏览器，该元素其实是一个JavaScript实现的进度条组件。<code>aria-valuemin </code>和<code>aria-valuemax</code> 属性表明了进度条的最小值和最大值。 <code>aria-valuenow</code>则描述了当前进度条的状态， 因此它得用JavaScript来更新。</p> +<p>这个进度条是使用 {{HTMLElement("div")}} 构建的，它没有任何意义。不幸的是，HTML 4 中没有更多语义标签可供开发人员使用，因此我们需要包含 ARIA 角色和属性。这些是通过向元素添加属性来指定的。在这个例子中， <code>role="progressbar"</code> 属性通知浏览器这个元素实际上是一个 JavaScript 驱动的进度条小部件。 <code>aria-valuemin</code> 和 <code>aria-valuemax</code> 属性指定进度条的最小值和最大值，<code>aria-valuenow</code> 描述进度条的当前状态和因此必须使用 JavaScript 保持更新。</p> -<p>除了直接给标签加属性，还可以通过JavaScript代码把ARIA属性添加到元素并动态地更新，如下面所示：</p> +<p>除了将它们直接放置在元素中之外，还可以将 ARIA 属性添加到元素中，并使用 JavaScript 代码动态更新，如下所示：</p> -<pre class="brush: js notranslate"><code>// Find the progress bar <div> in the DOM. - var progressBar = document.getElementById("percent-loaded");</code> +<pre class="brush: js">// Find the progress bar <div> in the DOM. +var progressBar = document.getElementById("percent-loaded"); -<code>// Set its ARIA roles and states, -// so that assistive technologies know what kind of widget it is.</code> - progressBar.setAttribute("role", "progressbar"); - progressBar.setAttribute("aria-valuemin", 0); - progressBar.setAttribute("aria-valuemax", 100); +// Set its ARIA roles and states, +// so that assistive technologies know what kind of widget it is. +progressBar.setAttribute("role", "progressbar"); +progressBar.setAttribute("aria-valuemin", 0); +progressBar.setAttribute("aria-valuemax", 100); // Create a function that can be called at any time to update // the value of the progress bar. - function updateProgress(percentComplete) { - progressBar.setAttribute("aria-valuenow", percentComplete); - } - -</pre> +function updateProgress(percentComplete) { + progressBar.setAttribute("aria-valuenow", percentComplete); +}</pre> -<div class="note"> -<p>注意由于ARIA是在HTML4之后引入的，所以在HTML4或XTHML中没有提供验证。然而，它提供的可访问性收益远远超过任何技术上的无效性。</p> +<div class="notecard note"> + <p>请注意，ARIA 是在 HTML4 之后发明的，因此无法在 HTML4 或其 XHTML 变体中进行验证。然而，它提供的可访问性收益远远超过任何技术无效性。</p> -<p>在HTML5中，所有的ARIA属性都是有效的。新的标记元素（<code><main></code>, <code><header></code>, <code><nav></code>等）都已具有了ARIA角色，所以就没必要再标注说明了。</p> + <p>在 HTML5 中，所有 ARIA 属性都经过验证。新的地标元素（{{HTMLElement("main")}}、{{HTMLElement("header")}}、{{HTMLElement("nav")}} 等）具有内置的 ARIA 角色，因此有无需复制它们。</p> </div> -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h3 id="Documentation" name="Documentation">ARIA 入门</h3> - - <dl> - <dt><a href="/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="An overview of accessible web applications and widgets">ARIA 介绍</a></dt> - <dd>关于借助 ARIA 使得动态内容可访问的快速介绍。也可参考经典的 <a class="external" href="http://dev.opera.com/articles/view/introduction-to-wai-aria/" title="http://dev.opera.com/articles/view/introduction-to-wai-aria/">ARIA 介绍 - Gez Lemon</a>，2008 年。</dd> - <dt><a href="/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ" title="https://developer.mozilla.org/en-US/docs/Accessibility/Web_applications_and_ARIA_FAQ">Web 应用与 ARIA FAQ</a></dt> - <dd>解答关于WAI-ARIA的问题并且解释为什么网站需要ARIA。</dd> - <dt><a class="external" href="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/" title="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">在视频频和屏幕阅读器使用 ARIA</a></dt> - <dd>从网上看到真实和简单的例子，包括“before”和“after”ARIA视频。</dd> - <dt><a class="external" href="http://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html">在 HTML 使用 ARIA</a></dt> - <dd>A practical guide for developers. It suggests what ARIA attributes to use on HTML elements. Suggestions are based on implementation realities.一份为开发人员提供实用指南。它建议一些基于基于执行的在HTML元素上使用哪些ARIA属性。</dd> - </dl> - - <h3 id="ARIA_初级进阶">ARIA 初级进阶</h3> - - <dl> - <dt><a class="external" href="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/" rel="external" title="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/">通过ARIA标签增强页面导航</a></dt> - <dd>A nice intro to using ARIA landmarks to improve web page navigation for screen reader users. <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/" rel="external" title="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">See also, ARIA landmark implementation notes</a> and examples on real sites (updated as of July '11).</dd> - <dt><a href="/en-US/docs/ARIA/forms" rel="internal" title="/en-US/docs/ARIA/forms">提高表单可访问性</a></dt> - <dd>ARIA is not just for dynamic content! Learn how to improve accessibility of HTML forms using additional ARIA attributes. </dd> - <dt><a class="external" href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Live_Regions" rel="external" title="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">ARIA 活动区域 </a></dt> - <dd>活动区域为屏幕阅读器提供关于如何处理一个页面内容变更的建议。</dd> - <dt><a class="external" href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm" rel="external" title="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">用ARIA 活动区域去通知内容的改变</a></dt> - <dd>A quick summary of live regions, by the makers of JAWS screen reader software. Note that live regions are also supported by NVDA in Firefox, and VoiceOver with Safari (as of OS X Lion and iOS 5).</dd> - </dl> - - <h3 id="ARIA_与脚本组件">ARIA 与脚本组件</h3> - - <dl> - <dt><a class="external" href="/en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets">键盘导航与组件焦点</a></dt> - <dd>The first step in developing an accessible JavaScript widget is to make it keyboard navigable. This article steps through the process. The <a class="external" href="http://www.yuiblog.com/blog/2009/02/23/managing-focus/" title="http://www.yuiblog.com/blog/2009/02/23/managing-focus/">Yahoo! focus management article</a> is a great resource as well.</dd> - <dt><a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/" title="http://dev.aol.com/dhtml_style_guide">Style Guide for Keyboard Navigation</a></dt> - <dd>A challenge with ARIA is getting developers to implement consistent behavior -- clearly best for users. This style guide describes the keyboard interface for common widgets.</dd> - </dl> - - <h3 id="ARIA_资源">ARIA 资源</h3> - - <dl> - <dt><a href="/en-US/docs/Accessibility/ARIA/widgets/overview" title="en-US/docs/aria/widgets/overview">Widget Techniques, Tutorials, and Examples</a></dt> - <dd>Need a slider, a menu, or another kind of widget? Find resources here.</dd> - <dt><a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" title="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">ARIA-Enabled JavaScript UI Libraries</a></dt> - <dd>If you're starting a new project, choose a UI widget library with ARIA support already built-in. Warning: this is from 2009 -- content should be moved to an MDN page where it can be updated.</dd> - <dt><a class="external" href="http://dl.dropbox.com/u/573324/CSUN2012/index.html" title="http://dl.dropbox.com/u/573324/CSUN2012/index.html">Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 Workshop Materials</a></dt> - <dd>Includes slide presentations and examples.</dd> - </dl> - </td> - <td> - <h3 id="Community" name="Community">邮件列表</h3> - - <dl> - <dt><a class="link-https" href="https://groups.google.com/forum/#!forum/free-aria" title="https://groups.google.com/forum/#!forum/free-aria">Free ARIA Google Group</a></dt> - <dd>A place to ask questions about ARIA, as well as make suggestions for improving the ARIA documentation found on these pages.</dd> - </dl> - - <h3 id="Community" name="Community">博客</h3> - - <p>ARIA information on blogs tends to get out of date quickly. Still, there is some great info out there from other developers making ARIA work today.</p> - - <p><a class="external" href="http://www.paciellogroup.com/blog/category/wai-aria/" title="http://www.paciellogroup.com/blog/category/wai-aria/">Paciello Group</a></p> - - <p><a class="external" href="http://www.accessibleculture.org/tag/wai-aria/" title="http://www.accessibleculture.org/tag/wai-aria/">Accessible Culture</a></p> - - <p><a class="external" href="http://yaccessibilityblog.com/library/category/code/aria" title="http://yaccessibilityblog.com/library/category/code/aria">Yahoo! Accessibility</a></p> - - <h3 id="提交_Bug">提交 Bug</h3> - - <p><a href="/en/Accessibility/ARIA/How_to_file_ARIA-related_bugs" title="https://developer.mozilla.org/en/ARIA/How_to_file_ARIA-related_bugs">File ARIA bugs on browsers, screen readers, and JavaScript libraries</a>.</p> - - <h3 id="示例">示例</h3> - - <dl> - <dt><a class="external" href="/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases" title="en-US/docs/ARIA/examples">ARIA 示例库</a></dt> - <dd>A set of barebones example files which are easy to learn from.</dd> - <dt><span class="external">可访问的 JS 组件库演示</span></dt> - <dd><a class="external" href="http://dojotoolkit.org/widgets" title="http://dojotoolkit.org/widgets">Dojo</a>, <a class="external" href="http://hanshillen.github.com/jqtest/" title="http://hanshillen.github.com/jqtest/">jQuery</a>, <a class="external" href="http://wiki.fluidproject.org/display/fluid/Components" title="http://wiki.fluidproject.org/display/fluid/Components">Fluid</a>, <a class="external" href="http://yuilibrary.com/gallery/" title="http://yuilibrary.com/gallery/">YUI</a></dd> - </dl> - - <dl> - <dt><a class="external" href="http://mail.yahoo.com" title="http://mail.yahoo.com">Yahoo! 邮箱</a></dt> - <dd>Yahoo! puts it all together with Yahoo! Mail, a web app that almost looks like a native app. It works very well. As a <a class="external" href="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/" title="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/">review of Yahoo! Mail</a> by screen reader Marco Zehe says, "Keep up the good work!".</dd> - </dl> - - <dl> - <dt><a class="external" href="http://search.yahoo.com" title="http://search.yahoo.com">Yahoo! 搜索</a></dt> - <dd>Yahoo! has done an amazing job of advancing ARIA here, by exercising ARIA's full capabilities and <a class="external" href="http://ycorpblog.com/2011/03/23/searchdirect/" title="http://ycorpblog.com/2011/03/23/searchdirect/">sharing their techniques</a>. Yahoo! Search uses a combination of ARIA landmarks, live regions, and widgets.</dd> - </dl> - - <h3 id="规范特性">规范特性</h3> - - <dl> - <dt><a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA Activities Overview at W3C</a></dt> - <dd>Authoritative Overview of WAI-ARIA Standardization efforts by the Web Accessibility Initiative (WAI)</dd> - <dt><a class="external" href="http://www.w3.org/TR/wai-aria/" title="http://www.w3.org/TR/wai-aria/">WAI-ARIA Specification</a></dt> - <dd>The W3C specification itself, useful as a reference. Note that, at this stage, it is important to test compatibility, as implementations are still inconsistent.</dd> - <dt><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/" title="http://www.w3.org/WAI/PF/aria-practices/">WAI-ARIA Authoring Practices</a></dt> - <dd>Like the W3C WAI-ARIA specification, the official best practices represents a future ideal -- a day when authors can rely on consistent ARIA support across browsers and screen readers. The W3C documents provide an in-depth view of ARIA.<br> - <br> - For now, web developers implementing ARIA should maximize compatibility. Use best practices docs and examples based on current implementations.</dd> - <dt><a class="external" href="http://www.openajax.org/member/wiki/Accessibility" title="http://www.openajax.org/member/wiki/Accessibility">Open AJAX Accessibility Task Force</a></dt> - <dd>The Open AJAX effort centers around developing tools, sample files, and automated tests for ARIA.</dd> - <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="ARIA Techniques">Under Construction: WCAG 2.0 ARIA Techniques</a></dt> - <dd>The community needs a complete set of WCAG techniques for WAI-ARIA + HTML, so that organizations can be comfortable claiming their ARIA-enabled content is WCAG compliant. This is mostly important when regulations or policies are based on WCAG.</dd> - </dl> - </td> - </tr> - </tbody> - <tbody> - <tr> - <td colspan="2"> - <h3 id="Related_Topics" name="Related_Topics">相关主题</h3> - - <dl> - <dd><a href="/en-US/docs/Accessibility" title="en-US/docs/Accessibility">Accessibility</a>, <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></dd> - </dl> - </td> - </tr> - </tbody> -</table> +<h2 id="Support">支持</h2> + +<p>与任何其他 Web 技术一样，对 ARIA 有不同程度的支持。支持基于所使用的操作系统和浏览器，以及与之交互的辅助技术类型。此外，操作系统、浏览器和辅助技术的版本也是影响因素。较旧的软件版本可能不支持某些 ARIA 角色、仅部分支持或误报其功能。</p> + +<p>同样重要的是要承认一些依赖辅助技术的人不愿意升级他们的软件，因为害怕失去与他们的计算机和浏览器交互的能力。因此，尽可能对 <a href="/zh-CN/docs/Learn/Accessibility/HTML">使用语义化的 HTML 元素</a> 很重要，因为语义 HTML 对辅助技术的支持要好得多。</p> + +<p>使用实际辅助技术测试您编写的 ARIA 也很重要。就像浏览器模拟器和模拟器不是测试完全支持的有效解决方案一样，代理辅助技术解决方案不足以完全保证功能。</p> + +<h2 id="Tutorials">教程</h2> + +<dl> + <dt><a href="/zh-CN/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets">ARIA 简介</a></dt> + <dd>快速介绍如何使用 ARIA 访问动态内容。另请参阅 2008 年的经典 <a href="https://dev.opera.com/articles/view/introduction-to-wai-aria/">ARIA intro by Gez Lemon</a>。</dd> + <dt><a href="https://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Videos of screen readers using ARIA</a></dt> + <dd>查看来自网络的真实和简化示例，视频包括 ARIA “之前”和 ARIA“之后”。</dd> + <dt><a href="https://w3c.github.io/using-aria/">Using ARIA</a></dt> + <dd>开发人员实用指南。它建议在 HTML 元素上使用哪些 ARIA 属性。建议是基于实施的实际情况。</dd> +</dl> + +<h2 id="Simple_ARIA_enhancements">简单的 ARIA 增强</h2> + +<dl> + <dt><a href="https://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Enhancing page navigation with ARIA landmarks</a></dt> + <dd>使用 ARIA 地标改进屏幕阅读器用户的网页导航的一个很好的介绍。参考 <a href="https://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">ARIA landmark implementation notes</a> 和真实站点上的示例（截至 2011 年 7 月更新）。</dd> + <dt><a href="/zh-CN/docs/Web/Accessibility/ARIA/forms">Improving form accessibility</a></dt> + <dd>ARIA 不仅适用于动态内容！了解如何使用附加 ARIA 属性提高 HTML 表单的可访问性。</dd> +</dl> + +<h2 id="ARIA_for_Scripted_Widgets">脚本小部件的 ARIA</h2> + +<dl> + <dt><a href="/zh-CN/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets">编写可通过键盘导航的 JavaScript 小部件</a></dt> + <dd>{{HTMLElement("input")}}、{{HTMLElement("button")}} 等内置元素具有内置键盘辅助功能。如果您使用 {{HTMLElement("div")}} 和 ARIA 来“伪造”这些，则必须确保您的小部件可通过键盘访问。</dd> + <dt><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">实时区域</a></dt> + <dd>实时区域向屏幕阅读器提供有关如何处理页面内容更改的建议。</dd> + <dt><a href="https://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">Using ARIA Live Regions to announce content changes</a></dt> + <dd>JAWS 屏幕阅读器软件制造商对实时区域的快速总结。带有 Firefox 的 NVDA 和带有 Safari 的 VoiceOver 也支持实时区域。</dd> +</dl> + +<h2 id="References">参考文献</h2> + +<dl> + <dt><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles">ARIA Roles</a></dt> + <dd>参考页面涵盖了 MDN 上讨论的所有 WAI-ARIA 角色。</dd> +</dl> + +<h2 id="Standardization_Efforts">标准化工作</h2> + +<dl> + <dt><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA Specification</a></dt> + <dd>W3C 规范本身。</dd> + <dt><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices</a></dt> + <dd><p>官方最佳实践记录了如何最好地对常见小部件和交互进行 ARIA 化。一个很好的资源。</p></dd> +</dl> + +<h2 id="Videos">视频</h2> + +<p>以下演讲是了解 ARIA 的好方法：</p> + +<p><a href="https://www.youtube.com/watch?v=qdB8SRhqvFc">ARIA, Accessibility APIs and coding like you give a damn! – Léonie Watson</a></p> + +<h2 id="Filing_Bugs">提交错误</h2> + +<p><a href="/zh-CN/docs/Web/Accessibility/ARIA/How_to_file_ARIA-related_bugs">在浏览器、屏幕阅读器和 JavaScript 库上提交 ARIA 错误。</a></p> + +<h2 id="Related_Topics">相关话题</h2> + +<p><a href="/zh-CN/docs/Web/Accessibility">Accessibility</a>, <a href="/zh-CN/docs/Web/Guide/AJAX">AJAX</a>, <a href="/zh-CN/docs/Web/JavaScript">JavaScript</a></p> + +<section id="Quick_links"> + <ol> + <li><a href="/zh-CN/docs/Web/Guide">网页开发</a></li> + <li><a href="/zh-CN/docs/Mozilla/Accessibility">Mozilla 的可访问性</a></li> + </ol> +</section> 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> diff --git a/files/zh-cn/web/accessibility/aria/roles/list_role/index.html b/files/zh-cn/web/accessibility/aria/roles/list_role/index.html new file mode 100644 index 0000000000..788446c200 --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/roles/list_role/index.html @@ -0,0 +1,122 @@ +--- +title: 'ARIA: list role' +slug: Web/Accessibility/ARIA/Roles/List_role +tags: +- ARIA +- ARIA Role +- ARIA list +- 可访问性 +- 无障碍 +- Reference +- Role +- list +--- +<p>ARIA <code>list</code> 角色可用于标识项目列表。它通常与 <code>listitem</code> 角色结合使用，该角色用于标识包含在列表中的列表项。</p> + +<pre class="brush: html"><section role="list"> + <div role="listitem">List item 1</div> + <div role="listitem">List item 2</div> + <div role="listitem">List item 3</div> +</section> +</pre> + +<h2 id="Description">描述</h2> + +<p>任何由外部容器和内部元素列表组成的内容都可以分别使用 <code>list</code> 和 <code>listitem</code> 容器识别为辅助技术。一个 <code>list</code> 必须有一个或多个 <code>listitem</code> 子级，或者，有一个或多个 <code>group</code> 作为子级，每个 <code>group</code>有一个或多个 <code>listitem</code> 作为子项。</p> + +<p>关于应该使用哪些元素来标记 <code>list</code> 和 <code>listitem</code> 没有硬性规定，但是您应该确保 <code>listitem</code> 在列表的上下文中有意义，例如购物清单、食谱步骤、行车路线。</p> + +<div class="notecard warning"> + <h4>警告</h4> + <p>如果可能，您应该使用适当的语义化 HTML 元素来标记 <code>list</code> 及其 <code>listitem</code>，如 {{HTMLElement("ul")}}、{{HTMLElement("ol")}} 和 {{HTMLElement("li")}}。有关完整示例，请参阅 {{anch("Best_practices", "最佳实践")}}。</p> +</div> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties">关联的 WAI-ARIA 角色、状态和属性</h3> + +<dl> + <dt><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Listitem_role">listitem</a></dt> + <dd><p>列表或目录中的单个项目。角色为 listitem 的元素只能在角色为 <code>list</code> 或 <code>group</code> 的元素中找到。</p></dd> + <dt><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/group_role">group</a></dt> + <dd><p>相关对象的集合，在嵌套在列表中时仅限于列表项，其重要性不足以在页面目录中拥有自己的位置。</p></dd> +</dl> + +<h3 id="Keyboard_Interactions">键盘交互</h3> + +<p>无</p> + +<h3 id="Required_JavaScript_features">所需的 JavaScript 功能</h3> + +<p>无</p> + +<h2 id="Examples">示例</h2> + +<p><a href="https://www.scottohara.me/blog/2018/05/26/aria-lists.html">ARIA Lists</a> — Scott O'Hara 的一些有用的例子和想法</p> + +<h2 id="Best_practices">最佳实践</h2> + +<p>仅在必要时使用 <code>role="list"</code> 和 <code>role="listitem"</code>。例如，无法控制 HTML 但能够在之后动态使用 JavaScript 提升可访问性的时候。</p> + +<p>与 HTML {{HTMLElement("ol")}} 和 {{HTMLElement("ul")}} 不同，ARIA <code>list</code> 角色不区分有序列表和无序列表。如果可能，您应该使用适当的语义 HTML 元素来标记列表（{{HTMLElement("ol")}} 和 {{HTMLElement("ul")}}）和列表项（{{HTMLElement("li")}})。例如，我们上面的例子应该改写如下：</p> + +<pre class="brush: html"><ul> + <li>List item 1</li> + <li>List item 2</li> + <li>List item 3</li> +</ul></pre> + +<p>或者如果列表项的顺序很重要，则使用有序列表：</p> + +<pre class="brush: html"><ol> + <li>List item 1</li> + <li>List item 2</li> + <li>List item 3</li> +</ol></pre> + +<div class="notecard note"> + <h4>注意</h4> + <p>ARIA <code>list</code> / <code>listitem</code> 角色不区分有序列表和无序列表。</p> +</div> + +<p>顺便说一句，请注意，如果您使用 {{HTMLElement("ol")}} 或 {{HTMLElement("ul")}} 的语义 HTML 元素并应用 <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role"><code>presentation</code></a> 角色，则每个子 <code>li</code> 元素都会继承 <code>presentation</code> 角色，因为 ARIA 需要 <code>listitem</code> 元素具有父 <code>list</code> 元素。因此，<code>li</code> 元素不会暴露给辅助技术，但是包含在这些 <code>li</code> 元素中的元素，包括嵌套列表，对辅助技术是可见的。</p> + +<div class="notecard note"> + <h4>注意</h4> + <p>如果要标记将用作选项卡式界面的项目列表，则应改为使用 <code>tab</code>、<code>tabpanel</code> 和 <code>tablist</code> 角色。</p> +</div> + +<h2 id="Specifications">规范</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#list","list")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support">屏幕阅读器支持</h2> + +<p>TBD</p> + +<h2 id="See_also">相关链接</h2> + +<ul> + <li><a href="https://wicg.github.io/aom/spec/">Accessibility Object Model</a></li> + <li><a href="https://w3c.github.io/html-aria/">ARIA in HTML</a></li> + <li>{{HTMLElement("ul")}}</li> + <li>{{HTMLElement("ol")}}</li> + <li>{{HTMLElement("li")}}</li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Listitem_role">ARIA: listitem role</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/group_role">ARIA: group role</a></li> +</ul> + +<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> diff --git a/files/zh-cn/web/accessibility/aria/roles/listbox_role/index.html b/files/zh-cn/web/accessibility/aria/roles/listbox_role/index.html new file mode 100644 index 0000000000..7c48e3add6 --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/roles/listbox_role/index.html @@ -0,0 +1,220 @@ +--- +title: 'ARIA: listbox role' +slug: Web/Accessibility/ARIA/Roles/listbox_role +tags: + - ARIA + - 可访问性 + - 无障碍 +translation_of: Web/Accessibility/ARIA/Roles/listbox_role +--- +<p><code>listbox</code> 角色用于列表，用户可以从中选择一个或多个静态选项，并且与 HTML {{HTMLElement("select")}} 元素不同，它可能包含图像。</p> + +<h2 id="Description">描述</h2> + +<p><code>listbox</code> 角色用于标识创建列表的元素，用户可以从中选择一个或多个静态选项，类似于 HTML {{HTMLElement("select")}} 元素。与 {{HTMLElement("select")}} 不同，<code>listbox</code> 可以包含图像。<code>listbox</code> 的每个子项都应该有一个 <a href="https://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#option"><code>option</code></a> role。</p> + +<p>强烈建议使用 HTML {{HTMLElement("select")}} 元素，如果只能选择一个选项，则使用一组单选按钮，如果可以选择多个选项，则使用一组复选框，因为有很多键盘交互来管理所有后代的焦点和原生 HTML 元素为您提供相关的功能。</p> + +<p>具有 <code>listbox</code> 角色的元素含有隐式的 <code>aria-orientation</code> 和 <code>vertical</code> 值。</p> + +<p>当一个列表被 tab 聚焦到时，如果没有其他内容，将会选择列表中的第一项。可以用 Up/Down 方向键在列表中导航，按 Shift + Up/Down 方向键将移动并扩展选择。键入一个或多个字母将在列表项中导航（相同的字母指向以那个开头的每个选项，不同的字母指向以整个字符串开头的第一个选项）。如果当前选项有关联的菜单， Shift+F10 将启动该菜单。如果项目可被勾选，Space 可用于切换 <a href="https://www.w3.org/TR/wai-aria-practices/#checkbox"><code>checkbox</code></a> role。对于可选择的列表项，Space 切换它们的选择，Shift+Space 可用于选择连续的项目，Ctrl+方向键 移动而不选择， Ctrl+Space 可用于选择非连续的项目。建议使用 checkbox、link 或其他方法来选择所有项目，为此可以使用 Ctrl+A 作为快捷键。</p> + +<p>当 listbox 角色被添加到元素中，或含有它的元素变得可见时，屏幕阅读器会在 listbox 获得焦点时读出它的 label 和 role。如果列表中的 option 或选项获得焦点，则接下来会读出它，如果屏幕阅读器支持，则会在列表中指示选项的位置。当焦点在列表中移动时，屏幕阅读器会读出相关选项。</p> + +<h3 id="Associated_ARIA_roles_states_and_properties">相关的 ARIA 角色、状态和属性</h3> + +<h4 id="Associated_Roles">相关角色</h4> + +<dl> + <dt><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/option_role">option</a></dt> + <dd>需要一个或多个嵌套的 <code>option</code>。 所有被选择的选项都含有 <code>aria-selected</code> 且值为 <code>true</code>。所有未选中的选项都含有 <code>aria-selected</code> 且值为 <code>false</code>。 如果某个选项不可选择，<code>aria-selected</code> 会被忽略。</dd> + <dt><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></dt> + <dd>包含 <code>listitem</code> 元素的部分</dd> +</dl> + +<h4 id="States_and_Properties">状态和属性</h4> + +<dl> + <dt>aria-activedescendant</dt> + <dd>保存 listbox 中当前活动元素的 <code>id</code> 字符串。如果这是一个 option 元素，那么这将是最近与之交互选项的 <code>id</code>，无论该选项是否具有值为 <code>true</code> 的 <code>aria-selected</code>。即使在多选列表框中，也只会有一个 <code>id</code>。如果 <code>id</code> 不引用 listbox 的 DOM 后代，则 <code>id</code> 必须包含在 <code>aria-owns</code> 属性中的 ID 中。</dd> + <dt>aria-owns</dt> + <dd>这是一个以空格分隔的元素 ID 列表，它们不是 listbox 的 DOM 子元素。此处列出的 ID 也不能列在任何其他元素的 <code>aria-owns</code> 属性中。</dd> + <dt>aria-multiselectable</dt> + <dd>如果用户可以选择多个选项，则存在并设置为 <code>true</code>。如果设置为 <code>true</code>，<em>每个</em> 可选的选项都应包含 <code>aria-selected</code> 属性并设置为 <code>true</code> 或 <code>false</code>。 <em>不可选</em>的选项<em>不应该</em>具有<code>aria-selected</code>属性。</dd> + <dd>如果值为 <code>false</code> 或被省略，那么仅当前选中的选项（如果有任何选项被选中）才需要<code>aria-selected</code>属性，而且必须设置为<code>true</code>。</dd> + <dt>aria-required</dt> + <dd>一个布尔属性，指示必须选择具有非空字符串值的选项。</dd> + <dt>aria-readonly</dt> + <dd>用户无法更改选择或取消选择，但 listbox 是可操作的。</dd> + <dt>aria-label</dt> + <dd>一个可供人类阅读的字符串，用于标识 listbox。如果有可见标签，则应使用 <code>aria-labelledby</code> 来引用该标签。</dd> + <dt>aria-labelledby</dt> + <dd>标识以空格分隔的元素 ID 列表中的一个或多个可见元素，这些元素标识 listbox。如果没有可见标签，则应该使用 <code>aria-label</code> 来包含标签。 （注意：带有两个 L 的 "labelled" 是基于辅助功能 API 约定的正确拼写。）</dd> + <dt>aria-roledescription</dt> + <dd>一个可供人类阅读的字符串，可以更清楚地标识 listbox 的作用。屏幕阅读器通常会在阅读标签（如果存在）后向用户阅读此值，而不是说 “listbox”。</dd> +</dl> + +<p>（有关更多详细信息以及 ARIA 状态和属性的完整列表，请参阅 <a href="https://www.w3.org/TR/wai-aria-1.1/#listbox">ARIA <code>listbox</code> (role)</a> 文档。 )</p> + +<h3 id="Keyboard_interactions">键盘交互</h3> + +<ul> + <li>当单选 listbox 获得焦点时： + <ul> + <li>如果在 listbox 获得焦点之前没有选择任何选项，则第一个选项将获得焦点。（可选）可以自动选择第一个选项。</li> + <li>如果在列表框获得焦点之前选择了一个选项，则焦点将设置在所选选项上。</li> + </ul> + </li> + <li>当多选 listbox 获得焦点时： + <ul> + <li>如果在列表框获得焦点之前没有选择任何选项，则焦点将设置在第一个选项上，并且选择状态不会自动更改。</li> + <li>如果在列表框获得焦点之前选择了一个或多个选项，则焦点将设置在列表中选定的第一个选项上。</li> + </ul> + </li> + <li><kbd>Down Arrow</kbd>: 将焦点移至下一个选项。（可选）在单选 listbox 中，选中的值也可以随焦点移动。</li> + <li><kbd>Up Arrow</kbd>: 将焦点移至上一个选项。（可选）在单选 listbox 中，选中的值也可以随焦点移动。</li> + <li><kbd>Home</kbd> (可选): 将焦点移至第一个选项。（可选）在单选列表框中，选中的值也可以随焦点移动。对于超过五个选项的列表，强烈建议支持此键。</li> + <li><kbd>End</kbd> (可选): 将焦点移至最后一个选项。（可选）在单选列表框中，选中的值也可以随焦点移动。对于超过五个选项的列表，强烈建议支持此键。</li> + <li>建议所有 listbox 都预先输入，尤其是那些有七个以上选项的列表框： + <ul> + <li>键入字符时：焦点移至名称符合键入的字符开头的一项。</li> + <li>快速连续键入多个字符时：焦点移至名称符合键入的字符串开头的一项。</li> + </ul> + </li> + <li><strong>多项选择</strong>: 作者可以实现两种交互模型中的任何一种来支持多选：推荐模型，不需要用户在导航列表时按住修饰键，例如 <kbd>Shift</kbd> 或 <kbd>Control</kbd> 或者需要在导航时按住修饰键以避免丢失选择状态的替代模型。 + <ul> + <li>推荐的选择模型——不需要按住修饰键： + <ul> + <li><kbd>Space</kbd>: 更改焦点选项的选择状态。</li> + <li><kbd>Shift + Down Arrow</kbd> （可选）: 将焦点移动并切换到下一个选项的选定状态。</li> + <li><kbd>Shift + Up Arrow</kbd> （可选）: 将焦点移动并切换到上一个选项的选定状态。</li> + <li><kbd>Shift + Space</kbd> （可选）: 选择从最近选择的项目到焦点项目的连续项目。</li> + <li><kbd>Control + Shift + Home</kbd> （可选）: 选择焦点选项和直到第一个选项的所有选项。 （可选）将焦点移至第一个选项。</li> + <li><kbd>Control + Shift + End</kbd> （可选）: 选择焦点选项和直到最后一个选项的所有选项。 （可选）将焦点移到最后一个选项。</li> + <li><kbd>Control + A</kbd> （可选）: 选择列表中的所有选项。（可选）如果选择了所有选项，它也可以取消选择所有选项。</li> + </ul> + </li> + </ul> + </li> +</ul> + +<h3 id="Required_JavaScript_features">所需的 JavaScript 功能</h3> + +<h4 id="selecting_an_option_in_a_single_select_listbox">在单选 listbox 中选择一个选项</h4> + +<p>当用户选择一个选项时，必须发生以下情况：</p> + +<ol> + <li>取消选择先前选择的选项，将 aria-selected 设置为 false，或完全删除该属性，将新未选择的选项的外观更改为未选择的。</li> + <li>选择新选择的选项，在该选项上设置 aria-selected="true" 并将新选择的选项的外观更改为选中。</li> + <li>将列表框上的 <code>aria-activedescendant</code> 值更新为新选择的选项的 id</li> + <li>可视化处理选项的丢焦、聚焦和选定状态</li> +</ol> + +<h4 id="Toggling_the_state_of_an_option_in_a_multi_select_listbox">在多选列表框中切换选项的状态</h4> + +<p>当用户点击一个选项、聚焦在一个选项时按下 <kbd>Space</kbd>或者以其他方式切换一个选项的状态，必须发生以下情况：</p> + +<ol> + <li>切换当前聚焦选项的 aria-selected 状态，如果它是 false，则将 aria-selected 的状态更改为 true，如果为 true，则将其更改为 false。</li> + <li>更改选项的外观以反映其选定状态</li> + <li>将列表框上的 aria-activedescendant 值更新为用户刚刚与之交互的选项的 id，即使他们将选项切换为取消选择。</li> +</ol> + +<div class="notecard note"> + <p>ARIA 使用的第一原则是您可以使用具有内置语义和行为的原生功能，而不是重新利用元素并<strong>添加</strong> ARIA角色、状态或属性使其可访问。含有后代 {{HTMLElement("option")}} 元素的 {{HTMLElement("select")}} 元素带有所有需要的交互的原生处理方法。</p> +</div> + +<h2 id="Examples">例子</h2> + +<h4 id="Example_1_A_single_select_listbox_that_uses_aria-activedescendant">例子 1: 使用 aria-activedescendant 的单个选择列表框</h4> + +<p>下面的代码片段显示了如何将列表框角色直接添加到 html 源代码中。</p> + +<pre class="brush: html"><p id="listbox1label" role="label">Select a color:</p> +<div role="listbox" tabindex="0" id="listbox1" aria-labelledby="listbox1label" + onclick="return listItemClick(event);" + onkeydown="return listItemKeyEvent(event);" + onkeypress="return listItemKeyEvent(event);" + aria-activedescendant="listbox1-1"> + <div role="option" id="listbox1-1" class="selected" aria-selected="true">Green</div> + <div role="option" id="listbox1-2">Orange</div> + <div role="option" id="listbox1-3">Red</div> + <div role="option" id="listbox1-4">Blue</div> + <div role="option" id="listbox1-5">Violet</div> + <div role="option" id="listbox1-6">Periwinkle</div> +</div> +</pre> + +<p>使用原生的 HTML {{HTMLElement("select")}} 和 {{HTMLElement("label")}} 元素可以更简单。</p> + +<pre class="brush: html"><label for="listbox1">Select a color:</label> +<select id="listbox1"> + <option selected>Green</option> + <option>Orange</option> + <option>Red</option> + <option>Blue</option> + <option>Violet</option> + <option>Periwinkle</option> +</select></pre> + +<h4 id="More_examples">更多例子</h4> + +<ul> + <li><a href="https://w3c.github.io/aria-practices/examples/listbox/listbox-scrollable.html">可滚动的 listbox 示例</a>: 滚动显示更多选项的单选 listbox，类似于 HTML <code>select</code> 的 <code>size</code> 属性大于 1。</li> + <li><a href="https://w3c.github.io/aria-practices/examples/listbox/listbox-collapsible.html">可折叠下拉 listbox 示例</a>: 激活时展开的单选可折叠 listbox，类似于 HTML <code>select</code> 并且属性 <code>size="1"</code>。</li> + <li><a href="https://w3c.github.io/aria-practices/examples/listbox/listbox-rearrangeable.html">具有可重新排列选项的 listbox 示例</a>: 带有可以添加、移动和删除选项的附带工具栏的单选和多选 listbox 的示例。</li> +</ul> + +<h2 id="Best_practices">最佳实践</h2> + +<ul> + <li>为了便于键盘访问，作者应该对这个角色的所有后代进行 <a href="https://www.w3.org/TR/wai-aria-1.1/#managingfocus">焦点管理</a></li> + <li>建议作者在列表未聚焦时使用不同的样式进行选择，例如非活动选项通常以较浅的背景颜色显示。</li> + <li>如果 listbox 不是另一个组件的一部分，那么它应该具有 <code>aria-labelledby</code> 属性。</li> + <li>如果一个或多个条目不是 listbox 的 DOM 子项，则需要设置额外的 <code>aria-*</code> 属性（参见 <a href="https://www.w3.org/TR/wai-aria-practices/#listbox_div">ARIA Best Practices</a>)。</li> + <li>如果有理由 <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-expanded">展开</a> 列表框，<a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/combobox_role"><code>combobox</code></a> 角色可能更合适。</li> +</ul> + +<h2 id="Specifications">规范</h2> + +<table> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#listbox","ARIA listbox role")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + <tr> + <td>{{SpecName("ARIA Authoring Practices","#Listbox","Listbox Role")}}</td> + <td>{{Spec2('ARIA Authoring Practices')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support">屏幕阅读器支持</h2> + +<p>TBD</p> + +<h2 id="See_also">另见</h2> + +<ul> + <li>{{HTMLElement("select")}} 元素</li> + <li>{{HTMLElement("label")}} 元素</li> + <li>{{HTMLElement("option")}} 元素</li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/combobox_role">ARIA: <code>combobox</code> 角色</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/option_role">ARIA: <code>option</code> 角色</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/List_role">ARIA: <code>list</code> 角色</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Listitem_role">ARIA: <code>listitem</code> 角色</a></li> + <li><a href="https://www.w3.org/TR/wai-aria-practices/#Listbox">ARIA Best Practices – Listbox</a></li> + <li><a href="https://www.w3.org/TR/wai-aria-1.1/#listbox">ARIA Role Model – Listbox</a></li> +</ul> + +<section id="Quick_links"> + <ol> + <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li> + </ol> +</section> diff --git a/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.html b/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.html new file mode 100644 index 0000000000..a4f9bb691d --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.html @@ -0,0 +1,120 @@ +--- +title: 'ARIA: listitem role' +slug: Web/Accessibility/ARIA/Roles/Listitem_role +tags: +- ARIA +- ARIA Role +- ARIA listitem +- 可访问性 +- 无障碍 +- Reference +- Role +- listitem +--- +<p>ARIA <code>listitem</code> 角色可用于标识项目列表中的项目。它通常与 <code>list</code> 角色结合使用，用于标识列表容器。</p> + +<pre class="brush: html"><section role="list"> + <div role="listitem">List item 1</div> + <div role="listitem">List item 2</div> + <div role="listitem">List item 3</div> +</section> +</pre> + +<h2 id="Description">描述</h2> + +<p>任何由外部容器和内部元素列表组成的内容都可以分别使用 <code>list</code> 和 <code>listitem</code> 容器识别为辅助技术。</p> + +<p>关于应该使用哪些元素来标记 <code>list</code> 和 <code>listitem</code> 没有硬性规定，但是您应该确保 <code>listitem</code> 在列表的上下文中有意义，例如购物清单、食谱步骤、行车路线。</p> + +<div class="notecard warning"> + <h4>警告</h4> + <p>如果可能，您应该使用适当的语义化 HTML 元素来标记 <code>list</code> 及其 <code>listitem</code>，如 {{HTMLElement("ul")}}、{{HTMLElement("ol")}} 和 {{HTMLElement("li")}}。有关完整示例，请参阅 {{anch("Best_practices", "最佳实践")}}。</p> +</div> + +<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties">关联的 WAI-ARIA 角色、状态和属性</h3> + +<dl> + <dt><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></dt> + <dd><p>项目列表。角色为 <code>list</code> 的元素必须有一个或多个角色为 <code>listitem</code> 的元素作为子元素，一个或多个角色为 <code>group</code> 的元素具有一个或多个具有 <code>listitem</code> 角色的元素作为子元素。</p></dd> + <dt><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/group_role">group</a></dt> + <dd><p>相关对象的集合，在嵌套在列表中时仅限于列表项，其重要性不足以在页面目录中拥有自己的位置。</p></dd> +</dl> + +<h3 id="Keyboard_Interactions">键盘交互</h3> + +<p>无</p> + +<h3 id="Required_JavaScript_features">所需的 JavaScript 功能</h3> + +<p>无</p> + +<h2 id="Examples">示例</h2> + +<p><a href="https://www.scottohara.me/blog/2018/05/26/aria-lists.html">ARIA Lists</a> — Scott O'Hara 的一些有用的例子和想法</p> + +<h2 id="Best_practices">最佳实践</h2> + +<p>仅在必要时使用 <code>role="list"</code> 和 <code>role="listitem"</code>。例如，无法控制 HTML 但能够在之后动态使用 JavaScript 提升可访问性的时候。</p> + +<p>与 HTML {{HTMLElement("ol")}} 和 {{HTMLElement("ul")}} 不同，ARIA <code>list</code> 角色不区分有序列表和无序列表。如果可能，您应该使用适当的语义 HTML 元素来标记列表（{{HTMLElement("ol")}} 和 {{HTMLElement("ul")}}）和列表项（{{HTMLElement("li")}})。例如，我们上面的例子应该改写如下：</p> + +<pre class="brush: html"><ul> + <li>List item 1</li> + <li>List item 2</li> + <li>List item 3</li> +</ul></pre> + +<p>或者如果列表项的顺序很重要，则使用有序列表：</p> + +<pre class="brush: html"><ol> + <li>List item 1</li> + <li>List item 2</li> + <li>List item 3</li> +</ol></pre> + +<div class="notecard note"> + <h4>注意</h4> + <p>ARIA <code>list</code> / <code>listitem</code> 角色不区分有序列表和无序列表。</p> +</div> + +<div class="notecard note"> + <h4>注意</h4> + <p>如果要标记将用作选项卡式界面的项目列表，则应改为使用 <code>tab</code>、<code>tabpanel</code> 和 <code>tablist</code> 角色。</p> +</div> + +<h2 id="Specifications">规范</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + <tr> + <td>{{SpecName("ARIA","#listitem","listitem")}}</td> + <td>{{Spec2('ARIA')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Screen_reader_support">屏幕阅读器支持</h2> + +<p>TBD</p> + +<h2 id="See_also">相关链接</h2> + +<ul> + <li><a href="https://wicg.github.io/aom/spec/">Accessibility Object Model</a></li> + <li><a href="https://w3c.github.io/html-aria/">ARIA in HTML</a></li> + <li>{{HTMLElement("ul")}}</li> + <li>{{HTMLElement("ol")}}</li> + <li>{{HTMLElement("li")}}</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/List_role">ARIA: list role</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/group_role" rel="nofollow">ARIA: group role</a></li> +</ul> + +<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> |