<div class="default-grid with-gap leftcol contentarea">
<nav class="sidenav sn-contents" label="Page Structure" id="contents">
<div class="sidenav--head">
<div class="sidenav--head-icon"><svg aria-hidden="true" class="icon-book sidenav--head-icon--inner"><use xlink:href="../../assets/images/icons.svg#icon-book"></use></svg> book</div>
<div class="sidenav--head-title">
<div class="sidenav--head-section">Tutorials</div>
<div class="sidenav--head-subsection">Page Structure</div>
</div>
</div>
<ul class="sidenav--list">
<li>
<a lang="en" href="/wai-website/fundamentals/accessibility-intro/" aria-current="location" class="page-link"><span>Introduction to Web Accessibility <span lang="de" dir="auto" translate="no" class="lang">(auf Englisch)</span></span></a>
<ul>
<li>
<a lang="de" href="/wai-website/videos/standards-and-benefits/de" aria-current="page" class="page-link">Video-Einführung</a>
</li>
</ul>
</li>
<li><a href="#" aria-current="page">Web Accessibility Tutorials</a></li>
<li>
<a href="#" aria-current="location">Page Structure Tutorial</a>
<ul>
<li><a href="#">Page Regions</a></li>
<li><a href="#" aria-current="page">Labeling Regions</a></li>
<li><a href="#">Headings</a></li>
<li><a href="#">Content Structure</a></li>
<li><a href="#">Example</a></li>
</ul>
</li>
<li>
<a href="#">Menus</a>
<ul>
<li><a href="#">Structure</a></li>
<li><a href="#">Styling</a></li>
<li><a href="#">Fly-out Menus</a></li>
<li><a href="#">Application Menus</a></li>
<li><a href="#">Application Menu Example & Code</a></li>
</ul>
</li>
<li>
<a href="#">Images</a>
<ul>
<li><a href="#">Informative Images</a></li>
<li><a href="#">Decorative Images</a></li>
<li><a href="#">Functional Images</a></li>
<li><a href="#">Images of Text</a></li>
<li><a href="#">Complex Images</a></li>
<li><a href="#">Groups of Images</a></li>
<li><a href="#">Image Maps</a></li>
<li><a href="#">An alt Decision Tree</a></li>
<li><a href="#">Tips and Tricks</a></li>
</ul>
</li>
<li>
<a href="#">Tables</a>
<ul>
<li><a href="#">One Header</a></li>
<li><a href="#">Two Headers</a></li>
<li><a href="#">Irregular Headers</a></li>
<li><a href="#">Multi-level Headers</a></li>
<li><a href="#">Caption & Summary</a></li>
<li><a href="#">Tips and Tricks</a></li>
</ul>
</li>
<li>
<a href="#">Forms</a>
<ul>
<li><a href="#">Labeling Controls</a></li>
<li><a href="#">Grouping Controls</a></li>
<li><a href="#">Form Instructions</a></li>
<li><a href="#">Validating Input</a></li>
<li><a href="#">User Notifications</a></li>
<li><a href="#">Multi-page Forms</a></li>
<li><a href="#">Custom Controls</a></li>
</ul>
</li>
<li>
<a href="#">Carousels</a>
<ul>
<li><a href="#">Structure</a></li>
<li><a href="#">Functionality</a></li>
<li><a href="#">Animations</a></li>
<li><a href="#">Styling</a></li>
<li><a href="#">Working Example</a></li>
<li><a href="#">Complete Code</a></li>
</ul>
</li>
</ul>
<nav class="sidenav-languages" aria-labelledby="languagehead">
<header id="languagehead">Languages/Translations</header>
<ul class="langlist">
<li><a href="/wai-video-standards-and-benefits/videos/standards-and-benefits/" lang="en">English (original)</a></li>
<li><a style="text-transform: capitalize;" href="/videos/standards-and-benefits/ar" lang="ar" dir="auto" translate="no">العربية</a></li>
<li><strong style="text-transform: capitalize;">Ελληνικά</strong></li>
<li><a style="text-transform: capitalize;" href="/wai-video-standards-and-benefits/videos/standards-and-benefits/es" lang="es">español</a></li>
<li><a style="text-transform: capitalize;" href="/wai-video-standards-and-benefits/videos/standards-and-benefits/fr" lang="fr">français</a></li>
<li><a style="text-transform: capitalize;" href="/wai-video-standards-and-benefits/videos/standards-and-benefits/nl" lang="nl">Nederlands</a></li>
<li><a style="text-transform: capitalize;" href="/wai-video-standards-and-benefits/videos/standards-and-benefits/zh-hans" lang="zh-hans">简体汉语</a></li>
</ul>
<p style="padding: 4px 0 4px 27px;margin:0;border-top: 1px solid #eed009;"><a href="/wai-video-standards-and-benefits/translations/#el">Άλλοι πόροι στη γλώσσα Ελληνικά</a></p>
<p><a href="/wai-video-standards-and-benefits/translations/">Όλες οι Μεταφράσεις</a></p>
<p><a href="#">Μετάφραση πόρων WAI</a></p>
</nav>
</nav>
<main id="main" class="content with-sidenotes">
<h1>Labeling Regions</h1>
<aside class="box box-simple">
<header class="box-h box-h-simple">Status: Draft
</header>
<div class="box-i">
<p>This is an in-progress, unapproved draft.</p>
</div>
</aside>
<p>Most regions on a page need to be labeled. This is especially important when there are multiple regions of the same type on one page, such as multiple navigation options. WAI-ARIA provides simple mechanisms to label a region, enabling users to
easily navigate around the page.</p>
<p>Sections should also be organized using <a href="../headings/">headings</a>.</p>
<h2 class="ap" id="using-aria-label">Using <code>aria-label</code></h2>
<p>Use the WAI-ARIA <code>aria-label</code> attribute to label the region. This approach can be used if the label is not supposed to appear visually on the page.</p>
<aside class="ref-side">
<div>
<svg style="width: 2em;" viewBox="0 0 32 32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
<path d="M16 14 L16 23 M16 8 L16 10" />
<circle cx="16" cy="16" r="14" />
</svg>
<p>More <a href="https://www.w3.org/WAI/intro/aria">information about WAI-ARIA</a> is available, including <a href="https://www.w3.org/TR/aria-in-html/">Notes on Using ARIA in HTML</a>.</p>
</div>
</aside>
<figure class="code ">
<figcaption>Code snippet: </figcaption>
<pre class="highlight html"><code><span class="nt"><nav</span> <span class="na">aria-label=</span><span class="s">"Main Navigation"</span><span class="nt">></span>
…
<span class="nt"></nav></span>
</code></pre>
</figure>
<aside class="demo-side">
<div>
<svg style="width: 2em;" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%"><circle cx="17" cy="15" r="1"/><circle cx="16" cy="16" r="6"/><path d="M2 16S7 6 16 6s14 10 14 10-5 10-14 10S2 16 2 16z"/></symbol>
<p>A <a href="../example/">complete example</a>, including labels, is available.</p>
</div>
</aside>
<h2 class="ap" id="using-aria-labelledby">Using <code>aria-labelledby</code></h2>
<p>Use the WAI-ARIA <code>aria-labelledby</code> to reference an existing element – like a heading – by its (unique) <code>id</code>. The content of the referenced element is then used as the label. A heading allows users to find the region in multiple ways.</p>
<figure class="code ">
<figcaption>Code snippet: </figcaption>
<pre class="highlight html"><code><span class="nt"><nav</span> <span class="na">aria-labelledby=</span><span class="s">"regionheading"</span><span class="nt">></span>
<span class="nt"><h3</span> <span class="na">id=</span><span class="s">"regionheading"</span><span class="nt">></span>On this Page<span class="nt"></h3></span>
…
<span class="nt"></nav></span>
</code></pre>
</figure>
<div class="resources">
<h2 id="related">Related WCAG 2.0 resources</h2>
<div class="resources-inner">
<p>These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG 2.0 success criteria and techniques from different conformance levels:</p>
<p><strong>Success Criteria:</strong></p>
<ul>
<li><p><a href="http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-skip">2.4.1 Bypass Blocks:</a> A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)</p></li>
<li><p><a href="http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-descriptive">2.4.6 Headings and Labels:</a> Headings and labels describe topic or purpose. (Level AA)</p></li>
</ul>
<p><strong>Techniques:</strong></p>
<ul>
<li><a href="http://www.w3.org/TR/WCAG20-TECHS/ARIA11">ARIA11: Using ARIA landmarks to identify regions of a page</a></li>
<li><a href="http://www.w3.org/TR/WCAG20-TECHS/H69">H69: Providing heading elements at the beginning of each section of content</a></li>
</ul>
</div>
</div>
<nav role="navigation" aria-label="Previous/Next" id="tools">
<ul>
<li class="prev">
<span><a rel="prev" class="" href="../regions/"><span class="count"></span><span class="txt"><span class="dir">Previous:</span><span class="title">Page Regions</span></span></a></span>
</li>
<li class="next">
<span><a rel="next" class="" href="../headings/"><span class="count"></span><span class="txt"><span class="dir">Next:</span><span class="title">Headings</span></span></a></span>
</li>
</ul>
</nav>
<aside class="side-box github" role="complementary">
<h2 class="heading">We welcome your ideas</h2>
<p>Please send any ideas, suggestions, or comments to the <a href="mailto:wai-eo-editors@w3.org?subject=[Tutorial%20Feedback]">(publicly-archived) mailing list wai-eo-editors@w3.org</a>. You can also contribute to the <a href="https://github.com/w3c/wai-tutorials" rel="nofollow">code directly on Github</a>.</p>
<div class="editpage">
<a class="btn" href="https://github.com/w3c/wai-tutorials/blob/master/source/page-structure/labels.html.erb.md">Fork & edit this page on Github</a>
</div>
</aside>
</main>
<a class="button button-backtotop" href="#main"><span><svg aria-hidden="true" class="icon-arrow-up "><use xlink:href="../../assets/images/icons.svg#icon-arrow-up"></use></svg> arrow-up Back to Top</span>
</a>
</div>
<div class="default-grid with-gap leftcol contentarea">
{% render '@sn-header-base', mods=['contents'], id="contents", section="Tutorials", label="Page Structure", icon="book" %}
{% render '@content' %}
{% render '@button', type="link", href="#main", mods=['backtotop'], label="Back to Top", icon="arrow-up" %}
</div>
/* No context defined for this component. */
There are no notes for this item.