Portfolio Accessibility Audit: How Semantic HTML Boosted Lighthouse Score to 100/100

Why Web Accessibility Matters: How I Fixed My Portfolio

Developer Mercy Muiruri conducted an accessibility audit on her portfolio using Chrome DevTools Lighthouse and the WAVE tool. The audit revealed broken HTML syntax and deceptive link references that had been undermining screen reader navigation.

Why This Matters

Non-semantic HTML forces screen readers to treat entire webpages as unstructured walls of text, making navigation extremely frustrating for users with disabilities. The fix required correcting just a few structural tags and link attributes to achieve a perfect accessibility score, demonstrating that small changes yield outsized impact on inclusive design.

Key Insights

• Semantic HTML with tags like
  ,
• Broken syntax—e.g., a
  list accidentally closed with an tag—invalidates HTML and throws off assistive technology parsing (portfolio audit, 2026).
  • Deceptive link references, where anchor text says ‘MDN Web Docs’ but href points to GitHub, confuse users relying on audio descriptions (portfolio audit, 2026).
  • The WAVE tool and Lighthouse are effective for detecting structural issues like missing semantic elements and invalid markup (developer audit, 2026).
  • Proper image alternative text combined with semantic layout updates yields a perfect 100/100 accessibility score (Lighthouse, 2026).

  Working Examples

  Semantic HTML fix replacing generic

  layout with clear structural landmarks for assistive tools.

  <header>
    <h1>Mercy's Portfolio</h1>
    <nav>
      <a href="index.html">Home</a>
    </nav>
  </header>

  Practical Applications

  • Use semantic tags like
  • Validate all HTML syntax—especially closing tags for lists—to prevent broken parser behavior that blocks screen readers from reading items cleanly.
  • Ensure every anchor element has accurate href values matching the visible link text, avoiding deceptive pairings that confuse audio-browsed navigation.
  • Run automated audits with tools like Lighthouse and WAVE before deployment to catch structural issues early; even one invalid tag can drop a score below 100.

  References:

  • https://dev.to/mercymuirurihue/why-web-accessibility-mattershow-i-fixed-my-portfolio-2g4d