-
Notifications
You must be signed in to change notification settings - Fork 285
/
Copy pathARIA12.html
77 lines (70 loc) · 4.47 KB
/
ARIA12.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
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using role=heading to identify headings</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using role=heading to identify headings</h1><section class="meta"><p class="id">ID: ARIA12</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
<p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
</section><section id="description"><h2>Description</h2>
<p>The purpose of this technique is to provide a way for Assistive Technologies (AT) to identify
a piece of content as a heading. Applying role="heading" to an element causes an AT (like a
screen reader) to treat it as though it were a heading.
</p>
<p>If there is more than one heading on the page and the heading hierarchy is defined through the
visual presentation, the <code class="att">aria-level</code> attribute should be used to indicate the hierarchical level of
the heading.
</p>
<p>When possible, use native heading mark-up directly. For example, it is preferable
to use <code class="el">h1</code> rather than using <div role="heading" aria-level="1">. However, the use of the
heading role, instead of heading mark-up, may be necessary. For example, when retrofitting a legacy site where scripts depend on the existing element hierarchy.
</p>
<p>The use of the <code class="prop">heading</code> role and nesting levels is discussed in <a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</a>.
</p>
</section><section id="examples"><h2>Examples</h2>
<section class="example">
<h3>Simple headings</h3>
<p>This example demonstrates how to implement simple headings using role="heading" when retrofitting a legacy site where scripts depend on the existing element hierarchy or the level is unknown. For example, web content which is syndicated from various sources may be constructed without knowledge of what the final presentation will be.
</p>
<pre xml:space="preserve"><div role="heading">Global News items</div>
... a list of global news with editorial comment....
<div role="heading">Local News items</div>
... a list of local news, with editorial comment ...</pre>
</section>
<section class="example">
<h3>Additional heading levels</h3>
<p>This example demonstrates how to implement a level 7 heading using role="heading" and the <code class="att">aria-level</code> attribute. Since HTML only supports headings through level 6, there is no native element to provide these semantics.</p>
<pre xml:space="preserve">...
<h5>Fruit Trees</h5>
...
<h6>Apples</h6>
<p>Apples grow on trees in areas known as orchards...</p>
...
<div role="heading" aria-level="7">Jonagold/div>
<p>Jonagold is a cross between the Golden Delicious and Jonathan varieties...</p></pre>
</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<ol>
<li> Examine each element with the attribute role="heading".
</li>
<li> Determine whether the content of the element is appropriate as a heading.
</li>
<li> If the element has an <code class="att">aria-level</code> attribute, determine whether the value is the appropriate hierarchical level.
</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
<ul>
<li>#2 and #3 are true.</li>
</ul>
</section>
</section><section id="related"><h2>Related Techniques</h2><ul>
<li><a href="../html/H42">H42</a></li>
<li><a href="../html/H69">H69</a></li>
<li><a href="../general/G141">G141</a></li>
<li><a href="../failures/F2">F2</a></li>
</ul></section><section id="resources"><h2>Resources</h2>
<ul>
<li>
<a href="https://www.w3.org/TR/wai-aria/#heading">Accessible Rich Internet Applications (WAI-ARIA), Heading in the Roles Model</a>
</li>
<li>
<a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices</a>
</li>
</ul>
</section></body></html>