This Wiki page is edited by participants of the WCAG Working Group. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.

Using aria-labelledby to name regions and landmarks

Jump to: navigation, search


User Agent Notes [To be published separately]


This technique applies to HTML5 technologies.

This technique relates to:


The purpose of this technique is to provide names for regions of a page that can be read by assistive technology. The aria-labelledby attribute provides a way to associate an section of the page marked up as a region or landmarks with text that is on the page that labels it.

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.

Like aria-describedby, aria-labelledby can accept multiple ids to point to other regions of the page using a space separated list. It is also limited to ids for defining these sets.


Example 1

Below is an example of aria-labelledby used on a complementary Landmark. The region of the document to which the heading pertains could be marked with the aria-labelledby property containing the value of the id for the header.

<p role="complementary" aria-labelledby="hdr1">
 <h1 id="hdr1">
    Top News Stories

Example 2

The following code snippet for application landmarks with static prose. If you have a regional landmark of type application and static descriptive text is available, then on the application landmark, include an aria-describedby reference to associate the application and the static text as shown here:

<div role="application" aria-labelledby="p123" aria-describedby="info">
<h1 id="p123">Calendar<h1>
<p id="info">
This calendar shows the game schedule for the Boston Red Sox.
<div role="grid">


Related Techniques



  1. Examine each element with attribute role=region or with a landmark role, where an aria-labelledby attribute is also present.
  2. Check that the value of the aria-labelledby attribute is the id of an element on the page.
  3. Check that the text of the element with that id accurately labels the section of the page.

Expected Results

Checks #2 and #3 are true.