Karishma
Back to Blogs

Code with compassion: How small changes create inclusive web experiences

September 28, 2025
Image credit: Sigmund on Unsplash

In our world of fast-paced sprints and tight deadlines, it's easy to feel the pressure to ship code quickly. We've all been there, pushing a project to production with the best of intentions, knowing there were a few "minor" details we could get to later.


Accessibility is almost always one of those details. It's an easy thing to overlook when no one is explicitly asking for it, a checkbox we feel like we covered in a course we took years ago. I learned this the hard way that ignoring it isn't just a technical oversight; it's a profound failure of empathy.


My wake-up call came when a client was concerned about a lawsuit, and suddenly, I had one week to bring an entire e-commerce site up to AA-level compliance. During that week, I was shocked to discover the immense power we hold as developers to make the web a more inclusive place.


While HTML is often dismissed in our community, it is the foundation of accessible design. Here are some of the critical lessons I learned that week.

1. Navigation & Focus

Users who rely on a keyboard or screen reader often have a difficult time navigating complex pages. The simplest, most compassionate solution is to make their journey intentional.

  • Add a "skip to main content" button: This should be the first focusable element on the page. It's a crucial detail that helps users skip repetitive navigation links and go straight to the content.

HTML

<a href="#main-content" class="skip-link">Skip to main content</a>
<main id="main-content">
  </main>

CSS

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #fff;
  padding: 8px;
  z-index: 100;
  color: #000;
  /* Make it visible on focus */
}
.skip-link:focus {
  top: 0;
}
  • Ensure visible focus states: All interactive elements must have a clear visual focus state (like a bold outline) when they are tabbed to. This is essential for keyboard navigation.
  • Use logical tabindex order: Ensure all interactive elements on a page are keyboard-accessible and that their tabindex is in a logical order that follows the visual flow of the page.

2. Semantic Content

When a screen reader encounters an image, icon, or a non-semantic element, it needs to know what it is. A common mistake is to assume visual context is enough.

  • Treat HTML as a semantic blueprint: While <div>s can do anything, they tell screen readers nothing. Using semantic HTML is the most foundational act of respect you can show your users.

HTML

<div class="header">...</div>
<div class="content">...</div>

vs

<header>...</header>
<main>...</main>
  • Give every image an alt attribute: Always use an an alt attribute to provide a descriptive text for images. If the image is purely for decorative purposes, an empty alt="" can be used so screen readers will skip it.
  • Provide descriptive text for buttons: For buttons that don't have text (like a social media icon), use an aria-label to add a descriptive text. This ensures a screen reader can announce the button's purpose.

HTML

<button aria-label="Close">
  <img src="close-icon.svg" />
</button>

3. Performance & Layout

Accessibility also involves a predictable and stable user experience. Unexpected layout shifts or slow load times can be disorienting for many users.

  • Set explicit image dimensions: Images should have a preset width and height to avoid sudden layout shifts (Core Web Vitals). This also helps screen readers determine image size for layout purposes.
  • Use the <picture> tag: For responsive images, use the <picture> element to serve correctly sized images at different screen sizes. This improves performance, which is also a key part of accessibility.

4. User Control & Empathy

Compassionate design puts the user in control, allowing them to customise their experience for their specific needs.

  • Give users control over motion: For users with vestibular disorders or photosensitivity, rapid or complex animations can be disorienting or even harmful. Always provide a way for users to disable animations via a toggle button, and honour the prefers-reduced-motion media query.
  • Avoid intrusive pop-ups: Do not use pop-ups that appear after a certain time or scroll position, as they can be difficult for some users to dismiss.
  • Allow error recovery: Users should be able to easily correct errors in a form and receive clear, accessible error messages.
  • Use confirmation modals for critical actions: Before a user performs any critical action, like deleting data or an account, show a confirmation modal to prevent accidental data loss.

A Developer's Mindset

Don't wait for someone else to tell you that a website needs to be accessible. Start incorporating accessible coding habits in your code from the start. This is not a new feature; it's a basic coding practice that everyone should follow.

Why this matters

Accessibility is not just a checklist; it's a mindset. It forces us to think about the user experience in a way we never had to before. Beyond the legal risks, there are powerful business and human reasons to make your website accessible:

  • It's an act of empathy. By building for others, we create a more inclusive web for everyone.
  • It's good for business. Accessible websites have a wider audience, better SEO, and a stronger brand reputation.
  • It's a mark of a senior dev. A senior developer takes ownership of the entire user experience, not just the code that makes it work.

Final thoughts

That one week of accessibility work taught me more about being a developer than any framework or library ever has. It showed me that code is not just instructions for a machine, it's a way to impact real people's lives.


Accessibility is not an optional feature, a checkbox, or a legal obligation. It is an act of empathy. Every skip link, every alt attribute, every semantic tag is a small but meaningful way to say: "You belong here too. Your experience matters."


When we build with compassion, we make the web more inclusive, more usable, and more human. And in the process, we become better developers, not just technically, but ethically and thoughtfully.


The power is in our hands. Every website, every interface, every interaction is an opportunity to make the web a place for everyone. Start small, start today, but never stop thinking about the people who use what you create.

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." — Tim Berners-Lee

Resources I found extremely helpful