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

Add landmark pattern page #2670

Merged
merged 3 commits into from
Jun 8, 2023
Merged

Add landmark pattern page #2670

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
26488b7
Draft landmark pattern
mcking65 Apr 10, 2023
2990bc1
fix link syntax
mcking65 Apr 10, 2023
9fcc61b
Simplify language
mcking65 May 16, 2023
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
72 changes: 72 additions & 0 deletions content/patterns/landmarks/landmarks-pattern.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>