Skip to main content
Perceivable WCAG 1.3.6

1.3.6 Identify Purpose

In content implemented using markup languages, the purpose of user interface components, icons, and regions can be programmatically determined.

Level AAA Moderate WCAG 2.1 (new) WCAG 2.2

What this rule means

Success Criterion 1.3.6 extends the concept of programmatic purpose identification beyond form inputs to all user interface components, icons, and page regions. While 1.3.5 focuses specifically on autocomplete for personal data fields, 1.3.6 is broader: every interactive component, every icon, and every region should have its purpose identifiable through standard markup — ARIA landmarks, roles, labels, and semantic HTML.

This criterion enables assistive technologies and user-installed personalization tools to adapt content presentation. A user might replace unfamiliar icons with text labels, hide non-essential regions, or add visual cues to important components. These adaptations require that the purpose of each element be programmatically available.

Why it matters

Users with cognitive disabilities often struggle with unfamiliar icons, complex interfaces, and dense content. When the purpose of every component and region is programmatically identified, personalization tools can simplify the interface — replacing icons with words, highlighting navigation, or hiding supplementary content. This transforms an overwhelming page into something manageable.

This criterion also supports users who rely on symbol-based communication (AAC users) by allowing assistive technology to present interface elements using the user's preferred symbol set. A search icon might be replaced with a symbol the user recognizes from their communication board.

Related axe-core rules

There are no specific axe-core rules for 1.3.6 as it is a Level AAA criterion requiring semantic completeness that goes beyond what automated testing can fully verify. However, rules related to ARIA landmarks, roles, and labels contribute to meeting this criterion.

How to test

  1. Verify that all page regions use appropriate ARIA landmark roles (<header>, <nav>, <main>, <aside>, <footer>) or explicit role attributes.
  2. Check that every icon-only button or link has an accessible name via aria-label, aria-labelledby, or visually hidden text.
  3. Confirm that interactive components use correct ARIA roles (role="search", role="navigation", role="complementary", etc.).
  4. Verify that regions have descriptive labels, especially when multiple instances of the same landmark exist (e.g., two <nav> elements with different aria-label values).
  5. Test with a personalization browser extension to see if it can identify and adapt UI components based on their programmatic purpose.

How to fix

Use semantic HTML and ARIA landmarks to identify page regions:

<header role="banner">
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>Article Title</h1>
    <p>Article content...</p>
  </article>
</main>

<aside aria-label="Related articles">
  <h2>Related</h2>
  <ul>...</ul>
</aside>

<footer role="contentinfo">
  <nav aria-label="Footer navigation">...</nav>
</footer>

Give every icon-only control a programmatic name:

<!-- Icon-only button with accessible name -->
<button aria-label="Search" type="submit">
  <svg aria-hidden="true" focusable="false">
    <use href="#icon-search" />
  </svg>
</button>

<!-- Icon-only link with visually hidden text -->
<a href="/settings">
  <svg aria-hidden="true"><use href="#icon-gear" /></svg>
  <span class="sr-only">Settings</span>
</a>

Use the search landmark role for search functionality:

<form role="search" aria-label="Site search">
  <label for="search-input">Search</label>
  <input type="search" id="search-input"
         name="q" autocomplete="off">
  <button type="submit">Search</button>
</form>

Common mistakes

  • Using generic <div> containers for page regions instead of semantic landmarks.
  • Icon-only buttons without aria-label or visually hidden text, leaving them unlabeled.
  • Multiple navigation landmarks without distinguishing aria-label values (two <nav> elements both without labels).
  • Decorative icons missing aria-hidden="true", causing screen readers to announce meaningless content.
  • Using custom components without ARIA roles, making their purpose invisible to assistive technology.
  • Assuming that visible text near an icon is sufficient — the programmatic association must be explicit.

Resources