From 26488b72221ae93f19b4a65af1ccda87af246f88 Mon Sep 17 00:00:00 2001
From: Matt King <a11yThinker@gmail.com>
Date: Sun, 9 Apr 2023 23:10:05 -0700
Subject: [PATCH 1/3] =?UTF-8?q?Draft=C2=A0landmark=C2=A0pattern?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../patterns/landmarks/landmarks-pattern.html | 72 +++++++++++++++++++
1 file changed, 72 insertions(+)
create mode 100644 content/patterns/landmarks/landmarks-pattern.html
diff --git a/content/patterns/landmarks/landmarks-pattern.html b/content/patterns/landmarks/landmarks-pattern.html
new file mode 100644
index 0000000000..1f50a0c6c8
--- /dev/null
+++ b/content/patterns/landmarks/landmarks-pattern.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta content="width=device-width, initial-scale=1.0" name="viewport">
+ <title>Landmarks Pattern</title>
+
+ <!-- Core JS and CSS shared by all patterns -->
+ <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+ <link rel="stylesheet" href="../../shared/css/core.css">
+ <script src="../../shared/js/highlight.pack.js"></script>
+ <script src="../../shared/js/app.js"></script>
+ <script src="../../shared/js/skipto.js"></script>
+ </head>
+ <body>
+ <main>
+ <h1>Landmarks Pattern</h1>
+
+ <section id="about">
+ <h2>About This Pattern</h2>
+ <p>
+ <a class="role-reference" href="#landmark">Landmarks</a> are a class of roles that enable assistive technology users to perceive how the presentation of a page segments content into sections.
+ There are many aspects of visual presentation, e.g., spacing, color, and borders, that designers use to separate portions of content into sections.
+ Each section typically plays a specific role, or purpose, in the information architecture of the page.
+ ARIA includes eight landmark region roles, each of which is intended to convey the purpose of the content it contains.
+ For example, the <a class=""role-reference" href=""#main">main</a> landmark designates the section that contains the main content of the page.
+ </p>
+ <p>
+ Thus, landmark regions enable assistive technologies to both identify the purpose of a section of the page and locate its beginning and end.
+ In addition, landmarks can be used by browsers or assistive technologies to facilitate efficient keyboard navigation among the sections of a page.
+ </p>
+ <p>
+ Several landmark roles are implied by HTML elements.
+ For example, the HTML <code>main</code> element automatically creates a main landmark region, and the HTML <code>nav</code> element creates a navigation landmark region.
+ </p>
+ <p>
+ Since landmarks are intended to help assistive technology users perceive the high-level structure of a page, their value diminishes as their number grows.
+ For optimum value, a general rule of thumb is that a page contains seven or fewer landmark regions.
+ Another best practice is to ensure that all content is contained within an appropriate landmark region.
+ The <a href="../../practices//landmark-regions//landmark-regions-practice.html">Landmark Regions Practice</a> describes ways of using HTML sectioning elements and ARIA landmark roles that will most benefit users.
+ </p>
+ </section>
+
+ <section id="examples">
+ <h2>Examples</h2>
+ <ul>
+ <li><a href="examples/main.html">Main Landmark Example</a></li>
+ <li><a href="examples/navigation.html">Navigation Landmark Example</a></li>
+ <li><a href="examples/search.html">Search Landmark Example</a></li>
+ <li><a href="examples/banner.html">Banner Landmark Example</a></li>
+ <li><a href="examples/contentinfo.html">Contentinfo Landmark Example</a></li>
+ <li><a href="examples/complementary.html">Complementary Landmark Example</a></li>
+ <li><a href="examples/form.html">Form Landmark Example</a></li>
+ <li><a href="examples/region.html">Region Landmark Example</a></li>
+ </ul>
+ </section>
+
+ <section id="keyboard_interaction">
+ <h2>Keyboard Interaction</h2>
+ <p>Not applicable.</p>
+ </section>
+
+ <section id="roles_states_properties">
+ <h2>WAI-ARIA Roles, States, and Properties</h2>
+ <p>
+ The <a href="../../practices//landmark-regions//landmark-regions-practice.html">Landmark Regions Practice</a> describes the HTML elements, roles, properties, and usage guidelines for each of the landmark region roles.
+ </p>
+ </section>
+
+ </main>
+ </body>
+</html>
From 2990bc11ad390010f90c92bec12b3ac80e041cde Mon Sep 17 00:00:00 2001
From: Matt King <a11yThinker@gmail.com>
Date: Sun, 9 Apr 2023 23:17:22 -0700
Subject: [PATCH 2/3] fix link syntax
---
content/patterns/landmarks/landmarks-pattern.html | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/content/patterns/landmarks/landmarks-pattern.html b/content/patterns/landmarks/landmarks-pattern.html
index 1f50a0c6c8..fe448f15e5 100644
--- a/content/patterns/landmarks/landmarks-pattern.html
+++ b/content/patterns/landmarks/landmarks-pattern.html
@@ -23,7 +23,7 @@ <h2>About This Pattern</h2>
There are many aspects of visual presentation, e.g., spacing, color, and borders, that designers use to separate portions of content into sections.
Each section typically plays a specific role, or purpose, in the information architecture of the page.
ARIA includes eight landmark region roles, each of which is intended to convey the purpose of the content it contains.
- For example, the <a class=""role-reference" href=""#main">main</a> landmark designates the section that contains the main content of the page.
+ For example, the <a class="role-reference" href="#main">main</a> landmark designates the section that contains the main content of the page.
</p>
<p>
Thus, landmark regions enable assistive technologies to both identify the purpose of a section of the page and locate its beginning and end.
@@ -66,7 +66,7 @@ <h2>WAI-ARIA Roles, States, and Properties</h2>
The <a href="../../practices//landmark-regions//landmark-regions-practice.html">Landmark Regions Practice</a> describes the HTML elements, roles, properties, and usage guidelines for each of the landmark region roles.
</p>
</section>
-
+
</main>
</body>
</html>
From 9fcc61bbae78842d7069b9539fac6b82dbc88c83 Mon Sep 17 00:00:00 2001
From: Matt King <a11yThinker@gmail.com>
Date: Mon, 15 May 2023 23:59:50 -0700
Subject: [PATCH 3/3] Simplify language
---
content/patterns/landmarks/landmarks-pattern.html | 11 +++--------
1 file changed, 3 insertions(+), 8 deletions(-)
diff --git a/content/patterns/landmarks/landmarks-pattern.html b/content/patterns/landmarks/landmarks-pattern.html
index fe448f15e5..df1e505683 100644
--- a/content/patterns/landmarks/landmarks-pattern.html
+++ b/content/patterns/landmarks/landmarks-pattern.html
@@ -19,15 +19,10 @@ <h1>Landmarks Pattern</h1>
<section id="about">
<h2>About This Pattern</h2>
<p>
- <a class="role-reference" href="#landmark">Landmarks</a> are a class of roles that enable assistive technology users to perceive how the presentation of a page segments content into sections.
- There are many aspects of visual presentation, e.g., spacing, color, and borders, that designers use to separate portions of content into sections.
- Each section typically plays a specific role, or purpose, in the information architecture of the page.
- ARIA includes eight landmark region roles, each of which is intended to convey the purpose of the content it contains.
+ <a class="role-reference" href="#landmark">Landmarks</a> are a set of eight roles that identify the major sections of a page.
+ Each landmark role enables assistive technology users to perceive the start and end of a feature of the high-level page structure that is usually conveyed visually with placement, spacing, color, or borders.
For example, the <a class="role-reference" href="#main">main</a> landmark designates the section that contains the main content of the page.
- </p>
- <p>
- Thus, landmark regions enable assistive technologies to both identify the purpose of a section of the page and locate its beginning and end.
- In addition, landmarks can be used by browsers or assistive technologies to facilitate efficient keyboard navigation among the sections of a page.
+ In addition to conveying structure, landmarks enable browsers and assistive technologies to facilitate efficient keyboard navigation among sections of a page.
</p>
<p>
Several landmark roles are implied by HTML elements.