@@ -2,64 +2,31 @@
22<html lang="en">
33<head>
44<meta charset="utf-8">
5-65<title>Using ARIA</title>
7-<script class='remove'>
8-function addEllipsis(id) {
9-document.getElementById(id).childNodes.item(2).textContent = "\n …\n";
10-}
11-function removeNodes(nodesToRemove) {
12-var i, j;
13-for (i = 0; i < nodesToRemove.length; ++i) {
14-for (j = 0; j < nodesToRemove[i].length; ++j) {
15-nodesToRemove[i][j].parentNode.removeChild(nodesToRemove[i][j]);
16-}
17-}
18-}
19-</script>
20-<script type="text/javascript" src='https://www.w3.org/Tools/respec/respec-w3c-common' class='remove'></script>
6+<script src='https://www.w3.org/Tools/respec/respec-w3c' class='remove'></script>
217<script type="text/javascript" class='remove'>
228var respecConfig = {
23-includePermalinks: false,
24-permalinkEdge: true,
25-permalinkHide: false,
26-permalinkSymbol: "🔗",
27-specStatus: "ED",
28-shortName: "using-aria",
29-edDraftURI: "https://w3c.github.io/using-aria/",
30-noRecTrack: "true",
31-editors: [
32-{ name: "Steve Faulkner",
33-company: "The Paciello Group",
34-mailto: "sfaulkner@paciellogroup.com",
35-w3cid: "35007"
36-},
37-{ name: "David MacDonald",
38-company: "CanAdapt Solutions Inc.",
39-mailto: "david100@sympatico.ca",
40-w3cid: "35466"
41-},
42-],
43-extraCSS: [ "https://dev.w3.org/2009/dap/ReSpec.js/css/respec.css" ],
44-wg: "Web Platform Working Group",
45-wgURI: "https://www.w3.org/WebPlatform/WG/",
46-license: "w3c-software-doc",
47-wgPublicList: "public-html",
48-wgPatentURI: "https://www.w3.org/2004/01/pp-impl/83482/status",
49-50-github: "https://github.com/w3c/using-aria/",
51-52-53-54-after: function () {
55-var nodesToRemove = [
56-document.querySelectorAll("table.parameters"),
57-document.querySelectorAll("li.tocline > a[href^='#attributes']"),
58-document.querySelectorAll("li.tocline > a[href^='#methods']"),
59-];
60-addEllipsis('idl-def-HTMLElement');
61-removeNodes(nodesToRemove);
62-}
9+specStatus: "ED",
10+shortName: "using-aria",
11+noRecTrack: "true",
12+editors: [
13+{
14+name: "Steve Faulkner",
15+company: "The Paciello Group",
16+mailto: "sfaulkner@paciellogroup.com",
17+w3cid: "35007",
18+},
19+{
20+name: "David MacDonald",
21+company: "CanAdapt Solutions Inc.",
22+mailto: "david100@sympatico.ca",
23+w3cid: "35466",
24+},
25+],
26+wg: "Web Platform Working Group",
27+wgURI: "https://www.w3.org/WebPlatform/WG/",
28+wgPatentURI: "https://www.w3.org/2004/01/pp-impl/83482/status",
29+github: "w3c/using-aria",
6330};
6431</script>
6532<style>
150117 accessibility information to HTML elements using the
151118 Accessible Rich Internet Applications specification [[WAI-ARIA-1.1]], which
152119 defines a way to make Web content and Web applications more accessible to
153- people with disabilities. This document demonstrates how to use WAI-ARIA in [[HTML51]], which especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.</p>
120+ people with disabilities. This document demonstrates how to use WAI-ARIA in [[HTML]], which especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.</p>
154121</section>
155122<section id="sotd">
156123<p class="note">This document is informative only. Resources are for information purposes only, no endorsement implied.</p>
@@ -169,7 +136,7 @@ <h2>Introduction</h2>
169136 people with disabilities. This document demonstrates how to use WAI-ARIA in HTML5, it especially helps with dynamic content and
170137 advanced user interface controls developed with Ajax, HTML, JavaScript, and
171138 related technologies.</p>
172-<p>This document provides advice for use of ARIA attributes in [[HTML51]]. </p>
139+<p>This document provides advice for use of ARIA attributes in [[HTML]]. </p>
173140<p>For general best-practice information about using ARIA, see the
174141 [[wai-aria-practices-1.1]] document.</p>
175142<p>The following is a longer list of resources that provide relevant information:</p>
@@ -186,10 +153,10 @@ <h2 tabindex="-1" id="notes2">Notes on ARIA Use in HTML</h2>
186153187154<section id="firstrule">
188155<h3 tabindex="-1" id="rule1">First Rule of ARIA Use</h3>
189-<p>If you <em>can</em> use a native HTML element [[HTML51]] or attribute with the semantics and behavior you require <strong>already built in</strong>, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible<strong>, then do so</strong>.</p>
156+<p>If you <em>can</em> use a native HTML element [[HTML]] or attribute with the semantics and behavior you require <strong>already built in</strong>, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible<strong>, then do so</strong>.</p>
190157<p><strong>Under what circumstances may this not be possible?</strong></p>
191158<ul>
192-<li>If the feature is available in HTML [[HTML51]] but it is not implemented or it is implemented, but <a href="http://www.html5accessibility.com">accessibility support</a> is not.</li>
159+<li>If the feature is available in HTML [[HTML]] but it is not implemented or it is implemented, but <a href="http://www.html5accessibility.com">accessibility support</a> is not.</li>
193160<li>If the visual design constraints rule out the use of a particular native element, because the element cannot be styled as required.</li>
194161<li>If the feature is <a href="https://www.paciellogroup.com/blog/2014/10/aria-in-html-there-goes-the-neighborhood/#html5na">not currently available in HTML</a>.</li>
195162</ul></section>
@@ -220,7 +187,7 @@ <h3 tabindex="-1" id="fourth">Fourth Rule of ARIA Use</h3>
220187<pre class="nohighlight"><code class="block"><<mark>button</mark> <mark>aria-hidden="true"</mark>>press me</<mark>button</mark>></code> </pre>
221188<p class="note">Applying <code>aria-hidden</code> to a parent/ancestor of a visible interactive element will also result in the interactive element being hidden, so <strong>don't do this either</strong>:</p>
222189<pre class="nohighlight"><code class="block">
223-<<mark>div</mark> <mark>aria-hidden="true"</mark>>
190+<<mark>div</mark> <mark>aria-hidden="true"</mark>>
224191<button>press me</button>
225192<mark></div></mark></code></pre>
226193<p class="note">If an interactive element <strong>cannot be seen or interacted with</strong>, then you can apply <code>aria-hidden</code>, as long as it's not focusable. For example:</p>
@@ -259,12 +226,12 @@ <h3 tabindex="-1" id="fourth">Fourth Rule of ARIA Use</h3>
259226<mark><span id="p1">user name</span> <input type="text" aria-labelledby="p1">
260227261228</code></pre>
262-263-229+230+264231<p>The control's <a href="https://en.wikipedia.org/wiki/Microsoft_Active_Accessibility">MSAA</a> <code>accName</code> property has a value of "user name":</p>
265232<p><img src="name.png" width="277" height="143" alt="example control with MSAA name and role information displayed. The accName property has a value of 'user name', the accRole property is 'editable text'."></p>
266233<div class="note"><p>Note: The example above is for ARIA widgets. For regular HTML inputs, follow the First Rule of ARIA, and use the <a href="https://www.w3.org/TR/html52/sec-forms.html#the-label-element"><code>label</code></a> element with a <code>for</code> attribute to associate labels with <code>input</code> elements.</p></div>
267-234+268235<h4>HTML <code>label</code> element and labelable elements</h4>
269236<p>The following is about using the <code>label</code> in HTML. If you are building ARIA widgets, refer to the <a href="https://www.w3.org/TR/wai-aria-practices-1.1/">ARIA Authoring Practices Document</a>
270237<p>The <a href="https://www.w3.org/TR/html51/sec-forms.html#the-label-element"><code>label</code></a> element cannot be used to provide an accessible name for custom controls, unless the <code>label</code> is referencing a native HTML <a href="https://www.w3.org/TR/html51/sec-forms.html#labelable-element">labelable element</a>.</p>
@@ -411,7 +378,7 @@ <h5>Well supported elements</h5>
411378</ul>
412379<h5 id="p10">Other static elements with <code>aria-label</code>, <code>aria-labelledby</code> and <code>aria-describedby</code></h5>
413380<p>NOTE: There are no appreciable differences in these tests across popular browsers, platforms or in <code>iframe</code>s.</p>
414-381+415382<table aria-describedby="p10" >
416383<thead >
417384<tr>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。