← Back

Demo 05: Bad Accessibility Tree

Divs everywhere, no labels, broken headings — a nightmare for screen readers

Common accessibility mistakes

This page looks fine visually but is a nightmare for screen readers. It uses divs instead of semantic HTML, skips heading levels, and has unlabeled buttons. Compare with Demo 04 to see the difference.

Warning: Bad Example
DO NOT use these patterns in production! This is intentionally broken for educational purposes.

1. Header

Bad Accessibility Example

</> For developers 
<!-- ❌ Bad -->
<div>
  <h3>Title</h3>
  <button>🏠</button>
</div>

<!-- ✅ Good -->
<header role="banner">
  <h1>Title</h1>
  <button aria-label="Home">🏠</button>
</header>
Use <header role="banner"> instead of div. Start with <h1>, not h3. Add aria-label to icon-only buttons.

2. Navigation

Click here Learn more Read this
</> For developers 
<!-- ❌ Bad: not focusable, not a link -->
<span class="cursor-pointer">Click here</span>

<!-- ✅ Good: real link with descriptive text -->
<a href="/products">View our products</a>
Spans are not focusable or announced as links. Use <a href> with descriptive text, not "Click here".

3. Content with headings

Our Products Section
</> For developers 
<!-- ❌ Bad: skipped levels -->
<h1>Page Title</h1>
<h3>Section</h3>  <!-- skipped h2! -->
<h6>Subsection</h6> <!-- skipped h4, h5! -->

<!-- ✅ Good: sequential -->
<h1>Page Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
Never skip heading levels. Use h1 → h2 → h3 in order. Screen reader users navigate by headings.
Product Name

Some description here.

Click me
</> For developers 
<!-- ❌ Bad -->
<img src="...">
<div class="title">Product</div>
<div onclick="...">Click me</div>

<!-- ✅ Good -->
<img src="..." alt="Red sneakers">
<h3>Product</h3>
<button>Add to cart</button>
Image needs alt text. Titles should be headings. Clickable elements must be <button> — divs aren't focusable.

4. Form without labels

Contact Form

</> For developers 
<!-- ❌ Broken hierarchy -->
<h6>Products</h6>
<h2>Contact</h2>  <!-- h2 after h6?? -->
Heading order is broken — h2 after h6 makes no sense. Screen reader users navigate by heading level.
Submit
</> For developers 
<!-- ❌ Bad: placeholder is not a label -->
<input placeholder="Your name">
<div onclick="...">Submit</div>

<!-- ✅ Good: proper labels -->
<label for="name">Your name</label>
<input id="name" type="text">
<button type="submit">Submit</button>
Placeholders are NOT labels — they disappear on focus. Use <label for="id">. Submit must be a <button>.

5. Footer

Demo 05: Bad Accessibility Tree

</> For developers 
<!-- ❌ Bad -->
<div class="footer">
  <p>Copyright</p>
</div>

<!-- ✅ Good -->
<footer>
  <p>Copyright</p>
</footer>
Use <footer> for the content info landmark, not a styled div.

Result: Bad Accessibility Tree

Bad Accessibility Tree Structure

This is what assistive technologies see (notice the lack of structure):

document ├─ generic // No banner! Just a div │ ├─ heading "Bad Accessibility Example" (h3 - wrong level!) │ └─ button (no accessible name! Just an emoji) │ ├─ generic // No navigation! Just a div │ ├─ generic "Click here" (not a real link!) │ ├─ generic "Learn more" (vague text) │ └─ ...more generic elements │ ├─ generic // No main! Just a div │ ├─ heading "Our Products Section" (h6 - jumped from h3!) │ ├─ generic // Should be article │ │ ├─ img (no alt text!) │ │ ├─ generic "Product Name" (should be heading) │ │ └─ generic "Click me" (not a button!) │ │ │ ├─ heading "Contact Form" (h2 - wrong order!) │ ├─ textbox (no label!) │ ├─ textbox (no label, only placeholder) │ ├─ textbox (no label!) │ └─ generic "Submit" (not a button!) │ └─ generic // No contentinfo! Just a div
Compare with Demo 04
Open Demo 04 to see the same content with GOOD accessibility structure.