WCAG 1.3.6 — Identify Purpose

What this requires

For Level AAA, the purpose of UI components, icons, and regions must be programmatically determinable. This goes beyond input fields (which are covered by 1.3.5) to the full UI: navigation regions, alerts, search boxes, social-media links, advertising blocks, language selectors. The intent is to give adaptive technologies — symbol-based AAC tools, simplified-UI overlays, automatic translation — enough metadata to remix the page for users who need a different presentation.

How AI coding tools fail this

When asked to "build the header" or "add a footer with social links", AI tools generate visually correct markup with no landmark roles, no microdata, and no ARIA region labelling. The page is fine for typical users; assistive tools that try to render a simplified view have no hooks to work from.

The second pattern: icons used as navigation (a bare <svg> linking to Facebook, an envelope linking to email) with no role or accessible name beyond an aria-label describing the destination. The platform identity ("this is a social-media link to Facebook") is implicit only.

The third: missing landmark structure. Page after page wraps the main column in a <div> rather than a <main>, ships the nav as <div className="nav">, and gives screen-reader users no map of the page.

Failing examples

A header assembled from generic divs:

<div className="header">
  <div className="logo">ACME</div>
  <div className="nav">
    <a href="/products">Products</a>
    <a href="/pricing">Pricing</a>
  </div>
</div>

Social links with no programmatic identification of platform:

<a href="https://twitter.com/acme">
  <TwitterIcon />
</a>
<a href="https://github.com/acme">
  <GitHubIcon />
</a>

Passing examples

Use semantic regions and declare their purpose:

<header>
  <a href="/" aria-label="ACME — home">
    <Logo />
  </a>
  <nav aria-label="Primary">
    <ul>
      <li><a href="/products">Products</a></li>
      <li><a href="/pricing">Pricing</a></li>
    </ul>
  </nav>
</header>

Social links with explicit purpose and accessible names:

<nav aria-label="Social">
  <ul>
    <li>
      <a href="https://twitter.com/acme" rel="me">
        <TwitterIcon aria-hidden="true" />
        <span className="sr-only">Twitter (opens in new tab)</span>
      </a>
    </li>
    <li>
      <a href="https://github.com/acme" rel="me">
        <GitHubIcon aria-hidden="true" />
        <span className="sr-only">GitHub (opens in new tab)</span>
      </a>
    </li>
  </ul>
</nav>

Edge cases

Landmarks (<header>, <nav>, <main>, <aside>, <footer>) do most of the work. Label them with aria-label when there's more than one of the same kind on the page (e.g., a primary nav and a footer nav).
role attributes (role="search", role="alert") are legitimate when the appropriate HTML element doesn't exist.
rel="me" on identity-linking outbound links is a small but real signal that the link identifies an account belonging to the publisher.
AAA is rare on commercial sites. Most teams should target the AA criteria first; 1.3.6 is the polish layer for content specifically designed for personalisation tools.
Schema.org structured data isn't required for this criterion but contributes to the same goal.

How Jeikin handles this

This is a manual review item. The scanner flags pages with no <main> landmark, no nav region label when multiple navs exist, and icon-only links without an accessible name. The deeper question — "is the purpose of every region inferable from the markup?" — needs human judgment, recorded on the dashboard alongside the automated findings.