Skip to main content

Featured

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!)

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!) Congratulations, developer! 👏 You’ve successfully completed the 45-Day React.js Roadmap — from understanding the fundamentals to mastering advanced concepts like Redux, Routing, Testing, and Deployment. 📘 What You’ve Learned ✅ React basics — Components, JSX, Props, and State ✅ Hooks — useState, useEffect, useRef, useMemo, and Custom Hooks ✅ Context API and Redux Toolkit for global state management ✅ Routing with React Router & Protected Routes ✅ Data fetching using Fetch API, Axios, React Query ✅ Advanced Patterns — Compound Components, Render Props, HOCs ✅ Styling — CSS Modules, Styled Components, Theming ✅ Animations, Accessibility, Testing, and Performance Optimization ✅ Deployment on Vercel, Netlify, or GitHub Pages 🧩 Final Project Ideas Now that you’re done, build real-world apps to polish your skills: 📝 Task ...
Post a Comment
Read more

Day 7: Semantic HTML & ARIA (Accessibility)

📘 Day 7: Semantic HTML & ARIA (Accessibility)

Semantic HTML gives meaning to content so browsers, search engines and assistive technologies (screen readers) can understand your page structure. ARIA (Accessible Rich Internet Applications) adds extra accessibility info for dynamic/UI widgets when native elements aren’t enough.

1. Semantic HTML — the building blocks

Use these semantic elements instead of generic <div> whenever appropriate:

  • <header> — page or section header, usually logo + nav
  • <nav> — group of navigation links
  • <main> — main content (only one per page)
  • <article> — independent, self-contained content (blog post, news item)
  • <section> — thematic grouping of content (use headings)
  • <aside> — complementary content (sidebars, ads, related links)
  • <footer> — page or section footer
  • <figure> & <figcaption> — images with captions

Why semantics matter

  • Improves accessibility for screen reader users.
  • Helps search engines understand and index content better (SEO).
  • Produces cleaner, more maintainable markup for developers.

2. Good semantic structure — example

<header>
  <h1>My Blog</h1>
  <nav> <a href="#">Home</a> <a href="#">About</a> </nav>
</header>

<main>
  <article>
    <h2>Post Title</h2>
    <p>Post intro...</p>
  </article>

  <aside>
    <h3>Related</h3>
    <ul><li>Link 1</li></ul>
  </aside>
</main>

<footer>© 2025 My Site</footer>

3. ARIA — when and how to use it

ARIA provides roles, states and properties to enhance accessibility of dynamic UIs. Use native HTML first — only add ARIA when native semantics don’t exist.

Common ARIA attributes

  • role — explains what the element is (e.g., role="navigation", role="button").
  • aria-label — provides a label (useful when text label is not visible).
  • aria-labelledby — references an element that labels the current element.
  • aria-hidden="true" — hides decorative content from assistive tech.
  • aria-expanded — indicates if a collapsible region is open (true|false).
  • aria-live — announce dynamic updates (polite, assertive).

ARIA example — accessible menu button

<button id="menuBtn" aria-label="Open main menu" aria-expanded="false" aria-controls="mainNav">☰ Menu</button>

<nav id="mainNav" role="navigation">
  <a href="#">Home</a>
  <a href="#">Contact</a>
</nav>

Update aria-expanded to true when the menu is opened so screen readers know the state.

Try it yourself — Semantic layout + ARIA

Edit the code and click Run Code. The example includes a “Skip to content” link, semantic tags, and ARIA attributes for the nav button.


Practice Tasks

  1. Build a page skeleton using semantic tags and ensure heading order (H1 > H2 > H3).
  2. Add ARIA attributes to a custom widget (e.g., collapsible FAQ) and test with a screen reader emulator.
  3. Create a skip-link and test keyboard navigation (Tab key) to ensure focus order.

Project of the Day

Create a small blog layout (header, nav, article, aside, footer) with accessible forms and ARIA attributes where appropriate. Validate structure with an accessibility checker (Lighthouse, WAVE).

Comments

Post a Comment