Using Semantic Tags for Accessibility
Improve Navigation for Screen Readers

Using Semantic Tags for Accessibility: Meaning That Matters

Semantic HTML isn’t just about cleaner code — it’s about communicating structure and purpose to both browsers and people. For users relying on screen readers, these tags transform a flat document into a meaningful experience.

1. What Is Semantic HTML?

Semantic HTML uses tags that describe their meaning in a human- and machine-readable way. Tags like <header>, <nav>, <article>, and <footer> tell assistive technologies what each part of the page is for.

2. Why It Improves Accessibility

When screen readers parse semantic HTML, they can:

• Navigate by regions like main, navigation, and footer
• Skip to sections of interest (e.g., article headlines, sidebars)
• Understand the structure of your page more easily

3. Key Semantic Tags and Their Roles

| Tag | Purpose | |-----|---------| | <header> | Contains page or section headings | | <nav> | Groups links to navigate the site | | <main> | Marks the central content area | | <section> | Groups related content with a heading | | <article> | Self-contained content like posts or news | | <aside> | Side notes or complementary content | | <footer> | Closing content or metadata | | <figure> & <figcaption> | Media with description | | <time> | Human- and machine-readable date/time | | <mark> | Highlights search terms or matches |

4. Basic Example: Semantic Layout

<header>
  <h1>Welcome to Fruit World</h1>
</header>

<nav>
  <a href="#apples">Apples</a>
  <a href="#bananas">Bananas</a>
  <a href="#cherries">Cherries</a>
</nav>

<main>
  <article id="apples">
    <h2>All About Apples</h2>
    <p>Apples are crisp, juicy fruits enjoyed worldwide.</p>
  </article>

  <article id="bananas">
    <h2>Benefits of Bananas</h2>
    <p>Bananas are rich in potassium and fiber.</p>
  </article>

  <article id="cherries">
    <h2>Cherry Facts</h2>
    <p>Cherries come in sweet and tart varieties.</p>
  </article>
</main>

<footer>
  <p>© 2024 Fruit World</p>
</footer>

[ Screen readers announce regions like "Main content", "Article: Cherry Facts", etc. ]

5. Improving the Document Outline

Screen readers and search engines build an outline from your headings and semantic tags. Proper use of <h1> to <h6> and <section> ensures the document is navigable and logical.

Example: Logical Hierarchy

<main>
  <section>
    <h2>Item 1: Apple</h2>
    <p>Details about apple.</p>
  </section>
  <section>
    <h2>Item 2: Banana</h2>
    <p>Details about banana.</p>
  </section>
</main>

6. Semantic Tags vs. ARIA Roles

Semantic HTML often makes ARIA unnecessary. For example:

| Element | Native Role | Should You Add ARIA? | |---------|-------------|-----------------------| | <nav> | navigation | ❌ No | | <main> | main | ❌ No | | <button> | button | ❌ No | | <div role="button"> | button | Necessary (if no <button>) |

7. Summary

Semantic HTML gives structure, improves accessibility, and enhances the user experience for all. You now know how to:

• Use semantic tags like <article>, <nav>, and <main>
• Improve screen reader experience
• Enhance your document’s outline and SEO

What’s Next?

Coming up: We’ll bring semantic and accessible HTML together in a full-page layout — complete with keyboard support and ARIA enhancements where needed.