Skip to content
Merged
Changes from 9 commits
Commits
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
17 changes: 10 additions & 7 deletions techniques/aria/ARIA11.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ <h1>Using ARIA landmarks to identify regions of a page</h1>
</p>
<p>Landmarks are inserted into the page using the role attribute on an element that marks the section. The value of the attribute is the name of the landmark. These role values are listed below. For HTML mappings of landmark roles, refer to the <cite>Rules of ARIA attribute usage by HTML element</cite> table in the <a href="https://www.w3.org/TR/html-aria/">ARIA In HTML recommendation</a>.</p>
<ul>
<li><code class="language-html">banner</code>: A region that contains the prime heading or internal title of a page.</li>
<li><code class="language-html">navigation</code>: A region that contains navigation links links to other pages or different parts of the same page.</li>
<li><code class="language-html">banner</code>: A region that contains mostly site-oriented content, such as the logo or a site-specific search tool.</li>
<li><code class="language-html">navigation</code>: A region that contains navigation links to other pages or different parts of the same page.</li>
<li><code class="language-html">main</code>: A region that contains a page's main content.</li>
<li><code class="language-html">region</code>: A region that contains a perceivable section of the page containing content that is sufficiently important for users to be able to navigate to the section. A <code class="language-html">region</code> landmark isn't exposed as a landmark region unless it has an accessible name.</li>
<li><code class="language-html">form</code>: 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.</li>
Expand All @@ -32,7 +32,7 @@ <h1>Using ARIA landmarks to identify regions of a page</h1>
<li><code class="language-html">contentinfo</code>: A region that contains information about the parent document such as copyrights and links to privacy statements.</li>
</ul>

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

<p>Landmarks should supplement native semantic markup such as HTML headings, lists and other structural markup. Landmarks are interpretable by WAI-ARIA-aware assistive technologies and are not exposed by browsers directly to users.</p>

Expand Down Expand Up @@ -112,12 +112,13 @@ <h3>Procedure</h3>
<li>Examine each element with 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="language-html">navigation</code> role has been used to mark up a section with navigation links, or the <code class="language-html">main</code> role 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>If the same type of landmark appears multiple times on the page, check that each one is labelled meaningfully.</li>
</ol>
</section>
<section class="results" id="expected-test-results">
<h3>Expected Results</h3>
<ul>
<li>#1, #2, and #3 are true.</li>
<li>#1, #2, #3, and #4 are true.</li>
</ul>
</section>
</section>
Expand All @@ -126,6 +127,8 @@ <h2>Related Techniques</h2>
<ul>
<li><a href="../general/G1">G1</a></li>
<li><a href="../general/G124">G124</a></li>
<li><a href="ARIA13">ARIA13</a></li>
<li><a href="ARIA20">ARIA20</a></li>
<li><a href="../html/H69">H69</a></li>
<li><a href="../html/H100">H100</a></li>
<li><a href="../client-side-script/SCR28">SCR28</a></li>
Expand All @@ -134,13 +137,13 @@ <h2>Related Techniques</h2>
<section id="resources"><h2>Resources</h2>
<ul>
<li>
<a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices</a>
<a href="https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/">WAI-ARIA Authoring Practices, Landmark Regions</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>
<a href="https://www.w3.org/WAI/tutorials/page-structure/regions/">W3C Web Accessibility Tutorials, Page Regions</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>
<a href="https://www.w3.org/TR/wai-aria/#landmark_roles">Accessible Rich Internet Applications (WAI-ARIA), Landmark Roles</a>
</li>
<li>
<a href="https://www.tpgi.com/improving-access-to-landmark-navigation/">Improving access to landmark navigation</a>
Expand Down