Programmatically Identify the Purpose of Components, Icons, and Regions

Disabilities Affected: Cognitive

Success Criterion: 1.3.6

Level: AAA

In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.

Why It Matters

Users with cognitive disabilities may benefit from assistive technologies or browser extensions that can adapt the presentation of common controls or regions (like navigation, main content, search) by adding familiar icons or styles. This requires these common elements to be programmatically identifiable using standardized semantics.

Fixing the Issue

Use standardized HTML5 sectioning elements (<nav>, <main>, <aside>, <header>, <footer>, <section>, <article>) and ARIA landmark roles (role=”search”, role=”navigation”, role=”main”, etc.) correctly to identify regions of the page. For common icons representing specific functions (e.g., print, save, delete), consider using standardized ARIA roles or properties if available, or ensure their accessible names are clear and consistent. Use autocomplete attributes (WCAG 1.3.5) for common input purposes.

Good Code Example

Using HTML5 elements and ARIA landmarks to identify regions:

Markup

<body>
  <header> <h1>Site Title</h1>
    <nav aria-label="Main navigation">
      <ul>...</ul>
    </nav>
    <form action="/search" role="search">...</form>
  </header>

  <main>
    <h2>Page Content</h2>
    ...
  </main>

  <aside>
    <h3>Related Links</h3>
    ...
  </aside>

  <footer>
    <p>Copyright info...</p>
  </footer>
</body>

Bad Code Example

Using generic <div> elements without semantic roles:

Markup

<body>
  <div class="header-style">
     <h1>Site Title</h1>
     <div class="nav-style">...</div>
     <div class="search-style">...</div>
  </div>
  <div class="main-style">...</div>
  <div class="sidebar-style">...</div>
  <div class="footer-style">...</div>
  </body>

Search Ultimate Guide

Free eBook

Integrating Accessibility Compliance Into Your Budget

A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling

Learn More

Need Help with Compliance?

Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.

Schedule Consult