Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Landmark Regions: Updated example pages references to latest docs #1882

Merged
merged 24 commits into from
Oct 4, 2021
Merged

Landmark Regions: Updated example pages references to latest docs #1882

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
528356f
updated related document references to latest
jongund Apr 29, 2021
ecd068f
updated skipto and resource documentation
jongund Apr 29, 2021
7dc5dfd
fixed id error
jongund Apr 30, 2021
7927eb8
fixed id error
jongund Apr 30, 2021
1e61ed3
fixed lintng error
jongund Apr 30, 2021
3af10a0
adjust skip-to font-size
jongund May 2, 2021
ff7af04
updated landmark example pages to simplify skipto configuration
jongund May 3, 2021
81e5fa4
added screen shot for list of landmarks for Orca
jongund May 11, 2021
c86b482
added references to SkipTo browser extensions
jongund Jul 15, 2021
37ca642
updated related document references to latest
jongund Apr 29, 2021
245c8d4
updated skipto and resource documentation
jongund Apr 29, 2021
0d91cb4
fixed id error
jongund Apr 30, 2021
438dbf0
fixed id error
jongund Apr 30, 2021
b99284a
fixed lintng error
jongund Apr 30, 2021
8adacb8
adjust skip-to font-size
jongund May 2, 2021
3b81016
updated landmark example pages to simplify skipto configuration
jongund May 3, 2021
10bfbcf
added screen shot for list of landmarks for Orca
jongund May 11, 2021
785e469
added references to SkipTo browser extensions
jongund Jul 15, 2021
b44bdb6
Merge branch 'update-landmarks' of github.com:w3c/aria-practices into…
jongund Sep 6, 2021
d47ac3a
updated skipto
jongund Sep 6, 2021
80dd166
updated references from ARIA 1.1 to ARIA 1.2
jongund Sep 6, 2021
67f7d78
updated link to APG
jongund Sep 7, 2021
3388fb9
deleted broken link in resources page
jongund Sep 7, 2021
fec4e17
Merge remote-tracking branch 'origin/main' into update-landmarks
mcking65 Oct 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 13 additions & 10 deletions examples/landmarks/HTML5.html
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading