• Success Criterion 1.3.1
  • Conformance level A

Card Layout Grouping With No Programmatic Structure Behind It

1.3.1 — Info and Relationships

Scenario

Setting

A video-conferencing app's meeting controls

What’s wrong

Visual grouping by borders/cards (e.g., pricing tiers) with no programmatic grouping or headings.

Example 

<div class="control-card">
  <div>Microphone</div>
  <div>Speaker</div>
  <div>Camera</div>
</div>

Why it matters

A screen reader user hears Microphone, Speaker, Camera as three unrelated lines, missing that they're grouped as Audio and Video settings.

How to test

Look for a heading or programmatic group (fieldset, role="group" with a name) above visual card/section groupings: pure border/spacing grouping with no code equivalent fails.

How to fix

A visual card border implies grouping to sighted users; a fieldset and legend or a heading say the same thing in code.

<fieldset class="control-card">
  <legend>Audio and video settings</legend>
  <div>Microphone</div>
  <div>Speaker</div>
  <div>Camera</div>
</fieldset>

Outcome

A participant hears Audio and Video settings before the individual controls, understanding how they relate.

Who is affected

Screen reader users adjusting call settings can't tell which controls belong together as one settings group.

Learn more

Related scenarios