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

Issue 291 #2435

Merged
merged 8 commits into from
May 18, 2023
+356 −158
Merged

Issue 291 #2435

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3c04b80
initial commit of H100
fstrr May 17, 2022
3f5cc4d
update ARIA11
fstrr May 17, 2022
e6a19bf
updated H100
fstrr May 18, 2022
c1dd6d5
parity on nav description, better code examples
fstrr May 18, 2022
4ee283c
tidied up content
fstrr Jul 12, 2022
f49409d
Rename to avoid clashes
alastc May 18, 2023
0792d37
Merge branch 'main' into issue-291
alastc May 18, 2023
72d5beb
Adding H101 technique - landmarks
alastc May 18, 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
Next Next commit
initial commit of H100 
Addresses Issue 291. Creates a new HTML technique document for using HTML landmarks to identify regions of a page.
@fstrr
fstrr committed May 17, 2022
commit 3c04b80929b9294edd75e05a39b7e6630a6b6e1d
164 changes: 164 additions & 0 deletions techniques/html/H100.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using HTML landmarks to identify regions of a page</title>
<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link>
</head>
<body>
<h1>Using HTML landmarks to identify regions of a page</h1>
<section class="meta">
<p class="id">ID: HTML100</p>
<p class="technology">Technology: html</p>
<p class="type">Type: Technique</p>
</section>
<section id="applicability">
<h2>When to Use</h2>
<p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
</section>
<section id="description">
<h2>Description</h2>

<p>The purpose of this technique is to provide programmatic access to sections of a web page. Landmark roles (or "landmarks") programmatically identify sections of a page. Landmarks help assistive technology (AT) users orient themselves to a page and help them navigate easily to various sections of a page.</p>

<p>Landmarks also provide an easy way for users of assistive technology to skip over blocks of content that are repeated on multiple pages and notify them of programmatic structure of a page. For instance, if there is a common navigation menu found on every page, landmarks can be used to skip over it and navigate from section to section. This will save assistive technology users and keyboard users the trouble and time of tabbing through a large amount of content to find what they are really after, much like a traditional "skip links" mechanism. A blind user who may be familiar with a news site's menu, and is only interested in getting to the top story, could easily navigate to the "main" landmark, and bypass dozens of menu links. In another circumstance, a user who is blind may want to quickly find a navigation menu, and can do so by jumping to the navigation landmark.</p>

<p>Landmarks also can help sighted keyboard-only users navigate to sections of a page using a <a href="https://www.tpgi.com/improving-access-to-landmark-navigation/">browser plugin</a></p>

<p>Landmarks are inserted into the page when certain semantic HTML elements are added to a web page. These elements are:</p>

<ul>
<li>&lt;header&gt;: When a <code class="el">header</code> is a direct child of the <code class="el">body</code> element, it creates a <code>banner</code> role, a region that typically contains the site's logo, name, and other persistent site-wide content at the top of a page.</li>
<li>&lt;nav&gt;: A collection of navigation links to other pages or different parts of the same page.</li>
<li>&lt;main&gt;: A region that contains a page's main content.</li>
<li>&lt;section&gt;: A region that contains a generic section of a document or application. A <code class="el">section</code> element isn't exposed as a landmark region unless it has an accessible name.</li>
<li>&lt;form&gt;: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing. A <code class="el">form</code> element isn't exposed as a landmark region unless it has an accessible name.</li>
<li>&lt;aside&gt;: A region of the document that supports the main content, yet is separate and meaningful on its own.</li>
<li>&lt;footer&gt;: A region that, when its nearest ancestor is the <code class="el">body</code> element, contains information about the page such as copyrights and links to privacy statements.</li>
</ul>

<p>There are cases when a particular landmark role can be used more than once on a page, for example, primary and secondary blocks of navigation. In these cases, identical roles should be labeled using a valid technique for labelling regions.</p>

<p>Landmarks are interpretable by WAI-ARIA-aware assistive technologies and are not exposed by browsers directly to users.</p>

<p>It is a best practice to include all content on the page in landmarks, so that screen reader users who rely on landmarks to navigate from section to section do not lose track of content.</p>

</section>

<section id="examples">
<h2>Examples</h2>

<section class="example" id="simple-identical-landmarks">
<h3>Simple landmarks</h3>
<p>The following example shows how landmarks might be added to an HTML document:</p>
<pre xml:space="preserve">&lt;header&gt; site logo and name, etc. here &lt;/header&gt;
&lt;form aria-label="site search"&gt; search functionality here &lt;/form&gt;
&lt;nav&gt; a list of navigation links here &lt;/nav&gt;
&lt;main&gt; the page's main content here &lt;/main&gt;
&lt;section&gt; a sponsor's promotion here &lt;/aside&gt;
&lt;aside&gt; sidebar content here &lt;/aside&gt;
&lt;footer&gt; site contact details, copyright information, etc. here &lt;/footer&gt;</pre>
</section>

<section class="example" id="multiple-landmarks-aria-labelledby">
<h3>Multiple landmarks of the same type and aria-labelledby</h3>

<p>The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page. For instance, if a <code class="el">nav</code> element is used multiple times on a page, each instance may have a unique label specified using <code class="prop">aria-labelledby</code>:</p>
<pre xml:space="preserve">&lt;nav aria-labelledby="site-nav-heading"&gt;
&lt;h2 id="site-nav-heading"&gt;Site&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;nav link 1&lt;/li&gt;
&lt;li&gt;nav link 2&lt;/li&gt;
&lt;li&gt;nav link 3&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;
&lt;nav aria-labelledby="related-nav-heading"&gt;
&lt;h2 id="related-nav-heading"&gt;Related Topics&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;topic link 1&lt;/li&gt;
&lt;li&gt;topic link 2&lt;/li&gt;
&lt;li&gt;topic link 3&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;</pre>
</section>

<section class="example" id="multiple-landmarks-aria-label">
<h3>Multiple landmarks of the same type and aria-label</h3>

<p>The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label:</p>
<pre xml:space="preserve">&lt;nav aria-label="Site"&gt;
&lt;ul&gt;
&lt;li&gt;nav link 1&lt;/li&gt;
&lt;li&gt;nav link 2&lt;/li&gt;
&lt;li&gt;nav link 3&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;
&lt;nav aria-label="Tags"&gt;
&lt;ul&gt;
&lt;li&gt;tag link 1&lt;/li&gt;
&lt;li&gt;tag link 2&lt;/li&gt;
&lt;li&gt;tag link 3&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;</pre>
</section>

<section class="example" id="search-form">
<h3>Search form</h3>
<p>The following example shows a search form. A <code class="el">form</code> element must have an accessible name to be exposed as a landmark area:</p>
<pre xml:space="preserve">&lt;form aria-labelledby="search-label"&gt;
&lt;label for="product-search" id="search-label"&gt;Search&lt;/label&gt;
&lt;input id="product-search" placeholder="title, author, or ISBN" type="text"&gt;
&lt;button type="submit"&gt;Find Books&lt;/button&gt;
&lt;/form&gt;</pre>
</section>
</section>
<section id="tests">
<h2>Tests</h2>
<section class="procedure" id="test-procedure">
<h3>Procedure</h3>
<ol>
<li>Examine each HTML element that creates a <a href="https://www.w3.org/TR/wai-aria/#landmark_roles">landmark role</a>.</li>
<li>Examine whether the correct element has been used to mark up content. For example: a <code class="el">nav</code> element has been used to mark up a section with navigation links, or the <code class="el">main</code> element is used to contain the page's main content.</li>
<li>If a landmark region needs to have an accessible name to be exposed as a landmark, check to see that there is an accessible name.</li>
<li>Where multiple types of the same landmark are used, for example: multiple <code class="el">nav</code> elements, examine whether an accurate descriptive label has been given to each one.</li>
</ol>
</section>
<section class="results" id="expected-test-results">
<h3>Expected Results</h3>
<ul>
<li>#1, #2, #3, and #4 are true.</li>
</ul>
</section>
</section>
<section id="related">
<h2>Related Techniques</h2>
<ul>
<li><a href="../aria/ARIA11">ARIA11</a></li>
<li><a href="../general/G1">G1</a></li>
<li><a href="../general/G124">G124</a></li>
<li><a href="H69">H69</a></li>
<li><a href="../client-side-script/SCR28">SCR28</a></li>
</ul>
</section>
<section id="resources">
<h2>Resources</h2>
<ul>
<li>
<a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices</a>
</li>
<li>
<a href="https://www.w3.org/TR/wai-aria/#usage_intro">Accessible Rich Internet Applications (WAI-ARIA), Using WAI-ARIA Roles</a></li>
<li>
<a href="https://www.w3.org/TR/wai-aria/#states_and_properties">Accessible Rich Internet Applications (WAI-ARIA), Supported States and Properties</a>
</li>
<li>
<a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a>
</li>
<li>
<a href="https://www.tpgi.com/improving-access-to-landmark-navigation/">Improving access to landmark navigation</a>
</li>
<li>
<a href="https://matatk.agrip.org.uk/landmarks/">Landmarks browser extension</a>
</li>
</ul>
</section>
</body>
</html>