forked from cyns/testfiles
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprestab.html
59 lines (44 loc) · 2.77 KB
/
prestab.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
<html>
<head>
<title>presentation and focus</title>
</head>
<body>
<h1>Examples from the spec <a href="http://www.w3.org/TR/wai-aria/complete#presentation">Role Presenatation</a></h1>
<p>For example, according to an accessibility API, the following markup elements would appear to have identical role semantics (no role) and identical content.</p>
<p>1. [role="presentation"] negates the implicit 'heading' role semantics but does not affect the contents. <p>
<h1 role="presentation"> Sample Content </h1>
<p> 2. There is no implicit role for span, so only the contents are exposed. </p>
<span> Sample Content </span>
<p> 3. This role declaration is redundant. </p>
<span role="presentation"> Sample Content </span>
<p> 4. In all cases, the element contents are exposed to accessibility APIs without any implied role semantics. </p>
<!-- <> --> Sample Content <!-- </> -->
<p>For example, according to an accessibility API, the following markup elements would appear to have identical role semantics (no roles) and identical content.</p>
<p> 1. [role="presentation"] negates the implicit 'list' and 'listitem' role semantics but does not affect the contents. </p>
<ul role="presentation">
<li> Sample Content </li>
<li> More Sample Content </li>
</ul>
<p> 2. There is no implicit role for span, so only the contents are exposed. </p>
<span>
<span> Sample Content </span>
<span> More Sample Content </span>
</span>
<p>For example, aria-hidden is a global attribute and would always be applied; aria-level is not a global attribute and would therefore only apply if the element was not in a presentational state.</p>
<p> 1. [role="presentation"] negates the implicit 'heading' role semantics but does not affect the global hidden state. </p>
<h1 role="presentation" aria-hidden="true"> Sample Content </h1>
<p> 1. [role="presentation"] negates the both the implicit 'heading' and the non-global level. </p>
<h1 role="presentation" aria-level="2"> Sample Content </h1>
In the following code sample, the containing div element has a WAI-ARIA role of img and is appropriately labeled by the caption paragraph. In this example the img element can be marked as presentation because the role and the text alternatives are provided by the containing element.
<div role="img" aria-labelledby="caption">
<img src="example.png" role="presentation" alt="">
<p id="caption">A visible text caption labeling the image.</p>
</div>
In the following code sample, because the anchor (HTML a element) is acting as the treeitem, the list item (HTML li element) is assigned an explicit WAI-ARIA role of presentation to override the user agent's implicit native semantics for list items.
<ul role="tree">
<li role="presentation">
<a role="treeitem" aria-expanded="true">An expanded tree node</a>
</li>
</ul>
</body>
</html>