Welcome 👋

Why Accessibility Isn’t Optional (and Never Was)

July 31, 2025 (3w ago)

How Accessibility Changed the Way I Build the Web

Okay, it's been a few months now of optimizing multiple web projects with accessibility improvements, and it has completely changed my perspective on how a digital experience is even experienced.

Have you ever experienced a webpage through a screen reader?

If you're reading this, probably not.
If you're hearing this, you'll understand just how much improving a site’s accessibility can dramatically shift your perception of the web.

What I Thought Accessibility Was (Spoiler: I Was Wrong)

When I first thought about accessibility, I imagined it meant bumping up contrast, making sure buttons were keyboard-friendly, and checking boxes on a compliance tool.

Turns out, accessibility is a bit more than that. It’s about building interfaces that are truly usable by people of all abilities. That includes users who rely on screen readers, navigate only with a keyboard, or experience color in ways many of us don't think about.

Listening to the Web (Literally)

One of the most humbling experiences? Turning on a screen reader and trying to navigate one of my own sites.
It felt like someone took a puzzle, shook the pieces in a bag, and poured them into my ears. No context. No structure. Just a mess.

That’s when I started learning about the power of semantic HTML and ARIA attributes.

Here are some tags and attributes that completely changed things:

📌 <nav>

Wrap your primary navigation in this. It lets screen readers announce, "Navigation landmark", so users know where the menus live.

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
  </ul>
</nav>

Why it matters: Without it, a screen reader just sees a pile of links. With it, it’s like giving them a map—and nobody wants to backpack across a site blindfolded.

📝 <label> with for

Forms without labels are like IKEA furniture without instructions—confusing and possibly dangerous.

<label for="email">Email:</label>
<input type="email" id="email" />

Why it matters: The label ensures screen readers can say “Email Address input” instead of just “Edit text”. Super helpful when you’re not looking at the screen.

🔊 aria-live="polite"

Great for things that update dynamically, like toast messages or loading states.

<div aria-live="polite">
  {#if isLoading}
    <p>Loading your results...</p>
  {/if}
</div>

Why it matters: It politely (not abruptly) tells assistive tech that something has changed. Think of it as the digital version of “Pardon the interruption…”.

🎯 role="button" (when using non-semantic elements)

<div role="button" tabindex="0" onclick={handleClick}>
  Click me!
</div>

Why it matters: Screen readers don’t know your <div> is clickable unless you tell them. This gives it a proper identity.

Bonus tip: Please just use if you can. Don’t reinvent the click.

What Most People Forget

  1. Focus states

A lot of us love to do this:

*:focus {
  outline: none;
}

Why? Because they “don’t like the blue outline.” Well, guess what—people who navigate by keyboard REALLY need that outline. It’s their version of a mouse pointer. If you're styling focus, style it better, don’t remove it.

  1. Heading hierarchy matters

Don’t jump from an <h1> to an <h4> just because it "looks better" in the design.

Assistive tech users often use headings to navigate. Skipping levels is like tearing out pages from a table of contents.

  1. Alt text isn't optional

If your site has images and no alt text, a screen reader will just say “image” or worse—read the file name. Yes, “IMG_28743_final_final_NEW2.png” out loud. Think of the children.

<img src="/hero.jpg" alt="Family enjoying a backyard barbecue" />

If the image is purely decorative, use:

<img src="/decorative.jpg" alt="" role="presentation" />

The Unexpected Joy of Doing It Right

Once I started treating accessibility like a core feature instead of a compliance checklist, something cool happened:

And hey, if my mom ever uses a screen reader, I want her to feel like the site was built just for her.

Final Thought: It can be a lot, but it’s worth it.

Accessibility can feel overwhelming at first, but it’s like learning to ride a bike. At first, you wobble and fall, but soon you’re cruising down the street with the wind in your hair. (not mine, I’m basically bald)

If you’ve never tried navigating your site without a mouse or through a screen reader, give it a shot today. It might surprise you—and it’ll definitely humble you.

Tools I Recommend

Got questions? Need a starting point?
Just start small: write better alt text. Use actual buttons. Don’t skip heading levels. It all stacks up.

And remember: if the web is for everyone, then build like you mean it.

LinkedIn