← Back

Demo 04: Good Accessibility Tree

Proper landmarks, headings, labels — what screen readers love

What good structure looks like

This page demonstrates proper semantic HTML. Compare with Demo 05 (Bad) to see the difference. Open Chrome DevTools → Elements → Accessibility to inspect.

Good Example
This page uses semantic HTML correctly. Screen readers can navigate and understand the content.

1. Header

Good Accessibility Example

</> For developers 
<!-- ✅ Good: semantic header -->
<header>
  <h1>Page Title</h1>
  <button aria-label="Go to homepage">🏠</button>
</header>
Use <header> for the banner. Start with <h1>. Add aria-label to icon-only buttons.

2. Navigation

</> For developers 
<!-- ✅ Good: semantic nav with real links -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/products">View our products</a></li>
    <li><a href="/about">About the company</a></li>
  </ul>
</nav>
Use <nav> with aria-label. Real <a href> links, not spans. Descriptive text, not "Click here".

3. Content with headings

Our Products Section

</> For developers 
<!-- ✅ Good: proper heading hierarchy -->
<h1>Page Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
Headings go in order: h1 → h2 → h3. Never skip levels.
Green laptop computer with accessibility features

Product Name

Some description here.

</> For developers 
<!-- ✅ Good: semantic article -->
<article>
  <img src="..." alt="Green laptop">
  <h3>Product Name</h3>
  <p>Description</p>
  <button>Add to cart</button>
</article>
Use <article> for cards. Image has alt. Title is a heading. Button is a real <button>.

4. Form with labels

Contact Form

</> For developers 
<!-- ✅ Good: form with labels -->
<label for="name">Your name</label>
<input id="name" type="text">

<button type="submit">Send message</button>
Every input has a <label for="id">. Placeholders are NOT labels. Submit is a real <button>.

5. Footer

</> For developers 
<!-- ✅ Good: semantic footer -->
<footer>
  <p>Copyright info</p>
</footer>
Use <footer> for the content info landmark.

Result: Accessibility Tree

Good Accessibility Tree Structure

This is what assistive technologies see (clear structure!):

document ├─ banner // header element │ ├─ heading "Good Accessibility Example" (h1) │ └─ button "Go to homepage" (has aria-label!) │ ├─ navigation "Main navigation" │ ├─ link "View our products" │ ├─ link "About the company" │ └─ link "Contact support" │ ├─ main │ ├─ heading "Our Products Section" (h2) │ ├─ article │ │ ├─ img "Green laptop computer..." (has alt!) │ │ ├─ heading "Product Name" (h3) │ │ └─ button "Add to cart" │ │ │ ├─ heading "Contact Form" (h2) │ └─ form │ ├─ textbox "Your name" (has label!) │ ├─ textbox "Your email" (has label!) │ ├─ textbox "Message" (has label!) │ └─ button "Send message" │ └─ contentinfo // footer element
Compare with Demo 05
Open Demo 05 to see the same content with BAD accessibility structure.