HTML Accessibility (ARIA, Labels, Roles)

ADVERTISEMENT

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:

RoleUse Case
buttonFor custom clickable items
navigationMark navigation areas
dialogPopups or modals
alertImportant 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 or Space 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 / RoleWhat 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

ADVERTISEMENT