/
no-aria.html
158 lines (143 loc) · 7.46 KB
/
no-aria.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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE HTML>
<html lang="en-us" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>
Landmarks Demonstration (no ARIA)
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
// remove no-js and add 'js' to the HTML
document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
</script>
<style>
*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-family:arial}*{margin-bottom:0}body,html{background:#fafafa;color:#450c13;font-size:18px;line-height:1.3;margin:0;padding:0;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}.content-area{padding:1.5em;margin:auto;max-width:800px}a{color:#921c2b}a:focus,a:hover{color:#c12f48;outline:solid 2px}p{margin:0 0 1.25em}h1{margin-bottom:.5em}code{font-weight:700;background:#eee}p:last-child{margin:0}details,details div{margin-top:.5em}h1,h2,h3{margin-top:0}h1+p,h1+p:last-child,h2+p,h2+p:last-child,h3+p,h3+p:last-child{margin-top:1.25em}aside,header,main{border-bottom:1px solid}.nav-search{max-width:800px;padding:1.125em;margin:auto}.nav-search li{flex:1 0;text-align:center}.nav-search nav{flex:1 0;margin-bottom:1.25em}.nav-search ul{display:flex;padding:0;list-style:none;margin:0 0 0 -.25em}.nav-search a{display:block;padding:.45em .5em;border:1px solid;margin:0 .25em}@media screen and (min-width:600px){.nav-search{display:flex;align-items:center}.nav-search nav{margin:0}.nav-search>div{flex-grow:0;padding-left:1em}}button,input,select,textarea{border-radius:0;box-sizing:border-box;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:normal;margin:0;overflow:visible;text-transform:none}input::-ms-clear{display:none;height:0;width:0}button::-moz-focus-inner{border-style:none;padding:0}input[type=search]{-webkit-appearance:textfield;font-family:inherit;font-size:inherit}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}[role=search]{border:1px solid #565656;display:block;padding-right:2.5em;position:relative}[role=search] svg{display:block;fill:#fff}[role=search]>input[type=search]{border:0;border-right:1px solid #565656;padding:.5em;width:100%}[role=search]>[type=submit]{background:#a0001e;border:0;bottom:0;position:absolute;right:0;top:0;width:2.5em}[role=search]>[type=submit]:focus,[role=search]>[type=submit]:hover,[role=search]>input[type=search]:focus{box-shadow:inset 0 0 0 1px #a0001e;outline:#a0001e solid 1px;outline-offset:0}[role=search]>input[type=search]:focus{border-right-color:#450c13}[role=search]>[type=submit]:focus,[role=search]>[type=submit]:hover{background:#450c13}[role=search]>[type=submit]:focus svg,[role=search]>[type=submit]:hover svg{fill:#fff}
/**
* For browsers that support focus within,
* show off an outline around each of the different
* landmarks in the document.
*/
header:focus-within,
footer:focus-within,
main:focus-within,
aside:focus-within,
nav:focus-within {
box-shadow: inset 0 0 0 4px blue;
}
</style>
</head>
<body id="body">
<header>
<div class="content-area">
<p style="font-size: 1.75em; margin: 0;">
Pretend_Imma_logo
</p>
<details>
<summary>Header/Banner information</summary>
<div>
<p>
A <code>header</code> receives a <code>role="banner"</code> if it is the
closest <code>header</code> scoped to the <code>body</code> element.
</p>
<p>
A <code>banner</code> landmark typically contains global information to a
site/application and can house other landmarks like <code>navigation</code>.
</p>
<p>
There is no heading element in this <code>header</code>, and that's a-ok.
The <code>h1</code> is far more useful setting the primary topic of a document,
than it is housing brand identification.
</p>
</div>
</details>
</div>
<div class="nav-search">
<nav>
<ul>
<li>
<a href="https://www.w3.org/TR/wai-aria-1.1/#banner">Banner</a>
</li>
<li>
<a href="https://www.w3.org/TR/wai-aria-1.1/#search">Search</a>
</li>
<li>
<a href="https://www.w3.org/TR/wai-aria-1.1/#navigation">Navigation</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="site_main">
<div class="content-area">
<h1>Welcome to the main</h1>
<p>
The <code>main</code> element/landmark wraps the primary content of a document.
</p>
<p>
<a href="https://www.w3.org/TR/wai-aria-practices/examples/landmarks/main.html">Read more about <code>main</code></a>.
</p>
<article>
<h2 id="article_heading">Article Heading</h2>
<p>
<code>article</code>s are not landmarks. However, they may be surfaced by certain screen readers, especially if given an accessible name.
</p>
<p>
For instance, VoiceOver on macOS will surface articles that have been given an accessible
name in an "articles" router menu. You can give an <code>article</code> an accessible name by
setting an <code>aria-label</code> or <code>aria-labelledby="..."</code> attribute.
</p>
<p>
<a href="https://www.w3.org/TR/html/sections.html#the-article-element">Read more about <code>articles</code></a>
</p>
</article>
<form style="margin-top: 2em">
<h2 style="font-size: 1.125em; margin-bottom: 1em;" id="dummy">A pretend form</h2>
<label for="name">
Your Name:
</label>
<div>
<input type="text" id="name" readonly>
</div>
<p style="margin-top: 1.2em;">
An example form to test if it's surfaced as a landmark.
</p>
<button type="submit" disabled>
This button don't work
</button>
</form>
</div>
</main>
<aside>
<div class="content-area">
<h2 style="font-size: 1.25em">Just an aside</h2>
<p>
An <code>aside</code> is treated as a <code>complementary</code> landmark.
The content should be able to stand on its own, but would be considered related
and useful to the "main" content of the document.
</p>
<p>
<a href="https://www.w3.org/TR/wai-aria-1.1/#complementary">Read more about <code>complementary</code></a>.
</p>
</div>
</aside>
<footer>
<div class="content-area">
<h2 style="font-size: 1.125em">This is the footer</h2>
<p>
This footer should be tested to see if VoiceOver is finally surfacing it as a <code>contentinfo</code> landmark.
</p>
<p>
If not, it can be exposed by using <code>role="contentinfo"</code>.
</p>
<p>
<a href="https://www.w3.org/TR/wai-aria-1.1/#contentinfo">Read more about <code>contentinfo</code></a>.
</p>
<hr>
<p>
Check out the <a href="https://github.com/scottaohara/landmarks_demo">source for this document on GitHub</a>.
</p>
</div>
</footer>
</body>
</html>