HTML Accessibility (ARIA, Labels, Roles)
Accessibility (or a11y) means designing your website so that everyone, including people with disabilities, can use and navigate it effectively.
HTML has built-in features to support this. Plus, with ARIA and some smart practices, you can make your site inclusive and user-friendly.
👁️ Why Accessibility Matters
- Over 1 billion people live with some form of disability.
- Many rely on screen readers, keyboard navigation, or voice tools.
- Accessibility also improves SEO and overall usability.
🧱 1. Use Semantic HTML First!
Semantic tags like <nav>
, <main>
, <header>
, <article>
, etc., already help screen readers understand the layout.
Prefer:
<article>
<h2>Blog Title</h2>
</article>
Over:
<div class="article">
<h2>Blog Title</h2>
</div>
🖼️ 2. Use alt
Text for Images
Always describe meaningful images with the alt
attribute:
<img src="author.jpg" alt="Photo of W3Buddy">
- Decorative images? Use
alt=""
(empty string). - Don’t write “Image of…”—screen readers already say it’s an image.
🧾 3. Labels for Inputs
Use <label>
properly to associate with form fields.
<label for="email">Email:</label>
<input type="email" id="email" name="email">
Or wrap the input:
<label>
Email:
<input type="email" name="email">
</label>
🗂️ 4. Use ARIA (Accessible Rich Internet Applications) – When Needed
Use ARIA roles, labels, and properties if native HTML doesn’t do the job.
Examples:
<div role="button" tabindex="0" aria-pressed="false">Click Me</div>
Common ARIA Roles:
Role | Use Case |
---|---|
button | For custom clickable items |
navigation | Mark navigation areas |
dialog | Popups or modals |
alert | Important messages |
⚠️ Use ARIA only when necessary. Native HTML is preferred and often better supported.
🎯 5. Keyboard Accessibility
Ensure all functionality can be accessed via keyboard:
- Use
tabindex="0"
to make custom elements focusable. - Add
Enter
orSpace
key support for interactive elements.
<div role="button" tabindex="0" onclick="doSomething()" onkeypress="handleKey(event)">
Click me
</div>
And the script:
function handleKey(e) {
if (e.key === 'Enter' || e.key === ' ') {
doSomething();
}
}
🔍 6. Roles and Landmarks
Landmark roles help screen reader users skip to main content quickly.
Tag / Role | What It Identifies |
---|---|
<nav> / role="navigation" | Site navigation |
<main> / role="main" | Primary content |
<header> / role="banner" | Page header |
<footer> / role="contentinfo" | Footer |
These are mostly built-in with semantic HTML, but you can add role
manually if needed.
✅ 7. Common Checklist for Accessibility
- All images have meaningful
alt
attributes - Every form input has a
<label>
- Semantic HTML is used for structure
- Interactive elements are keyboard accessible
- Use ARIA roles only when needed
- Color contrast is readable
- Don’t rely only on color to convey meaning
🧪 Bonus: Accessible Link Example
<a href="/download" aria-label="Download the PDF of HTML Tutorial">
<i class="icon-download"></i>
</a>
Screen readers will read the clear label instead of just “icon.”
✨ Summary
Accessibility is not optional—it’s a must for modern web development.
Use:
- Alt text for images
- Labels for inputs
- Roles and ARIA only where necessary
- Semantic HTML as your default tool
And you’ll already be way ahead in creating an inclusive site.
📘 Next Topic: HTML Advanced Topics