WCAG 2.2 Guideline “1.3.1 Info and Relationships” Level A

Introduction

WCAG 2.2’s “1.3.1 Info and Relationships” requires that information, structure, and relationships in web content are correctly marked up to be programmatically determinable by assistive technologies (e.g., screen readers). This guideline ensures that web content is more accessible to users with visual impairments or those relying on assistive technologies.

This article provides a beginner-friendly explanation of the guideline, with examples of how to implement it using HTML, CSS, and JavaScript.

1. Importance of Info and Relationships

Web content often conveys information through:

• Structured elements like headings and paragraphs
• Data organized in tables or lists
• Visual emphasis through color or font styles

However, relying solely on visual cues excludes users who rely on assistive technologies. Properly marking up information structure and relationships ensures accessibility for all users.

2. Requirements and Implementation Basics

a. Use Semantic HTML

Semantic HTML provides built-in elements for clearly conveying the structure of information.

Proper Use of Headings

Headings (<h1> to <h6>) should be used hierarchically to organize content.

HTML Example

<h1>Basics of Web Accessibility</h1>
<h2>The Importance of Headings</h2>
<p>Using proper headings clarifies the structure of your content.</p>

Key Points

• Use headings in sequential order (e.g., <h1> followed by <h2> and <h3>).
• Ensure the headings summarize the page’s content effectively.

Proper Use of Lists

Use ordered (<ol>) and unordered (<ul>) lists to structure grouped information.

HTML Example

<h2>Steps to Learn Web Development</h2>
<ol>
  <li>Learn HTML</li>
  <li>Learn CSS</li>
  <li>Learn JavaScript</li>
</ol>

Proper Use of Data Tables

Use <th> for header cells and <td> for data cells, ensuring clear relationships between them.

HTML Example

<table>
  <caption>Web Accessibility Guidelines</caption>
  <thead>
    <tr>
      <th>Criterion Number</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.1.1</td>
      <td>Provide text alternatives for non-text content</td>
    </tr>
    <tr>
      <td>1.3.1</td>
      <td>Ensure info and relationships are programmatically determinable</td>
    </tr>
  </tbody>
</table>

Key Points

• Use <caption> to describe the table’s purpose.
• Use the scope attribute in <th> elements to clarify row or column relationships.

b. Use ARIA Attributes for Supplementary Info

When HTML alone is insufficient, ARIA (Accessible Rich Internet Applications) attributes can provide additional context.

Associating Labels with Form Elements

HTML Example

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</form>

Marking Up Landmarks

HTML Example

<nav aria-label="Primary Navigation">
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About Us</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

c. Avoid Reliance on Color or Style Alone

Information should not be conveyed solely through visual styling.

Example of Incorrect Implementation

<p style="color: red;">This field is required.</p>

Improved Implementation

<p>This field is <strong>required</strong>.</p>

3. Implementation Considerations

• Preserve Logical Order
  Ensure content’s reading order matches its visual presentation.
• Separate Structure and Presentation
  Use HTML for structure and CSS for styling to maintain clarity.

4. Benefits of Accessibility

Adhering to this guideline provides significant benefits:

• For Screen Reader Users: Clear structure and relationships improve navigation and comprehension.
• For Users with Cognitive Disabilities: Well-structured content helps in organizing and understanding information.

Conclusion

WCAG 2.2’s “1.3.1 Info and Relationships” is essential for creating accessible web content that is structured and easily interpreted by assistive technologies.

• Use semantic HTML to define content structure.
• Enhance with ARIA attributes when necessary.
• Avoid conveying information solely through visual styles.

By implementing this guideline, even beginners can create web content that is inclusive and accessible to all users!

For a simplified way to enhance web accessibility, explore UUU Web Accessibility, a tool designed to streamline accessibility integration.