WCAG 1.3.1 Info and Relationships (Level A)

This page demonstrates correct and incorrect ways to convey information and relationships in web content

Goal: Information about content structure is available to more people.
What to do: Use code to reinforce relationships and information conveyed through presentation.
Why it's important: People can adapt the presentation to suit their needs while preserving the original meaning.

Proper Use of Headings and Lists

Fruits

Apple
Banana
Cherry

Vegetables

Carrot
Broccoli
Spinach

Table with Semantic Markup

Contact Information
Name	Email	Role
Alice	alice@example.com	Manager
Bob	bob@example.com	Developer

Form Grouped with Fieldset and Legend

Incorrect Example: Visual Grouping Only

Personal Info

This section only uses visual cues (borders and bold text) to indicate grouping. Screen readers will not detect any relationship between the fields.

Key Points Demonstrated:

Semantic HTML is used to convey structure (headings, lists, tables, forms).
Relationships between content are programmatically determinable (e.g., <fieldset> and <legend> for form groups).
Information is not conveyed by visual cues alone; proper markup is provided for assistive technologies.
A contrasting incorrect example shows why semantics matter for accessibility.