WCAG 2.2 Demo Suite

1.3.6 Level AAA Guideline 1.3 Adaptable Added in WCAG 2.1 Partly detectable automatically

Identify Purpose

The purpose of user interface components, icons, and regions can be determined programmatically — extending 1.3.5 beyond form fields to the whole interface.

Who this affects

Users with cognitive disabilities who rely on personalisation tools that swap in familiar symbols, simplify layouts, or hide non-essential regions.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

Fails 1.3.6

Open the failing example in a new tab

fail.html — the problem

<h1>Your account</h1>

<!-- 1.3.6 extends 1.3.5 from form fields to the WHOLE interface: regions,
     controls and icons must all have a programmatically determinable purpose,
     so that personalisation tools can act on them - swapping in symbols a user
     recognises, simplifying the layout, or hiding non-essential regions.

     FAILURE 1: the page is built entirely from divs. There are no landmarks,
     so a personalisation tool cannot tell the navigation from the main content
     from the advertising, and cannot hide the parts the user does not need. -->
<div class="bar">
  <div><a href="#a">Home</a></div>
  <div><a href="#a">Orders</a></div>
  <div><a href="#a">Settings</a></div>
</div>

<!-- FAILURE 2: icon-only controls whose purpose exists only as a glyph. There
     is no name and no role beyond "button", so nothing can substitute a
     symbol the user finds easier to recognise. -->
<div class="bar">
  <button type="button" class="button button--secondary">🏠</button>
  <button type="button" class="button button--secondary">🔍</button>
  <button type="button" class="button button--secondary">🗑</button>
  <button type="button" class="button button--secondary">⚙</button>
</div>

<div>
  <div style="font-size:1.2rem;font-weight:700">Recent orders</div>
  <div>Order #1041 — 3 March</div>
</div>

<div>Advertisement: buy a tote bag.</div>

<p id="a">Section.</p>

Meets 1.3.6

Open the passing example in a new tab

pass.html — the fix

<!-- FIX 1: real landmarks. A personalisation tool can now distinguish
     navigation from main content from complementary material, and can hide or
     reorder them on the user's behalf. -->
<header>
  <nav aria-label="Main">
    <ul class="bar">
      <li><a href="#a">Home</a></li>
      <li><a href="#a">Orders</a></li>
      <li><a href="#a">Settings</a></li>
    </ul>
  </nav>
</header>

<main>
  <h1>Your account</h1>

  <!-- FIX 2: every icon control has a text name, and the icon is hidden from
       assistive technology. The purpose is now in the accessibility tree, so a
       tool can replace the glyph with a symbol set the user recognises -
       Bliss, Widgit, or simply larger plain words. -->
  <ul class="bar">
    <li><button type="button" class="button button--secondary">
      <span aria-hidden="true">🏠</span><span class="visually-hidden">Home</span></button></li>
    <li><button type="button" class="button button--secondary">
      <span aria-hidden="true">🔍</span><span class="visually-hidden">Search</span></button></li>
    <li><button type="button" class="button button--secondary">
      <span aria-hidden="true">🗑</span><span class="visually-hidden">Delete</span></button></li>
    <li><button type="button" class="button button--secondary">
      <span aria-hidden="true">⚙</span><span class="visually-hidden">Settings</span></button></li>
  </ul>

  <section aria-labelledby="orders-h">
    <h2 id="orders-h">Recent orders</h2>
    <p>Order #1041 — 3 March</p>
  </section>
</main>

<!-- FIX 3: non-essential content is in a complementary landmark, clearly
     labelled, so it can be identified and suppressed. -->
<aside aria-labelledby="ad-h">
  <h2 id="ad-h">Advertisement</h2>
  <p>Buy a tote bag.</p>
</aside>

<footer>
  <p id="a">Riverline Books</p>
</footer>

<!-- Honest note: 1.3.6 was written with a "personalisation semantics"
     specification in mind that has not been widely implemented, so there are
     few tools today that consume this metadata. It is still worth doing, for
     two reasons: the landmark and naming work benefits screen reader users
     immediately under 1.3.1 and 4.1.2, and it costs almost nothing once you
     are writing semantic HTML anyway. -->

How to test it

Check that landmarks, controls, and icons carry semantics or ARIA that identify their purpose, so a personalisation layer can act on them.

  • Automated

    Landmark presence can be checked automatically; semantic correctness of every component's declared purpose cannot.

    This demo's failure is not machine-detectable. axe's landmark-one-main and region rules would catch the missing landmarks here, but both are tagged best-practice rather than as WCAG rules, so a scan scoped to conformance never runs them. And the deeper requirement - that a personalisation tool could identify each control's purpose - is not something any rule evaluates.

    Relevant axe rules:

    • landmark-one-main
    • region

  • Keyboard

    Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

  • Screen reader

    Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

  • Visual

    Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

In the specification