Level AAA

Level AAA criterion targeting personalization: the purpose of UI components, icons, and regions must be programmatically determinable so user agents can substitute symbols, simplify, or hide non-essential elements

1.3.6 Identify Purpose

In Plain Language

1.3.6 Identify Purpose is Level AAA and extends its sibling 1.3.5 Identify Input Purpose beyond form fields to every UI component, icon, and page region. The purpose of buttons, links, navigation regions, and icons must be programmatically determinable so a personalization layer can swap, simplify, or hide them for users with cognitive and learning disabilities[1].

Where 1.3.5 scopes the mechanism to input fields via HTML autocomplete, 1.3.6 covers the rest of the interface: landmarks via native sectioning elements (<header>, <nav>, <main>, <aside>, <footer>) or ARIA roles (banner, navigation, main, complementary, contentinfo), and accessible names on every icon-only control[2]. AAA is not required for WCAG 2.2 AA conformance, but the criterion is a forward-looking signal: it exists to let W3C COGA's Personalization Semantics working drafts attach metadata that assistive technologies can act on.

Why It Matters

  • Personalization tools for users with cognitive and learning disabilities rely on programmatic purpose to substitute generic icons with a user's own symbol set, simplify chrome, or suppress regions the user does not need. Without landmarks and accessible names, the substitution has nothing to bind to[1].
  • Screen-reader users jump between landmarks (NVDA D, VoiceOver rotor) rather than linearising the DOM. A page built from generic <div> wrappers collapses that navigation model -- the landmark list is empty, so the user steps through every element.
  • Icon-only buttons (✉, 🔍, 🖨) carry no programmatic purpose unless the author attaches an accessible name via aria-label, visually hidden text, or a visible label. Without a name the button announces as "button" and the purpose is unrecoverable.
  • Duplicate landmarks (two <nav> regions, multiple <aside> blocks) must be disambiguated with aria-label or aria-labelledby; otherwise the landmark list surfaces "navigation, navigation" and the user cannot tell which is which[3].

Examples

Do: Use ARIA landmarks for page regions
header role=banner
Site logo and title
nav role=navigation
Home | About | Contact
main role=main
Page content goes here
footer role=contentinfo
Copyright info

✔ Each region is identifiable by assistive technology via landmarks

<header role="banner">
  <h1>Site Title</h1>
</header>

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

<main role="main">
  <!-- Page content -->
</main>

<footer role="contentinfo">
  <p>Copyright info</p>
</footer>
Don't: Use only generic divs with no roles
div class=header
Site logo and title
div class=nav
Home | About | Contact
div class=content
Page content goes here
div class=footer
Copyright info

✘ Generic divs -- assistive technology cannot identify page regions

<!-- FAILS: no landmarks or semantic elements -->
<div class="header">
  <h1>Site Title</h1>
</div>

<div class="nav">
  <a href="/">Home</a>
  <a href="/about">About</a>
</div>

<div class="content">
  <!-- Page content -->
</div>

<div class="footer">
  <p>Copyright info</p>
</div>
Do: Icons with programmatic purpose

✔ Icons have accessible names -- assistive tech can identify their purpose

<button type="button">
  <span aria-hidden="true">&#x2709;</span>
  <span>Send Email</span>
</button>

<button type="button" aria-label="Print this page">
  <span aria-hidden="true">&#x1F5A8;</span>
</button>

<button type="button" aria-label="Search">
  <span aria-hidden="true">&#x1F50D;</span>
</button>
Don't: Icons without accessible purpose

✘ Icon-only buttons with no accessible name -- purpose cannot be determined

<!-- FAILS: no accessible names on icon buttons -->
<button type="button">&#x2709;</button>
<button type="button">&#x1F5A8;</button>
<button type="button">&#x1F50D;</button>
<!-- Screen readers announce these as
     "button" with no useful label -->

How to Fix It

  1. Use native sectioning elements first. <header>, <nav>, <main>, <aside>, and <footer> map to the banner, navigation, main, complementary, and contentinfo landmark roles without extra ARIA. ARIA in HTML documents the default role mappings[2].
  2. Add explicit ARIA roles only when the sectioning element is not available. On a generic container, role="navigation" or role="complementary" produces the same landmark. Do not double up -- <nav role="navigation"> is redundant and, on older AT, can create duplicate announcements.
  3. Disambiguate duplicate landmarks with accessible names. Give each repeated landmark an aria-label or aria-labelledby (e.g., aria-label="Primary" on the main nav and aria-label="Footer" on the footer nav) so the landmark list reads distinctly.
  4. Give every icon-only control an accessible name. Use aria-label, visually hidden text inside the button, or a visible text label alongside the glyph. Mark the decorative glyph itself with aria-hidden="true" so it is not double-announced.
  5. Verify with the landmark rotor. NVDA's landmark quick-nav (D) and VoiceOver's rotor expose the same tree a personalization layer would bind to. If the landmarks are missing, unlabelled, or duplicated, 1.3.6 is failing even where the page is visually tidy.

References

  1. [1] W3C (2023). Understanding Success Criterion 1.3.6: Identify Purpose. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/identify-purpose.html ↩ ↩
  2. [2] W3C (2026). ARIA in HTML. W3C, Accessed 2026-04-07. https://www.w3.org/TR/html-aria/ ↩ ↩
  3. [3] W3C (2024). WAI-ARIA Authoring Practices Guide. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/ARIA/apg/ ↩