1.3.6 Identify Purpose

Level AAA · added in WCAG 2.1

The purpose of controls, icons and page regions must be available in code. Then software can adapt them, for example by swapping in familiar symbols. This is level AAA, which most laws and policies don't require, but the basics are cheap and worth doing.

Who it helps

People with cognitive, learning, memory or language disabilities can use tools that replace icons with familiar symbols. Some tools also reduce a page to its key parts. These tools only work when the page says what each part is for.

How to meet it

Mark up regions with landmark elements: <header>, <nav>, <main>, <aside> and <footer>, and label repeated ones.
Use native elements, such as <button>, <a href> and <input>, so each control exposes its role.
Give icon-only controls an accessible name that states their purpose, such as "Search" or "Close dialog".
Keep valid autocomplete tokens on fields that collect information about the user (see 1.3.5).
W3C's WAI-Adapt attributes for personalization are still a draft, so landmarks are the main documented technique today.

Examples

Fails:A layout built from generic divs, with no landmarks

<div class="top">
  <div class="menu"><a href="/">Home</a> <a href="/pricing">Pricing</a></div>
</div>
<div class="content"><h1>Pricing</h1></div>
<div class="bottom">&copy; 2026 Example Co.</div>

Fails:A clickable icon with no role or purpose in code

<span class="icon-cart" onclick="openCart()"></span>

Passes:The same layout with landmark elements

<header>
  <nav aria-label="Main">
    <a href="/">Home</a> <a href="/pricing">Pricing</a>
  </nav>
</header>
<main><h1>Pricing</h1></main>
<footer>&copy; 2026 Example Co.</footer>

Passes:A real button whose name states its purpose

<button type="button" class="icon-cart" aria-label="Open cart"
        onclick="openCart()"></button>

Can a scanner detect this?

No axe-core rule tests this criterion as a whole. Some rules flag related problems, such as unnamed buttons. A person must still judge whether every region, control and icon has a clear purpose in code.

No automated rule tests this criterion. Check it by hand.

Common mistakes

Building page regions from divs, so tools can't tell navigation from main content.
Using clickable spans or divs for icons, which expose no role or purpose.
Naming an icon button by its look, such as "cart icon", instead of its action, "Open cart".
Using several nav elements without labels, so tools can't tell them apart.

Official W3C explanation of 1.3.6

Check your own page

See which automated WCAG checks your page fails, with the failing elements and how to fix them.

Reviewed November 2, 2026