HTML Accessibility

Advanced ~12 min read

Why Accessibility Matters

Web accessibility ensures that websites are usable by everyone, including people with:

Visual impairments (blindness, low vision, color blindness)
Hearing impairments
Motor impairments
Cognitive disabilities

Image Alt Text

The alt attribute is read by screen readers and shown when images fail to load:

HTML

CSS

<!-- Good: Descriptive alt text -->\n<img src="dog.jpg" alt="Golden retriever playing fetch in a park">\n\n<!-- Bad: Non-descriptive -->\n<img src="dog.jpg" alt="image">\n\n<!-- Decorative images: Empty alt -->\n<img src="decoration.jpg" alt="">

Form Labels

Every form input needs an associated label for screen reader users:

HTML

CSS

<form>\n  <!-- Good: Label with for attribute -->\n  <label for="email">Email Address:</label>\n  <input type="email" id="email" name="email">\n  \n  <!-- Also Good: Wrapped label -->\n  <label>\n    Phone Number:\n    <input type="tel" name="phone">\n  </label>\n</form>

ARIA Attributes

ARIA (Accessible Rich Internet Applications) provides extra information to assistive technologies:

HTML

CSS

<!-- Navigation landmark -->\n<nav aria-label="Main navigation">\n  <a href="/">Home</a>\n  <a href="/about">About</a>\n</nav>\n\n<!-- Button with description -->\n<button aria-label="Close dialog">\n  X\n</button>\n\n<!-- Live region for updates -->\n<div aria-live="polite" id="status">\n  Form submitted successfully!\n</div>

Skip Links

Allow keyboard users to skip repetitive navigation:

HTML

CSS

<!-- Skip to main content link -->\n<a href="#main-content" class="skip-link">\n  Skip to main content\n</a>\n\n<header>Navigation here...</header>\n\n<main id="main-content">\n  <h1>Page Content</h1>\n  <p>Main content starts here.</p>\n</main>

Accessibility Checklist

Use semantic HTML elements
Add alt text to all meaningful images
Label all form inputs
Ensure sufficient color contrast
Make all functionality keyboard accessible
Use proper heading hierarchy
Provide skip navigation links
Don't rely on color alone to convey information

Testing Tip: Try navigating your site using only the keyboard (Tab, Enter, Arrow keys) to test accessibility.

Previous Meta Tags & SEO

Why Accessibility Matters

Image Alt Text

Form Labels

ARIA Attributes

Skip Links

Accessibility Checklist

Quick Quiz

Enjoying these tutorials?