Skip to content

Commit 69dc8ae

Browse files
momdomomdo
committed
Merge branch 'techniques-20191001'
2 parents 196a938 + 105dc27 commit 69dc8ae

664 files changed

Lines changed: 91829 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎techniques/.DS_Store‎

6 KB
Binary file not shown.

‎techniques/aria/ARIA1.html‎

Lines changed: 350 additions & 0 deletions
Large diffs are not rendered by default.

‎techniques/aria/ARIA10.html‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>ARIA10: Using aria-labelledby to provide a text alternative for non-text content</title>
6+
<link rel="stylesheet" type="text/css" href="https://www.w3.org/StyleSheets/TR/2016/base" />
7+
<link rel="stylesheet" type="text/css" href="../techniques.css" />
8+
<link rel="stylesheet" type="text/css" href="../slicenav.css" />
9+
</head>
10+
<body>
11+
<nav>
12+
<ul id="navigation">
13+
<li><a href="../#techniques" title="Table of Contents">Contents</a></li>
14+
<li><a href="../#introduction" title="Introduction to Techniques">Intro</a></li>
15+
<li><a href="ARIA9">Previous Technique: ARIA9</a></li>
16+
<li><a href="ARIA11">Next Technique: ARIA11</a></li>
17+
</ul>
18+
</nav>
19+
<nav class="navtoc">
20+
<p>On this page:</p>
21+
<ul id="navbar">
22+
<li><a href="#important-information">Important Information about Techniques</a></li>
23+
<li><a href="#applicability">Applicability</a></li>
24+
<li><a href="#description">Description</a></li>
25+
<li><a href="#examples">Examples</a></li>
26+
<li><a href="#resources">Related Resources</a></li>
27+
<li><a href="#related">Related Techniques</a></li>
28+
<li><a href="#tests">Tests</a></li>
29+
</ul>
30+
</nav>
31+
<h1>Using aria-labelledby to provide a text alternative for non-text content</h1>
32+
<section id="important-information">
33+
<h2>Important Information about Techniques</h2>
34+
<p>See <a href="https://waic.jp/docs/WCAG21/Understanding/understanding-techniques">Understanding Techniques for WCAG Success Criteria</a> for important information about the usage of these informative techniques and how
35+
they relate to the normative WCAG 2.1 success criteria. The Applicability section
36+
explains the scope of the technique, and the presence of techniques for a specific
37+
technology does not imply that the technology can be used in all situations to create
38+
content that meets WCAG 2.1.
39+
</p>
40+
</section>
41+
<main>
42+
<section id="applicability">
43+
<h2>Applicability</h2>
44+
<p>This technique applies to HTML with <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>.
45+
</p>
46+
<p>This technique relates to <span><a href="https://waic.jp/docs/WCAG21/Understanding/non-text-content">Success Criterion 1.1.1: Non-text Content</a> (Sufficient)</span>.
47+
</p>
48+
</section>
49+
<section id="description">
50+
<h2>Description</h2>
51+
<p>The purpose of this technique is to provide a short description for an element that
52+
can be read by assistive technologies (AT) by using the <code class="att">aria-labelledby</code> attribute. The <code class="att">aria-labelledby</code> attribute associates an element with text that is visible elsewhere on the page by
53+
using an ID reference value that matches the ID attribute of the labeling element.
54+
Assistive technology such as screen readers use the text of the element identified
55+
by the value of the <code class="att">aria-labelledby</code> attribute as the text alternative for the element with the attribute.
56+
</p>
57+
</section>
58+
<section id="examples">
59+
<h2>Examples</h2>
60+
<section class="example" id="example-1-providing-a-short-description-for-a-complex-graphic">
61+
<h3>Example 1: Providing a short description for a complex graphic</h3>
62+
<p>This example shows how to use the <code class="att">aria-labelledby</code> attribute to provide a short text description for a read-only complex graphic of
63+
an star rating pattern; the graphic is composed of several image elements. The text
64+
alternative for the graphic is the label, visible on the page beneath the star pattern.
65+
</p><pre xml:space="preserve">&lt;div role="img" aria-labelledby="star_id"&gt;
66+
&lt;img src="fullstar.png" alt=""/&gt;
67+
&lt;img src="fullstar.png" alt=""/&gt;
68+
&lt;img src="fullstar.png" alt=""/&gt;
69+
&lt;img src="fullstar.png" alt=""/&gt;
70+
&lt;img src="emptystar.png" alt=""/&gt;
71+
&lt;/div&gt;
72+
73+
&lt;div id="star_id"&gt;4 of 5&lt;/div&gt;</pre><p class="working-example">Working example: <a href="../../working-examples/aria-labelledby-description-complex-graphic/">Providing a short description for a complex graphic</a>.
74+
75+
</p>
76+
</section>
77+
</section>
78+
<section id="resources">
79+
<h2>Resources</h2>
80+
<p>Resources are for information purposes only, no endorsement implied.</p>
81+
<ul>
82+
83+
<li>
84+
<a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</a>
85+
86+
</li>
87+
88+
<li>
89+
<a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description
90+
Calculation</a>
91+
92+
</li>
93+
94+
<li>
95+
<a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a>
96+
97+
</li>
98+
99+
</ul>
100+
</section>
101+
<section id="related">
102+
<h2>Related Techniques</h2>
103+
<ul>
104+
105+
<li><a href="../html/H37">H37: Using alt attributes on img elements</a></li>
106+
107+
<li><a href="../failures/F65">F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative
108+
on img elements, area elements, and input elements of type "image"</a></li>
109+
110+
</ul>
111+
</section>
112+
<section id="tests">
113+
<h2>Tests</h2>
114+
<section class="procedure" id="procedure">
115+
<h3>Procedure</h3>
116+
117+
<ol>
118+
119+
<li>Examine each element where the <code class="att">aria-labelledby</code> attribute is present and the element does not support the <code class="att">alt</code> attribute.
120+
</li>
121+
122+
<li>Check whether the value of the <code class="att">aria-labelledby</code> attribute is the id of an element on the web page.
123+
</li>
124+
125+
<li>Determine that the text of the element identified by the <code class="att">aria-labelledby</code> attribute accurately labels the element, provides a description of its purpose, or
126+
provides equivalent information.
127+
</li>
128+
129+
</ol>
130+
131+
</section>
132+
<section class="results" id="expected-results">
133+
<h3>Expected Results</h3>
134+
135+
<ul>
136+
137+
<li>#2 and #3 are true.</li>
138+
139+
</ul>
140+
141+
</section>
142+
</section>
143+
</main>
144+
</body>
145+
</html>

0 commit comments

Comments
 (0)