WCAG 2.2 Guideline “1.3.6 Identify Purpose” Level AAA

Introduction

WCAG 2.2’s “1.3.6 Identify Purpose” requires that the purpose of user interface components, icons, and regions implemented using markup languages be programmatically identifiable. This ensures that assistive technologies can correctly interpret these components’ purposes and provide appropriate support to users.

This article provides a detailed guide for beginners on implementing this guideline using HTML, CSS, and JavaScript.

1. Why Identifying Purpose is Important

Icons, buttons, and sections (regions) that visually convey information must have their roles and purposes programmatically identifiable. This benefits users by:

• Supporting visually impaired users: Assistive technologies can communicate the purpose of components, enabling easier navigation and understanding.
• Aiding users with cognitive disabilities: Clear definitions make content more accessible and user-friendly.

2. Implementation Methods

a. Using ARIA Landmarks to Identify Page Regions

ARIA landmarks help define key regions within a page.

HTML Example

<header role="banner">
  <h1>Web Accessibility Guidelines</h1>
</header>

<nav role="navigation" aria-label="Main Navigation">
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
  </ul>
</nav>

<main role="main">
  <section id="section1">
    <h2>Content of Section 1</h2>
    <p>This is where the main content is located.</p>
  </section>
</main>

<footer role="contentinfo">
  <p>© 2024 Web Accessibility Guidelines</p>
</footer>

Key Points

• Use roles like role="banner", role="main", and role="navigation" to identify primary page regions.
• Add aria-label for more specific descriptions of each region’s purpose.

b. Clarifying the Purpose of Icons

For icons used to convey information, use aria-label or alt attributes to ensure screen readers can communicate their purpose.

HTML Example

<button aria-label="Search">
  <img src="search-icon.png" alt="Search">
</button>

Key Points

• Use aria-label to communicate the purpose of the icon to screen readers.
• Always include alt attributes for image-based icons.

c. Identifying the Purpose of Form Elements

Use attributes like aria-required and aria-invalid to specify the purpose and state of form elements.

HTML Example

<form>
  <label for="email">Email Address:</label>
  <input type="email" id="email" name="email" aria-required="true">
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" aria-required="true" aria-invalid="false">
</form>

Key Points

• Use aria-required="true" to indicate required fields.
• Use aria-invalid="true" to convey error statuses.

d. Leveraging HTML Semantics

Utilize semantic HTML5 elements to clearly define page structure and purposes of sections.

HTML Example

<article>
  <header>
    <h2>Article Title</h2>
  </header>
  <p>This is the body of the article.</p>
</article>

Key Points

• Use elements like <article>, <aside>, and <section> to convey the meaning of content clearly.

3. Common Pitfalls and Solutions

a. Failing to Specify the Purpose of Icons

Failure Example

<button>
  <img src="search-icon.png">
</button>

• Screen readers cannot interpret the icon’s purpose.

Solution

<button aria-label="Search">
  <img src="search-icon.png" alt="Search">
</button>

b. Omitting Landmarks

Failure Example

<div id="header">
  <h1>Website Title</h1>
</div>

Solution

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

4. Accessibility Benefits

a. Improved Support for Screen Readers

Assistive technologies can accurately convey the roles and purposes of components, making content more navigable for visually impaired users.

b. Enhanced User Experience

Clearly defined purposes improve usability for users with cognitive disabilities or those unfamiliar with the interface.

Conclusion

WCAG 2.2’s “1.3.6 Identify Purpose” focuses on programmatically defining the purposes of components and regions to enhance accessibility.

Key Implementation Points

1. Use ARIA landmarks to identify page regions.
2. Clarify the purpose of icons and buttons with aria-label and alt attributes.
3. Specify the states of form elements (e.g., required, invalid) using aria-* attributes.
4. Utilize semantic HTML to define page structure clearly.

By following these practices, you can create web content that is more inclusive and accessible to all users.

We have released UUU Web Accessibility, a tool designed to simplify the adoption of web accessibility. If you are interested in improving accessibility, please check it out!