WCAG 2.2 - All Success Criteria

Accessibility Checkpoints

WCAG 2.2 - Success Criterion

1.3.1 Info and Relationships

Level A

Description

Information, structure, and relationships conveyed through visual presentation must also be programmatically determinable - or available in text. Screen readers and assistive technologies cannot infer meaning from visual layout alone. Structure must be expressed in the HTML itself.

How To Test

  1. Open the page in a browser.
  2. Inspect the table markup using browser DevTools.
  3. Look for <th> elements in header rows or columns. If all cells use <td>, this is a failure.
  4. Check that <th> elements have a scope attribute where the table has both row and column headers.
  5. Use a screen reader (NVDA + Firefox, JAWS + Chrome, or VoiceOver + Safari):
    • Navigate into the table using the table navigation key (T in NVDA browse mode).
    • Move through cells with arrow keys.
    • Listen for whether the screen reader announces the column or row header along with each data cell.
  6. If no header context is announced, the criterion fails.

Testing Tools

Demo

Table structure: semantic headers
Name Department Score
Alice Engineering 92
Bob Design 87
Carol QA 95

Why this fails

All cells use <td>. Screen readers treat them as plain data with no column context. A user navigating by cell hears "Name", "Department", "Score" without knowing these are headers.

Why this passes

Header cells use <th scope="col"> inside <thead>. Screen readers can announce "Score column, Carol: 95" - the relationship is programmatically defined.

Code
Heading structure

Section One

This section discusses the fundamentals of accessibility. It is visually large and bold, but it is marked up as a paragraph element.

Subsection A

This is supporting content under the first subsection. A screen reader user will not know this is a subsection - it sounds like a regular paragraph.

Subsection B

More content. The visual hierarchy suggests this is a subheading, but the HTML does not reflect that structure.

Why this fails

Using <p><strong> styled to look like a heading may look correct visually, but screen reader users hear no heading semantics. They cannot use heading navigation keys (H in NVDA) to jump between sections, and the document structure is invisible to assistive technology.

Why this passes

Using semantic heading elements <h1>–<h6> with a proper hierarchy conveys document structure to assistive technology. Screen reader users can navigate by heading level, understand relationships between sections, and locate content quickly.

Code

Demo 3: Form Controls Not Grouped With Labels

Form control grouping demo

Checkboxes and their text labels are separate — screen readers announce "checkbox, not checked" with no indication of what the checkbox is for. Found in 15 real-world audits.

Filter by category
Electronics
Furniture
Clothing

Tab through — screen reader says "checkbox, not checked" but never says what category.

Code

Demo 4: Price Context Not Conveyed

Price context demo

Two prices displayed — the strikethrough is only visual. Screen readers announce "$569.99 $512.99" with no way to know which is original and which is the sale price. Found in 8 real-world audits.

Ergonomic Office Chair

$569.99 $512.99

Screen reader: "$569.99 $512.99" — no context about which is old vs new price.

Code

Demo 5: List Structure Not Conveyed

List structure demo

Navigation links styled to look like a list, but using <div> and line breaks. Screen readers see flat text with no list semantics.

No list semantics — screen reader can't announce "list, 4 items" or navigate by list item.

Code

Fail Explanation

When a table uses only <td> elements for all cells - including the header row - screen readers announce every cell as plain data with no column context. A user navigating by table cell hears values like "Name", "Score", "Rank" with no indication that these are column headers. The relationship between the header and data cells is invisible to assistive technology.

Pass Explanation

Using <th> elements for header cells, with an appropriate scope attribute (scope="col" for column headers, scope="row" for row headers), allows screen readers to announce context. When a user navigates to a data cell, the screen reader can say "Score column, Alice: 92" - conveying the structural relationship programmatically.

Notes

This is one of the most commonly failed WCAG criteria. It applies beyond tables - heading levels (<h1>–<h6>), list markup (<ul>, <ol>, <li>), and landmark roles are all part of 1.3.1. A visually styled bold paragraph that functions as a heading but uses <p><strong> instead of an <h> element also fails this criterion.

Techniques

WCAG techniques used in this demo: H39, H42, H44, H48, H73, H85, ARIA16

Suggested Solutions & References

Curated from 94 real-world audit findings and official WCAG guidance.

Official W3C / WAI

MDN Web Docs

Guides