Skip to content

Commit

Permalink
Add landmark pattern page (pull #2670)
Browse files Browse the repository at this point in the history 
Resolves issue #2645 by adding a new page that describes landmarks as a pattern.
The pattern page references the landmarks practice for information about each of the landmark types.
Now, readers will find landmark information on both the practices and patterns pages.
  • Loading branch information
@mcking65
mcking65 authored Jun 8, 2023
1 parent 32c7ef2 commit fec7032
Showing 1 changed file with 67 additions and 0 deletions.
67 changes: 67 additions & 0 deletions content/patterns/landmarks/landmarks-pattern.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!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 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.
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.
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>

0 comments on commit fec7032

Please sign in to comment.