aria-label is way more important than you think! 😎
Hello beautiful human, my accessibility-loving darling 💖
Today I’m here with a mix of HTML, a pinch of empathy, and lots of
“Why didn’t I do this sooner?” moments.
Imagine a website:
- The design is stunning ✨
- Animations are flying 🛸
- The code is neat, indents perfectly aligned 🧼
But then…
- 👩🦯 A screen reader user gets lost on the site
- ⌨️ A keyboard-only user can’t reach the button
- 🧠 Someone with reading difficulties can’t understand the content
At that moment, the site is basically saying:
“I’m not for everyone.” 😬
But what do we say?
The web is for everyone. ♿💙
If you’re ready, let’s dive into the world of HTML Accessibility 🚀
🤔 What Is Accessibility? (And Who Is It For?)
Accessibility (short and sweet: a11y, because of the 11 letters in between 😄) aims to make websites usable by everyone.
Who is it for?
- Visually impaired users 👁️🦯
- Hearing-impaired users 👂
- Users with limited motor skills 🖐️
- People with attention or reading difficulties 🧠
A little surprise 🎁
Accessibility isn’t just for people with disabilities:
- People trying to read a screen under bright sunlight ☀️
- Users with a broken mouse ⌨️
- Elderly users 👵
- People on slow internet connections 🐢
An accessible site = a better user experience 😌
🧠 Why Is Accessibility So Critical?
Because:
- ❌ An inaccessible site gets abandoned
- ❌ Users get frustrated
- ❌ Google frowns 😐
But an accessible site means:
- ✔️ Better SEO
- ✔️ Longer visit duration
- ✔️ More users
Google’s secret love language:
User experience ❤️
🏗️ 1. Semantic HTML: The Foundation of Accessibility
The very first step in accessibility: using the right tag in the right place.
❌ Wrong Usage
<div onclick="goHome()">Home</div>
What a screen reader thinks:
“A div… but what does it do?” 🤨
✅ Correct Usage
<button>Home</button>
Why?
- Screen readers recognize it
- It’s accessible via keyboard
- Browsers know exactly what it is
Most Important Semantic Tags
<header>
<nav>
<main>
<section>
<article>
<footer>
Semantic HTML = self-explaining code 🗣️
🖼️ 2. Images and alt: Seeing for Those Who Can’t
❌ The Most Common Mistake
<img src="product.jpg">
❌ Even Worse
<img src="product.jpg" alt="image">
✅ Correct Usage
<img src="product.jpg" alt="A black laptop on a wooden table">
Decorative Images
<img src="line.png" alt="">
alttext = the story of the image 📖
🏷️ 3. aria-label: Invisible but Vital
When Do You Need aria-label?
- Buttons without visible text
- Icon-only links
- Elements whose meaning isn’t obvious from the symbol
❌ Problematic Example
<button>🔍</button>
✅ Accessible Example
<button aria-label="Search">🔍</button>
aria-label= a secret whispered to screen readers 💌
⚠️ Warning:
Don’t use aria-label unnecessarily.
First semantic HTML, then ARIA.
⌨️ 4. Keyboard Accessibility: Life Exists Without a Mouse
Ask yourself:
“Can I use this site without a mouse?” 🤔
❌ Wrong
<div onclick="submitForm()">Submit</div>
✅ Correct
<button type="submit">Submit</button>
The Focus Issue
button:focus {
outline: 3px solid #000;
}
Removing focus = leaving users in the dark 🌑
🎨 5. Color, Contrast, and the Reality of Color Blindness
❌ Wrong Approach
- “Red means error, green means success”
✅ Correct Approach
- Color + icon + text
<span class="error">❌ An error occurred</span>
Color alone is not a message 🎨
🧾 6. Form Accessibility: Let’s Make It Less Painful
❌ Wrong
<input type="email" placeholder="Email">
✅ Correct
<label for="email">Email</label>
<input id="email" type="email">
Error Message Example
<p id="error" role="alert">Email is required</p>
Placeholders are temporary, labels are forever ❤️
🧪 7. Mini Accessibility Checklist
- ✔️ Are
alttexts filled in? - ✔️ Is the heading order correct? (
h1→h2) - ✔️ Can you navigate everything with a keyboard?
- ✔️ Is
aria-labelreally necessary? - ✔️ Is the contrast sufficient?
Every ✔️ = a fairer web 🌍
