Goal
Ensure that information, structure, and relationships conveyed visually (like headings, lists, tables, or emphasis) are also programmatically determinable or available in text so assistive technologies can interpret them accurately.
This guideline focuses on making the underlying HTML structure reflect what’s visually communicated on screen.
For example:
- If text looks like a heading, it should use a proper
<h1>–<h6>tag. - If content is presented as a list, use
<ul>or<ol>, not line breaks and dashes. - If information is in a table, use proper
<th>and<td>elements.
Screen readers rely on these semantic relationships to help users understand layout and context.
Without them, users who are blind, low-vision, or using assistive tech may lose critical meaning or hierarchy.
Example Issues and Fixes
Headings styled visually but not marked up semantically
Fail
<div class="flex flex-col items-center justify-center gap-4 p-8">
<div class="text-3xl font-bold m-0">Our Services</div>
<p>We provide design, development, and consulting.</p>
</div>
Our Services
We provide design, development, and consulting.
Pass
<div class="flex flex-col items-center justify-center gap-4 p-8">
<h2 class="!text-3xl !font-bold !m-0 !font-primary">Our Services</h2>
<p>We provide design, development, and consulting.</p>
</div>
Our Services
We provide design, development, and consulting.
Visual list without list markup
Fail
<div class="flex flex-col items-start justify-start gap-4 p-8">
<p>
- Web Design<br>
- App Development<br>
- SEO Optimization
</p>
</div>
– Web Design
– App Development
– SEO Optimization
Pass
<div class="flex flex-col items-start justify-start gap-4 p-8">
<ul class="list-disc pl-6">
<li>Web Design</li>
<li>App Development</li>
<li>SEO Optimization</li>
</ul>
</div>
- Web Design
- App Development
- SEO Optimization
Table layout without semantic roles
Fail
<div class="flex flex-col items-start justify-start w-full gap-4 p-8">
<div class="grid grid-cols-2 w-full border-2 border-gray-300">
<div class="font-semibold p-3 border-b-2 border-r-2 border-gray-300">Plan</div>
<div class="font-semibold p-3 border-b-2 border-gray-300">Price</div>
<div class="p-3 border-b-2 border-r-2 border-gray-300">Basic</div>
<div class="p-3 border-b-2 border-gray-300">$10</div>
<div class="p-3 border-r-2 border-gray-300 bg-gray-100">Pro</div>
<div class="p-3 bg-gray-100">$30</div>
</div>
</div>Plan
Price
Basic
$10
Pro
$30
Pass
<div class="flex flex-col items-start justify-start gap-4 px-8">
<table class="w-full border-collapse border text-left">
<thead class="bg-gray-100">
<tr>
<th class="border p-2">Plan</th>
<th class="border p-2">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border p-2">Basic</td>
<td class="border p-2">$10</td>
</tr>
<tr>
<td class="border p-2">Pro</td>
<td class="border p-2">$30</td>
</tr>
</tbody>
</table>
</div>| Plan | Price |
|---|---|
| Basic | $10 |
| Pro | $30 |
Quick Checklist
- Headings use
<h1>–<h6>tags instead of styled<div>or<p>. - Lists use
<ul>,<ol>, and<li>instead of line breaks or symbols. - Tables use
<table>,<th>, and<td>correctly. - Form labels and groupings (e.g.,
<fieldset>+<legend>) are properly marked up. - Visual cues (bold, color, indentation) are supported by proper HTML structure.