WAI Website Assets

Complete Page 

<section class="default-grid info" tabindex="0">
    <p class="inner"><svg aria-hidden="true" class="icon-info "><use xlink:href="../../assets/images/icons.svg#icon-info"></use></svg> infoThis is an unpublished draft preview. Please refer to our published website at <a href="https://www.w3.org/WAI/">w3.org/WAI/</a>.
    </p>
</section>
<nav aria-label="Skip Link, Customization, and Language Selector" id="controls" class="default-grid">
    <ul>
        <li><a href="#main">Skip to Content</a></li>
        <li class="opt"><a href="/wai-video-standards-and-benefits/meta/customize/">Change Text Size or Colors</a></li>
        <li class="opt languagelist">
            <strong>This page in:</strong>
            <ul class="languagelistul">
                <li><strong style="text-transform: capitalize;">English</strong></li>
                <li><a style="text-transform: capitalize;" href="/wai-video-standards-and-benefits/videos/standards-and-benefits/el" lang="el">Ελληνικά</a></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>
        </li>
        <li class="opt">
            <a href="/wai-video-standards-and-benefits/translations/">All Translations <svg aria-hidden="true" class="icon-languages "><use xlink:href="../../assets/images/icons.svg#icon-languages"></use></svg> languages</a>
        </li>
        <li><button id="showoptions" class="showhidebutton button-inline" data-target="#controls .opt" aria-expanded="true" data-showtext='<svg aria-hidden="true" class="icon-languages "><use xlink:href="../../assets/images/icons.svg#icon-languages"></use></svg> languages Show Customization, Languages, Translations'
                data-hidetext='Hide Options'><svg aria-hidden="true" class="icon-languages "><use xlink:href="../../assets/images/icons.svg#icon-languages"></use></svg> languages Show Customization, Languages, Translations</button></li>
    </ul>

</nav>
<header id="site-header" class="default-grid with-gap">
    <div class="logos">
        <a href="https://www.w3.org/" class="home w3c">
    <svg role="img" aria-label="W3C" viewBox="0 0 68 34" xmlns="http://www.w3.org/2000/svg"><g><path d="m16.117 1.006 5.759 19.58 5.759-19.58h4.17 11.444v1.946l-5.879 10.128c2.065.663 3.627 1.868 4.686 3.615 1.059 1.748 1.589 3.799 1.589 6.155 0 2.914-.775 5.363-2.324 7.348s-3.555 2.978-6.017 2.978c-1.854 0-3.469-.589-4.845-1.767-1.377-1.178-2.396-2.773-3.058-4.786l3.256-1.35c.477 1.218 1.106 2.178 1.887 2.879.781.702 1.701 1.052 2.76 1.052 1.112 0 2.052-.622 2.82-1.866.768-1.245 1.152-2.74 1.152-4.489 0-1.933-.411-3.429-1.231-4.488-.954-1.244-2.45-1.867-4.489-1.867h-1.588v-1.906l5.56-9.612h-6.712l-.382.65-8.163 27.548h-.397l-5.958-19.937-5.957 19.937h-.397l-9.53-32.168h4.17l5.759 19.58 3.892-13.185-1.906-6.395z"/><path d="m64.92 1.006c-.819 0-1.554.295-2.111.861-.591.6-.92 1.376-.92 2.178s.313 1.545.887 2.128c.583.591 1.334.912 2.145.912.793 0 1.562-.321 2.161-.903.574-.557.887-1.3.887-2.136 0-.811-.321-1.57-.878-2.136-.584-.592-1.344-.904-2.171-.904zm2.643 3.065c0 .701-.271 1.351-.768 1.832-.524.507-1.174.777-1.892.777-.675 0-1.342-.278-1.84-.785s-.777-1.157-.777-1.849.287-1.368.802-1.891c.481-.49 1.131-.751 1.84-.751.726 0 1.376.271 1.883.785.49.489.752 1.147.752 1.882zm-2.559-1.807h-1.3v3.445h.65v-1.469h.642l.701 1.469h.726l-.769-1.57c.498-.102.785-.439.785-.929 0-.625-.472-.946-1.435-.946zm-.118.422c.608 0 .886.169.886.591 0 .405-.278.549-.87.549h-.549v-1.14z"/><path d="m59.807.825.676 4.107-2.391 4.575s-.918-1.941-2.443-3.015c-1.285-.905-2.122-1.102-3.431-.832-1.681.347-3.587 2.357-4.419 4.835-.995 2.965-1.005 4.4-1.04 5.718-.056 2.113.277 3.362.277 3.362s-1.452-2.686-1.438-6.62c.009-2.808.451-5.354 1.75-7.867 1.143-2.209 2.842-3.535 4.35-3.691 1.559-.161 2.791.59 3.743 1.403 1 .854 2.01 2.721 2.01 2.721z"/><path d="m60.102 24.063s-1.057 1.889-1.715 2.617c-.659.728-1.837 2.01-3.292 2.651s-2.218.762-3.656.624c-1.437-.138-2.772-.97-3.24-1.317s-1.664-1.369-2.34-2.322-1.733-2.859-1.733-2.859.589 1.91.958 2.721c.212.467.864 1.894 1.789 3.136.863 1.159 2.539 3.154 5.086 3.604 2.547.451 4.297-.693 4.73-.97s1.346-1.042 1.924-1.66c.603-.645 1.174-1.468 1.49-1.962.231-.36.607-1.092.607-1.092z"/></g></svg>
  </a>
        <a href="https://www.w3.org/WAI/" class="home">
    <span class="wai"><span class="wa">Web&nbsp;Accessibility</span> <span class="i"><span class="initieative">Initiative</span> <span>WAI</span></span></span>
  </a>
        <div class="claim">
            <span>Strategies, standards, and resources to make<br>the web accessible to people with disabilities.</span>
        </div>
        <button class="button button-menu" id="openmenu"><span><svg aria-hidden="true" class="icon-menu "><use xlink:href="/assets/images/icons.svg#icon-menu"></use></svg> Menu</span></button>
    </div>
    <div class="navigations">
        <nav class="metanav" label="Meta &amp; Search">
            <ul>
                <li><a href="#">Get Involved</a></li>
                <li><a href="#">About W3C WAI</a></li>
                <li>
                    <form action="#" role="search">
                        <div>
                            <label for="header-search">
            <input id="header-search" type="search" placeholder="Search" aria-label="Search">
          </label>
                            <button class="button button-icon button-nobg button-noborder"><span><svg aria-hidden="true" class="icon-search "><use xlink:href="../../assets/images/icons.svg#icon-search"></use></svg> search</span></button>
                        </div>
                    </form>
                </li>
            </ul>
        </nav>
    </div>

</header>
<nav class="mainnav" aria-label="Main">
    <ul class="default-grid with-gap">
        <li>
            <a href="/sitemap/#accessibility-fundamentals"><span>Accessibility Fundamentals</span></a>
        </li>
        <li>
            <a href="/sitemap/#planning-policies"><span>Planning&nbsp;&amp; Policies</span></a>
        </li>
        <li>
            <a href="/sitemap/#design-develop"><span>Design&nbsp;&amp; Develop</span></a>
        </li>
        <li>
            <a href="/sitemap/#test-evaluate"><span>Test&nbsp;&amp; Evaluate</span></a>
        </li>
        <li>
            <a href="/sitemap/#teach-advocate"><span>Teach&nbsp;&amp; Advocate</span></a>
        </li>
        <li>
            <a href="/sitemap/#standards-guidelines"><span>Standards/<wbr>Guidelines</span></a>
        </li>
    </ul>
</nav>
<nav class="breadcrumb default-grid" label="Breadcrumb">
    <ul class="default-container">
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a></li>
        <li><a href="#">Page Structure</a></li>
        <li><a href="#main" aria-current="page">Page Regions</a></li>
    </ul>
</nav>

<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 &amp; 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 &amp; 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">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"Main Navigation"</span><span class="nt">&gt;</span>
  …
<span class="nt">&lt;/nav&gt;</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">&lt;nav</span> <span class="na">aria-labelledby=</span><span class="s">"regionheading"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"regionheading"</span><span class="nt">&gt;</span>On this Page<span class="nt">&lt;/h3&gt;</span>
    …
<span class="nt">&lt;/nav&gt;</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&nbsp;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&nbsp;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 &amp; 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>

            <footer class="page-footer default-grid">
                <div class="inner">
                    <p>Status: XXX updated Month 20XX</p>
                    <p>Editors: Xxxxxx Yxxxxx; previously Xxxxxx Yxxxxx and Xxxxxx Yxxxxx. Developed by the Education and Outreach Working Group. Contributors: Xxxxxx Yxxxxx, Xxxxxx Yxxxxx , and Xxxxxx Yxxxxx. First developed with support from ONE Project,
                        then updated with support of the TWO Project and later the THREE Project.</p>
                </div>
            </footer>

            <footer class="site-footer grid-4q" aria-label="Site">
                <div class="q1-start q3-end about">
                    <div>
                        <p><a class="largelink" href="https://www.w3.org/WAI/" lang="en" dir="auto" translate="no">W3C Web Accessibility Initiative (WAI)</a></p>
                        <p>Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.</p>
                    </div>
                    <div class="social" lang="en" dir="auto" translate="no">
                        <ul>
                            <li><a href="https://twitter.com/w3c_wai"><svg aria-hidden="true" class="icon-twitter "><use xlink:href="/assets/images/icons.svg#icon-twitter"></use></svg> Twitter</a></li>
                            <li><a href="https://www.w3.org/WAI/feed.xml"><svg aria-hidden="true" class="icon-rss "><use xlink:href="/assets/images/icons.svg#icon-rss"></use></svg> Feed</a></li>
                            <li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlistsv"><svg aria-hidden="true" class="icon-youtube"><use xlink:href="/assets/images/icons.svg#icon-youtube"></use></svg> YouTube</a></li>
                            <li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li>
                        </ul>
                    </div>
                    <div lang="en" dir="auto" translate="no">
                        <p>Copyright © 2019 W3C <sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
                            <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn">Beihang</a>) <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p>
                    </div>
                </div>
                <div class="q4-start q4-end">
                    <ul style="margin-bottom:0">
                        <li><a href="/WAI/about/contacting/">Contact WAI</a></li>
                        <li><a href="/WAI/sitemap/">Site Map</a></li>
                        <li><a href="/WAI/news/">News</a></li>
                        <li><a href="/WAI/sitemap/#archive">Archive</a></li>
                        <li><a href="/WAI/about/accessibility-statement/">Accessibility Statement</a></li>
                        <li><a href="/WAI/translations/"> Translations</a></li>
                        <li><a href="/WAI/roles/">Resources for Roles</a></li>
                    </ul>
                </div>
            </footer>
 
{% render '@warning'             %}
{% render '@header'              %}
{% render '@breadcrumb'          %}
{% render '@contentarea-leftcol' %}
{% render '@footer-page'         %}
{% render '@footer-site'         %}
 
{
  "text": "This is an example component!"
}

There are no notes for this item.