Skip to content

Commit

Permalink
Landmark Region Examples: Update related documents references to late…
Browse files Browse the repository at this point in the history 
…st 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 <a11yThinker@gmail.com>
  • Loading branch information
@jongund @mcking65
jongund and mcking65 committed Oct 4, 2021
1 parent d0299b2 commit a5c056f
Show file tree
Hide file tree
Showing 16 changed files with 173 additions and 146 deletions.
23 changes: 13 additions & 10 deletions examples/landmarks/HTML5.html
View file
Expand Up @@ -8,12 +8,13 @@
<link href="css/bootstrap-accessibility.css" rel="stylesheet" media="screen"/>
<link href="css/visua11y.css" rel="stylesheet" media="screen"/>
<link href="css/common.css" rel="stylesheet" media="screen"/>

</head>
<body>
<div class="container">
<header class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
<img src="images/w3c.png" alt="W3C Logo" />
<div id="skip-to-attach" class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
<img src="images/w3c.png" alt="W3C Logo" style="margin-top: 2em" />
</div>
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-10">
<h1>ARIA Landmarks Example</h1>
Expand Down Expand Up @@ -120,12 +121,12 @@ <h2 id="id4">Landmarks</h2>
<aside aria-labelledby="id3">
<h2 id="id3">Related Documents</h2>
<ul>
<li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices 1.1</a></li>
<li><a href="http://www.w3.org/TR/2014/REC-wai-aria-20140320/">WAI-ARIA 1.0 Specification</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA 1.1 Specification</a></li>
<li><a href="https://www.w3.org/TR/accname-aam-1.1/">Accessible Name and Description: Computation and API Mappings 1.1</a></li>
<li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
<li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
<li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>

<li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
<li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
<li><a href="https://w3c.github.io/html-aam/">HTML Accessibility API Mappings (latest editors draft)</a></li>
<li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
<li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
<li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
Expand Down Expand Up @@ -158,11 +159,13 @@ <h2 id="id3">Related Documents</h2>
"settings": {
"skipTo": {
"headings": "h1, h2",
"attachElement": "header"
"attachElement": "#skip-to-attach",

"colorTheme": "aria"
}
}
};
</script>
<script type="text/javascript" src="js/SkipTo.min.js"></script>
<script type="text/javascript" src="js/skipto.min.js"></script>
</body>
</html>
24 changes: 14 additions & 10 deletions examples/landmarks/at.html
View file
Expand Up @@ -12,8 +12,8 @@
<body>
<div class="container">
<header class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
<img src="images/w3c.png" alt="W3C Logo" />
<div id="skip-to-attach" class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
<img src="images/w3c.png" alt="W3C Logo" style="margin-top: 2em" />
</div>
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-10">
<h1>ARIA Landmarks Example</h1>
Expand Down Expand Up @@ -184,6 +184,8 @@ <h2 id="orca">ORCA Screen Reader for Linux/GNOME</h2>
</tbody>

</table>
<p>Screen shot of list of landmarks in Orca</p>
<p><img src="images/landmarks-orca.png" alt="Screen shot of list of landmarks in orca"></p>
</section>


Expand All @@ -204,12 +206,12 @@ <h2 id="id4">Landmarks</h2>
<aside aria-labelledby="id3">
<h2 id="id3">Related Documents</h2>
<ul>
<li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices 1.1</a></li>
<li><a href="http://www.w3.org/TR/2014/REC-wai-aria-20140320/">WAI-ARIA 1.0 Specification</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA 1.1 Specification</a></li>
<li><a href="https://www.w3.org/TR/accname-aam-1.1/">Accessible Name and Description: Computation and API Mappings 1.1</a></li>
<li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
<li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
<li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>

<li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
<li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
<li><a href="https://w3c.github.io/html-aam/">HTML Accessibility API Mappings (latest editors draft)</a></li>
<li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
<li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
<li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
Expand Down Expand Up @@ -243,11 +245,13 @@ <h2 id="id3">Related Documents</h2>
"settings": {
"skipTo": {
"headings": "h1, h2",
"attachElement": "header"
"attachElement": "#skip-to-attach",

"colorTheme": "aria"
}
}
};
</script>
<script type="text/javascript" src="js/SkipTo.min.js"></script>
<script type="text/javascript" src="js/skipto.min.js"></script>
</body>
</html>
24 changes: 13 additions & 11 deletions examples/landmarks/banner.html
View file
Expand Up @@ -12,8 +12,8 @@
<body>
<div class="container">
<header class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
<img src="images/w3c.png" alt="W3C Logo" />
<div id="skip-to-attach" class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
<img src="images/w3c.png" alt="W3C Logo" style="margin-top: 2em" />
</div>
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-10">
<h1>ARIA Landmarks Example</h1>
Expand Down Expand Up @@ -46,7 +46,7 @@ <h1>ARIA Landmarks Example</h1>
<h1 id="id1"> Banner Landmark</h1>
<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.
</p>
<p>ARIA 1.1 Specification: <a href="https://www.w3.org/TR/wai-aria-1.1/#banner"><code>banner</code> landmark</a>.</p>
<p>ARIA 1.2 Specification: <a href="https://www.w3.org/TR/wai-aria-1.2/#banner"><code>banner</code> landmark</a>.</p>
<h2>Design Patterns</h2>
<ul>
<li>Each page may have one <code>banner</code> landmark.</li>
Expand Down Expand Up @@ -115,12 +115,12 @@ <h2 id="id4">Landmarks</h2>
<aside aria-labelledby="id3">
<h2 id="id3">Related Documents</h2>
<ul>
<li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices 1.1</a></li>
<li><a href="http://www.w3.org/TR/2014/REC-wai-aria-20140320/">WAI-ARIA 1.0 Specification</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA 1.1 Specification</a></li>
<li><a href="https://www.w3.org/TR/accname-aam-1.1/">Accessible Name and Description: Computation and API Mappings 1.1</a></li>
<li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
<li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
<li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>

<li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
<li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
<li><a href="https://w3c.github.io/html-aam/">HTML Accessibility API Mappings (latest editors draft)</a></li>
<li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
<li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
<li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
Expand Down Expand Up @@ -154,11 +154,13 @@ <h2 id="id3">Related Documents</h2>
"settings": {
"skipTo": {
"headings": "h1, h2",
"attachElement": "header"
"attachElement": "#skip-to-attach",

"colorTheme": "aria"
}
}
};
</script>
<script type="text/javascript" src="js/SkipTo.min.js"></script>
<script type="text/javascript" src="js/skipto.min.js"></script>
</body>
</html>
24 changes: 13 additions & 11 deletions examples/landmarks/complementary.html
View file
Expand Up @@ -12,8 +12,8 @@
<body>
<div class="container">
<header class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
<img src="images/w3c.png" alt="W3C Logo" />
<div id="skip-to-attach" class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
<img src="images/w3c.png" alt="W3C Logo" style="margin-top: 2em" />
</div>
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-10">
<h1>ARIA Landmarks Example</h1>
Expand Down Expand Up @@ -46,7 +46,7 @@ <h1>ARIA Landmarks Example</h1>
<h1 id="id1"> Complementary Landmark</h1>
<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.
</p>
<p>ARIA 1.1 Specification: <a href="https://www.w3.org/TR/wai-aria-1.1/#complementary"><code>complementary</code> landmark</a></p>
<p>ARIA 1.2 Specification: <a href="https://www.w3.org/TR/wai-aria-1.2/#complementary"><code>complementary</code> landmark</a></p>
<h2>Design Patterns</h2>
<ul>
<li><code>complementary</code> landmarks should be top level landmarks (e.g. not contained within any other landmarks).</li>
Expand Down Expand Up @@ -177,12 +177,12 @@ <h2 id="id4">Landmarks</h2>
<aside aria-labelledby="id3">
<h2 id="id3">Related Documents</h2>
<ul>
<li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices 1.1</a></li>
<li><a href="http://www.w3.org/TR/2014/REC-wai-aria-20140320/">WAI-ARIA 1.0 Specification</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA 1.1 Specification</a></li>
<li><a href="https://www.w3.org/TR/accname-aam-1.1/">Accessible Name and Description: Computation and API Mappings 1.1</a></li>
<li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
<li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
<li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>

<li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
<li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
<li><a href="https://w3c.github.io/html-aam/">HTML Accessibility API Mappings (latest editors draft)</a></li>
<li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
<li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
<li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
Expand Down Expand Up @@ -216,11 +216,13 @@ <h2 id="id3">Related Documents</h2>
"settings": {
"skipTo": {
"headings": "h1, h2",
"attachElement": "header"
"attachElement": "#skip-to-attach",

"colorTheme": "aria"
}
}
};
</script>
<script type="text/javascript" src="js/SkipTo.min.js"></script>
<script type="text/javascript" src="js/skipto.min.js"></script>
</body>
</html>
24 changes: 13 additions & 11 deletions examples/landmarks/contentinfo.html
View file
Expand Up @@ -12,8 +12,8 @@
<body>
<div class="container">
<header class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
<img src="images/w3c.png" alt="W3C Logo" />
<div id="skip-to-attach" class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
<img src="images/w3c.png" alt="W3C Logo" style="margin-top: 2em" />
</div>
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-10">
<h1>ARIA Landmarks Example</h1>
Expand Down Expand Up @@ -45,7 +45,7 @@ <h1>ARIA Landmarks Example</h1>
<main>
<h1 id="id1"> Contentinfo Landmark</h1>
<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>
<p> ARIA 1.1 Specification: <a href="https://www.w3.org/TR/wai-aria-1.1/#contentinfo"><code>contentinfo</code> landmark</a>.</p>
<p> ARIA 1.2 Specification: <a href="https://www.w3.org/TR/wai-aria-1.2/#contentinfo"><code>contentinfo</code> landmark</a>.</p>
<h2>Design Patterns</h2>
<ul>
<li>Each page may have one <code>contentinfo</code> landmark.</li>
Expand Down Expand Up @@ -120,12 +120,12 @@ <h2 id="id4">Landmarks</h2>
<aside aria-labelledby="id3">
<h2 id="id3">Related Documents</h2>
<ul>
<li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices 1.1</a></li>
<li><a href="http://www.w3.org/TR/2014/REC-wai-aria-20140320/">WAI-ARIA 1.0 Specification</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA 1.1 Specification</a></li>
<li><a href="https://www.w3.org/TR/accname-aam-1.1/">Accessible Name and Description: Computation and API Mappings 1.1</a></li>
<li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
<li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
<li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>

<li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
<li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
<li><a href="https://w3c.github.io/html-aam/">HTML Accessibility API Mappings (latest editors draft)</a></li>
<li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
<li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
<li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
Expand Down Expand Up @@ -159,11 +159,13 @@ <h2 id="id3">Related Documents</h2>
"settings": {
"skipTo": {
"headings": "h1, h2",
"attachElement": "header"
"attachElement": "#skip-to-attach",

"colorTheme": "aria"
}
}
};
</script>
<script type="text/javascript" src="js/SkipTo.min.js"></script>
<script type="text/javascript" src="js/skipto.min.js"></script>
</body>
</html>
24 changes: 13 additions & 11 deletions examples/landmarks/form.html
View file
Expand Up @@ -44,8 +44,8 @@
<body>
<div class="container">
<header class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
<img src="images/w3c.png" alt="W3C Logo" />
<div id="skip-to-attach" class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
<img src="images/w3c.png" alt="W3C Logo" style="margin-top: 2em" />
</div>
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-10">
<h1>ARIA Landmarks Example</h1>
Expand Down Expand Up @@ -77,7 +77,7 @@ <h1>ARIA Landmarks Example</h1>
<main>
<h1 id="id1"> Form Landmark</h1>
<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>
<p> ARIA 1.1 Specification: <a href="https://www.w3.org/TR/wai-aria-1.1/#form"><code>form</code> landmark</a></p>
<p> ARIA 1.2 Specification: <a href="https://www.w3.org/TR/wai-aria-1.2/#form"><code>form</code> landmark</a></p>
<h2>Design Patterns</h2>
<ul>
<li>Use the <code>search</code> landmark instead of the <code>form</code> landmark when the form is used for search functionality.</li>
Expand Down Expand Up @@ -274,12 +274,12 @@ <h2 id="id4">Landmarks</h2>
<aside aria-labelledby="id3">
<h2 id="id3">Related Documents</h2>
<ul>
<li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices 1.1</a></li>
<li><a href="http://www.w3.org/TR/2014/REC-wai-aria-20140320/">WAI-ARIA 1.0 Specification</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA 1.1 Specification</a></li>
<li><a href="https://www.w3.org/TR/accname-aam-1.1/">Accessible Name and Description: Computation and API Mappings 1.1</a></li>
<li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
<li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
<li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>

<li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
<li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
<li><a href="https://w3c.github.io/html-aam/">HTML Accessibility API Mappings (latest editors draft)</a></li>
<li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
<li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
<li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
Expand Down Expand Up @@ -312,11 +312,13 @@ <h2 id="id3">Related Documents</h2>
"settings": {
"skipTo": {
"headings": "h1, h2",
"attachElement": "header"
"attachElement": "#skip-to-attach",

"colorTheme": "aria"
}
}
};
</script>
<script type="text/javascript" src="js/SkipTo.min.js"></script>
<script type="text/javascript" src="js/skipto.min.js"></script>
</body>
</html>
Binary file added examples/landmarks/images/landmarks-orca.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit a5c056f

Please sign in to comment.