Back to Module 05 Semantic Structure Bench

If these look the same, does the browser understand them the same way?

Is It Actually a Heading?

Code A

<div class="section-title">
    Upcoming Workshops
</div>

Code B

<h2 class="section-title">
    Upcoming Workshops
</h2>

Rendered

A
Upcoming Workshops
B

Upcoming Workshops

If these look the same, does the browser understand them the same way?

Reveal A is a styled div. B is a heading. The browser can announce B as a heading and users can jump between headings using a screen reader.

Is This a List?

Code A

<div class="list-rows">
    <div class="list-row">Accessible design</div>
    <div class="list-row">Keyboard testing</div>
    <div class="list-row">Screen-reader practice</div>
</div>

Code B

<ul>
    <li>Accessible design</li>
    <li>Keyboard testing</li>
    <li>Screen-reader practice</li>
</ul>

Rendered

A
Accessible design
Keyboard testing
Screen-reader practice
B
  • Accessible design
  • Keyboard testing
  • Screen-reader practice

If these look the same, does the browser understand them the same way?

Reveal A is just a set of divs; B is a real list. A screen reader can announce the number of items and move through them as a list.

Is This Navigation?

Code A

<div class="nav-bar">
    <a href="#">Home</a>
    <a href="#">Schedule</a>
    <a href="#">Resources</a>
</div>

Code B

<nav aria-label="Main navigation">
    <a href="#">Home</a>
    <a href="#">Schedule</a>
    <a href="#">Resources</a>
</nav>

Rendered

A
Home Schedule Resources
B

If these look the same, does the browser understand them the same way?

Reveal Both have links, but only B communicates that this is a navigation landmark. A screen reader can identify and jump to landing areas in the page.

Is This a Label or Just Text?

Code A

<p>Workshop choice</p>
<select>
    <option>Design systems</option>
    <option>Inclusive forms</option>
</select>

Code B

<label for="workshop">Workshop choice</label>
<select id="workshop">
    <option>Design systems</option>
    <option>Inclusive forms</option>
</select>

Rendered

A
Workshop choice
B

If these look the same, does the browser understand them the same way?

Reveal A can be visually associated, but B exposes a proper label relationship. A screen reader can announce the field name more reliably and users can understand the control without guessing.

Are These in the Same Group?

Code A

<div class="checklist">
    <label><input type="checkbox"> Access needs</label>
    <label><input type="checkbox"> Dietary requirements</label>
</div>

Code B

<fieldset>
    <legend>Support needs</legend>
    <label><input type="checkbox"> Access needs</label>
    <label><input type="checkbox"> Dietary requirements</label>
</fieldset>

Rendered

A
B
Support needs

If these look the same, does the browser understand them the same way?

Reveal A is a loose collection of controls. B is a named group. The browser can announce the grouping and help users understand how the options relate to each other.

Is This the Main Content?

Code A

<div class="page">
    <h1>Workshop registration</h1>
    <p>Register for the Friday clinic.</p>
</div>

Code B

<main>
    <h1>Workshop registration</h1>
    <p>Register for the Friday clinic.</p>
</main>

Rendered

A
Workshop registration
Register for the Friday clinic.
B
Workshop registration
Register for the Friday clinic.

If these look the same, does the browser understand them the same way?

Reveal Both may appear the same, but B communicates a document landmark: this is the main content area. Assistive technology can find the primary content more quickly.