Skip to content

Commit a5c056f

Browse files
jongundmcking65
jongund
and
mcking65
authored
Landmark Region Examples: Update related documents references to latest versions (pull #1882)
* Update URIs of links to related documents. * Include latest jumpTo.js * Update resources page. * Add screen shot of Orca with a list of landmarks. Co-authored-by: Matt King <[email protected]>
1 parent d0299b2 commit a5c056f

16 files changed

+173
-146
lines changed

‎examples/landmarks/HTML5.html

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,13 @@
88
<link href="css/bootstrap-accessibility.css" rel="stylesheet" media="screen"/>
99
<link href="css/visua11y.css" rel="stylesheet" media="screen"/>
1010
<link href="css/common.css" rel="stylesheet" media="screen"/>
11+
1112
</head>
1213
<body>
1314
<div class="container">
1415
<header class="row">
15-
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
16-
<img src="images/w3c.png" alt="W3C Logo" />
16+
<div id="skip-to-attach" class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
17+
<img src="images/w3c.png" alt="W3C Logo" style="margin-top: 2em" />
1718
</div>
1819
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-10">
1920
<h1>ARIA Landmarks Example</h1>
@@ -120,12 +121,12 @@ <h2 id="id4">Landmarks</h2>
120121
<aside aria-labelledby="id3">
121122
<h2 id="id3">Related Documents</h2>
122123
<ul>
123-
<li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices 1.1</a></li>
124-
<li><a href="http://www.w3.org/TR/2014/REC-wai-aria-20140320/">WAI-ARIA 1.0 Specification</a></li>
125-
<li><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA 1.1 Specification</a></li>
126-
<li><a href="https://www.w3.org/TR/accname-aam-1.1/">Accessible Name and Description: Computation and API Mappings 1.1</a></li>
127-
<li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
128-
<li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
124+
<li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
125+
<li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
126+
127+
<li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
128+
<li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
129+
<li><a href="https://w3c.github.io/html-aam/">HTML Accessibility API Mappings (latest editors draft)</a></li>
129130
<li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
130131
<li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
131132
<li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
@@ -158,11 +159,13 @@ <h2 id="id3">Related Documents</h2>
158159
"settings": {
159160
"skipTo": {
160161
"headings": "h1, h2",
161-
"attachElement": "header"
162+
"attachElement": "#skip-to-attach",
163+
164+
"colorTheme": "aria"
162165
}
163166
}
164167
};
165168
</script>
166-
<script type="text/javascript" src="js/SkipTo.min.js"></script>
169+
<script type="text/javascript" src="js/skipto.min.js"></script>
167170
</body>
168171
</html>

‎examples/landmarks/at.html

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
<body>
1313
<div class="container">
1414
<header class="row">
15-
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
16-
<img src="images/w3c.png" alt="W3C Logo" />
15+
<div id="skip-to-attach" class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
16+
<img src="images/w3c.png" alt="W3C Logo" style="margin-top: 2em" />
1717
</div>
1818
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-10">
1919
<h1>ARIA Landmarks Example</h1>
@@ -184,6 +184,8 @@ <h2 id="orca">ORCA Screen Reader for Linux/GNOME</h2>
184184
</tbody>
185185

186186
</table>
187+
<p>Screen shot of list of landmarks in Orca</p>
188+
<p><img src="images/landmarks-orca.png" alt="Screen shot of list of landmarks in orca"></p>
187189
</section>
188190

189191

@@ -204,12 +206,12 @@ <h2 id="id4">Landmarks</h2>
204206
<aside aria-labelledby="id3">
205207
<h2 id="id3">Related Documents</h2>
206208
<ul>
207-
<li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices 1.1</a></li>
208-
<li><a href="http://www.w3.org/TR/2014/REC-wai-aria-20140320/">WAI-ARIA 1.0 Specification</a></li>
209-
<li><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA 1.1 Specification</a></li>
210-
<li><a href="https://www.w3.org/TR/accname-aam-1.1/">Accessible Name and Description: Computation and API Mappings 1.1</a></li>
211-
<li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
212-
<li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
209+
<li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
210+
<li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
211+
212+
<li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
213+
<li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
214+
<li><a href="https://w3c.github.io/html-aam/">HTML Accessibility API Mappings (latest editors draft)</a></li>
213215
<li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
214216
<li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
215217
<li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
@@ -243,11 +245,13 @@ <h2 id="id3">Related Documents</h2>
243245
"settings": {
244246
"skipTo": {
245247
"headings": "h1, h2",
246-
"attachElement": "header"
248+
"attachElement": "#skip-to-attach",
249+
250+
"colorTheme": "aria"
247251
}
248252
}
249253
};
250254
</script>
251-
<script type="text/javascript" src="js/SkipTo.min.js"></script>
255+
<script type="text/javascript" src="js/skipto.min.js"></script>
252256
</body>
253257
</html>

‎examples/landmarks/banner.html

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
<body>
1313
<div class="container">
1414
<header class="row">
15-
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
16-
<img src="images/w3c.png" alt="W3C Logo" />
15+
<div id="skip-to-attach" class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
16+
<img src="images/w3c.png" alt="W3C Logo" style="margin-top: 2em" />
1717
</div>
1818
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-10">
1919
<h1>ARIA Landmarks Example</h1>
@@ -46,7 +46,7 @@ <h1>ARIA Landmarks Example</h1>
4646
<h1 id="id1"> Banner Landmark</h1>
4747
<p>A <code>banner</code> landmark identifies site-oriented content at the beginning of each page within a website. Site-oriented content typically includes things such as the logo or identity of the site sponsor, and site-specific search tool. A banner usually appears at the top of the page and typically spans the full width.
4848
</p>
49-
<p>ARIA 1.1 Specification: <a href="https://www.w3.org/TR/wai-aria-1.1/#banner"><code>banner</code> landmark</a>.</p>
49+
<p>ARIA 1.2 Specification: <a href="https://www.w3.org/TR/wai-aria-1.2/#banner"><code>banner</code> landmark</a>.</p>
5050
<h2>Design Patterns</h2>
5151
<ul>
5252
<li>Each page may have one <code>banner</code> landmark.</li>
@@ -115,12 +115,12 @@ <h2 id="id4">Landmarks</h2>
115115
<aside aria-labelledby="id3">
116116
<h2 id="id3">Related Documents</h2>
117117
<ul>
118-
<li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices 1.1</a></li>
119-
<li><a href="http://www.w3.org/TR/2014/REC-wai-aria-20140320/">WAI-ARIA 1.0 Specification</a></li>
120-
<li><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA 1.1 Specification</a></li>
121-
<li><a href="https://www.w3.org/TR/accname-aam-1.1/">Accessible Name and Description: Computation and API Mappings 1.1</a></li>
122-
<li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
123-
<li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
118+
<li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
119+
<li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
120+
121+
<li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
122+
<li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
123+
<li><a href="https://w3c.github.io/html-aam/">HTML Accessibility API Mappings (latest editors draft)</a></li>
124124
<li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
125125
<li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
126126
<li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
@@ -154,11 +154,13 @@ <h2 id="id3">Related Documents</h2>
154154
"settings": {
155155
"skipTo": {
156156
"headings": "h1, h2",
157-
"attachElement": "header"
157+
"attachElement": "#skip-to-attach",
158+
159+
"colorTheme": "aria"
158160
}
159161
}
160162
};
161163
</script>
162-
<script type="text/javascript" src="js/SkipTo.min.js"></script>
164+
<script type="text/javascript" src="js/skipto.min.js"></script>
163165
</body>
164166
</html>

‎examples/landmarks/complementary.html

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
<body>
1313
<div class="container">
1414
<header class="row">
15-
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
16-
<img src="images/w3c.png" alt="W3C Logo" />
15+
<div id="skip-to-attach" class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
16+
<img src="images/w3c.png" alt="W3C Logo" style="margin-top: 2em" />
1717
</div>
1818
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-10">
1919
<h1>ARIA Landmarks Example</h1>
@@ -46,7 +46,7 @@ <h1>ARIA Landmarks Example</h1>
4646
<h1 id="id1"> Complementary Landmark</h1>
4747
<p>A <code>complementary</code> landmark is a supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.
4848
</p>
49-
<p>ARIA 1.1 Specification: <a href="https://www.w3.org/TR/wai-aria-1.1/#complementary"><code>complementary</code> landmark</a></p>
49+
<p>ARIA 1.2 Specification: <a href="https://www.w3.org/TR/wai-aria-1.2/#complementary"><code>complementary</code> landmark</a></p>
5050
<h2>Design Patterns</h2>
5151
<ul>
5252
<li><code>complementary</code> landmarks should be top level landmarks (e.g. not contained within any other landmarks).</li>
@@ -177,12 +177,12 @@ <h2 id="id4">Landmarks</h2>
177177
<aside aria-labelledby="id3">
178178
<h2 id="id3">Related Documents</h2>
179179
<ul>
180-
<li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices 1.1</a></li>
181-
<li><a href="http://www.w3.org/TR/2014/REC-wai-aria-20140320/">WAI-ARIA 1.0 Specification</a></li>
182-
<li><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA 1.1 Specification</a></li>
183-
<li><a href="https://www.w3.org/TR/accname-aam-1.1/">Accessible Name and Description: Computation and API Mappings 1.1</a></li>
184-
<li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
185-
<li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
180+
<li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
181+
<li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
182+
183+
<li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
184+
<li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
185+
<li><a href="https://w3c.github.io/html-aam/">HTML Accessibility API Mappings (latest editors draft)</a></li>
186186
<li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
187187
<li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
188188
<li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
@@ -216,11 +216,13 @@ <h2 id="id3">Related Documents</h2>
216216
"settings": {
217217
"skipTo": {
218218
"headings": "h1, h2",
219-
"attachElement": "header"
219+
"attachElement": "#skip-to-attach",
220+
221+
"colorTheme": "aria"
220222
}
221223
}
222224
};
223225
</script>
224-
<script type="text/javascript" src="js/SkipTo.min.js"></script>
226+
<script type="text/javascript" src="js/skipto.min.js"></script>
225227
</body>
226228
</html>

‎examples/landmarks/contentinfo.html

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
<body>
1313
<div class="container">
1414
<header class="row">
15-
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
16-
<img src="images/w3c.png" alt="W3C Logo" />
15+
<div id="skip-to-attach" class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
16+
<img src="images/w3c.png" alt="W3C Logo" style="margin-top: 2em" />
1717
</div>
1818
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-10">
1919
<h1>ARIA Landmarks Example</h1>
@@ -45,7 +45,7 @@ <h1>ARIA Landmarks Example</h1>
4545
<main>
4646
<h1 id="id1"> Contentinfo Landmark</h1>
4747
<p> A <code>contentinfo</code> landmark is a way to identify common information at the bottom of each page within a website, typically called the "footer" of the page, including information such as copyrights and links to privacy and accessibility statements. </p>
48-
<p> ARIA 1.1 Specification: <a href="https://www.w3.org/TR/wai-aria-1.1/#contentinfo"><code>contentinfo</code> landmark</a>.</p>
48+
<p> ARIA 1.2 Specification: <a href="https://www.w3.org/TR/wai-aria-1.2/#contentinfo"><code>contentinfo</code> landmark</a>.</p>
4949
<h2>Design Patterns</h2>
5050
<ul>
5151
<li>Each page may have one <code>contentinfo</code> landmark.</li>
@@ -120,12 +120,12 @@ <h2 id="id4">Landmarks</h2>
120120
<aside aria-labelledby="id3">
121121
<h2 id="id3">Related Documents</h2>
122122
<ul>
123-
<li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices 1.1</a></li>
124-
<li><a href="http://www.w3.org/TR/2014/REC-wai-aria-20140320/">WAI-ARIA 1.0 Specification</a></li>
125-
<li><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA 1.1 Specification</a></li>
126-
<li><a href="https://www.w3.org/TR/accname-aam-1.1/">Accessible Name and Description: Computation and API Mappings 1.1</a></li>
127-
<li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
128-
<li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
123+
<li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
124+
<li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
125+
126+
<li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
127+
<li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
128+
<li><a href="https://w3c.github.io/html-aam/">HTML Accessibility API Mappings (latest editors draft)</a></li>
129129
<li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
130130
<li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
131131
<li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
@@ -159,11 +159,13 @@ <h2 id="id3">Related Documents</h2>
159159
"settings": {
160160
"skipTo": {
161161
"headings": "h1, h2",
162-
"attachElement": "header"
162+
"attachElement": "#skip-to-attach",
163+
164+
"colorTheme": "aria"
163165
}
164166
}
165167
};
166168
</script>
167-
<script type="text/javascript" src="js/SkipTo.min.js"></script>
169+
<script type="text/javascript" src="js/skipto.min.js"></script>
168170
</body>
169171
</html>

‎examples/landmarks/form.html

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@
4444
<body>
4545
<div class="container">
4646
<header class="row">
47-
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
48-
<img src="images/w3c.png" alt="W3C Logo" />
47+
<div id="skip-to-attach" class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
48+
<img src="images/w3c.png" alt="W3C Logo" style="margin-top: 2em" />
4949
</div>
5050
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-10">
5151
<h1>ARIA Landmarks Example</h1>
@@ -77,7 +77,7 @@ <h1>ARIA Landmarks Example</h1>
7777
<main>
7878
<h1 id="id1"> Form Landmark</h1>
7979
<p> A <code>form</code> landmark identifies a region that contains a collection of items and objects that, as a whole, combine to create a form when no other named landmark is appropriate (e.g. main or search). </p>
80-
<p> ARIA 1.1 Specification: <a href="https://www.w3.org/TR/wai-aria-1.1/#form"><code>form</code> landmark</a></p>
80+
<p> ARIA 1.2 Specification: <a href="https://www.w3.org/TR/wai-aria-1.2/#form"><code>form</code> landmark</a></p>
8181
<h2>Design Patterns</h2>
8282
<ul>
8383
<li>Use the <code>search</code> landmark instead of the <code>form</code> landmark when the form is used for search functionality.</li>
@@ -274,12 +274,12 @@ <h2 id="id4">Landmarks</h2>
274274
<aside aria-labelledby="id3">
275275
<h2 id="id3">Related Documents</h2>
276276
<ul>
277-
<li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices 1.1</a></li>
278-
<li><a href="http://www.w3.org/TR/2014/REC-wai-aria-20140320/">WAI-ARIA 1.0 Specification</a></li>
279-
<li><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA 1.1 Specification</a></li>
280-
<li><a href="https://www.w3.org/TR/accname-aam-1.1/">Accessible Name and Description: Computation and API Mappings 1.1</a></li>
281-
<li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
282-
<li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
277+
<li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
278+
<li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
279+
280+
<li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
281+
<li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
282+
<li><a href="https://w3c.github.io/html-aam/">HTML Accessibility API Mappings (latest editors draft)</a></li>
283283
<li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
284284
<li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
285285
<li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
@@ -312,11 +312,13 @@ <h2 id="id3">Related Documents</h2>
312312
"settings": {
313313
"skipTo": {
314314
"headings": "h1, h2",
315-
"attachElement": "header"
315+
"attachElement": "#skip-to-attach",
316+
317+
"colorTheme": "aria"
316318
}
317319
}
318320
};
319321
</script>
320-
<script type="text/javascript" src="js/SkipTo.min.js"></script>
322+
<script type="text/javascript" src="js/skipto.min.js"></script>
321323
</body>
322324
</html>

‎examples/landmarks/images/landmarks-orca.png

214 KB
Loading

0 commit comments

Comments
 (0)