Auger Móra

Posted on Mar 4 • Edited on Mar 6

How to Create Accessible Websites for People with Disabilities

#webaccessibility #frontend #inclusion #ux

Hey everyone! 👋

Let’s be real—most of us don’t think about web accessibility until we have to. I was the same. When I started building websites, my focus was on design, performance, and making things look cool. But then I worked on a project where accessibility was a must, and I realized...

🚨 I had been unknowingly building websites that some people couldn’t even use. 🚨

That hit me hard. Imagine needing the internet for work, school, or even ordering food—but struggling because a website isn’t designed for you. So, I did a deep dive into accessibility, and now I want to share what I’ve learned.

Here’s how to make your websites usable for everyone—not just those with perfect vision, hearing, or motor skills.

1. Use Semantic HTML (Your Future Self Will Thank You) 🏗️

I used to throw <div>s everywhere like confetti. Turns out, that’s terrible for accessibility (and SEO).

Why it matters:

✅ Screen readers rely on proper tags to understand content.

✅ Less work for you later—semantic HTML improves structure and makes styles easier to apply.

Easy Fixes:

❌ Bad: <div class="button">Click me</div>

✅ Good: <button>Click me</button>

❌ Bad: <div class="nav"> (just use <nav>)

✅ Good: <nav> ... </nav>

Using the right HTML tags means assistive technologies can interpret your site properly—without weird workarounds.

2. Color Contrast: Not Everyone Sees Like You Do 🎨

I love a good aesthetic website, but let’s be honest—some designs prioritize beauty over usability. Ever seen light gray text on a white background? Yeah, don’t do that.

Test Your Colors:

✅ Use tools like WebAIM Contrast Checker.

✅ Aim for a 4.5:1 contrast ratio for text (big text can be 3:1).

✅ Don’t rely only on color for meaning (e.g., “Red = Error” isn’t helpful for colorblind users).

Small fix, huge impact.

3. Make Your Website Keyboard-Friendly ⌨️

Some people can’t use a mouse due to motor disabilities. Your site should work with just a keyboard (or other assistive devices).

Try this challenge:

👉 Go to your website and navigate using only Tab, Enter, and Arrow keys.

Can you access everything?
Does it skip important links?
Are you stuck somewhere?

If your site breaks without a mouse, it’s time for fixes:

Best Practices:

✅ Use button instead of clickable <div>s (buttons are naturally keyboard-friendly).

✅ Ensure forms and links can be accessed via Tab key.

✅ Add :focus styles so users know where they are when tabbing.

If you’ve never done this before, trust me—it’s an eye-opener.

4. Add Alternative Text for Images (Alt Text = Super Important) 🖼️

I used to completely ignore alt text. I figured, “Eh, the image is just decorative.” But for blind users who rely on screen readers, missing alt text = missing information.

Quick Guide:

✅ For meaningful images:

<img src="profile.jpg" alt="John Doe, smiling with a coffee cup">

✅ For decorative images:

<img src="stars.png" alt=""> (Empty alt hides it from screen readers, which is fine for purely decorative elements).

Rule of thumb: If removing the image removes meaning, it needs alt text.

5. Caption Videos & Provide Transcripts 📽️

Imagine watching a tutorial without sound—would you still understand it? That’s the experience for deaf or hard-of-hearing users when videos have no captions.

What to do:

✅ Use closed captions for videos (YouTube auto-captions are a start, but they’re not perfect).

✅ Provide text transcripts for audio content.

✅ Don’t rely solely on audio for instructions—offer visual alternatives.

Your content should be accessible to those who can’t hear or process audio easily.

6. Forms: Don’t Make Users Guess What to Type 📝

Forms can be a nightmare if they’re not accessible. Imagine filling out a form with no labels, vague errors, or no guidance.

Make Forms Better:

✅ Use <label> for inputs (not just placeholder text).

✅ Make error messages clear (instead of just “Invalid input”).

✅ Ensure form fields have a logical order (so screen readers don’t jump randomly).

❌ Bad Example:

<input type="text" placeholder="Enter your name">

✅ Good Example:

<label for="name">Full Name:</label>  
<input type="text" id="name" name="name">

This tiny fix improves both accessibility and user experience.

7. ARIA: When HTML Needs a Little Help 🏗️

Sometimes, default HTML doesn’t cover everything. That’s where ARIA (Accessible Rich Internet Applications) helps.

👉 Use ARIA when there’s no built-in semantic HTML option.
✅ Example: Making a custom dropdown accessible

<div role="combobox" aria-expanded="false">
  <div role="option">Option 1</div>
  <div role="option">Option 2</div>
</div>

🚨 BUT! Don’t overuse ARIA—if regular HTML works, use that instead.

Final Thoughts: Accessibility Benefits EVERYONE 🚀

Here’s the thing—accessibility isn’t just for people with disabilities. It helps:

✅ Users with slow internet (text loads faster than images).
✅ People in noisy environments (captions help in loud places).
✅ Elderly users (better readability, easier navigation).
✅ EVERYONE.

I used to think accessibility was extra work. But once I started, I realized it’s just about good design—and it makes the web better for everyone.

Want a challenge?

Take your own website and try using it with only a keyboard or a screen reader. You’ll be surprised what you learn!

DEV Community