loke.dev
❮ Back to Journal

Understanding Web Accessibility for Beginners: A Practical Guide

Introduction

Web accessibility is about ensuring that websites and web applications can be used by everyone, including people with disabilities. It’s not just a nice-to-have feature—it’s a fundamental aspect of good web design and development. In many countries, it’s also a legal requirement.

In this guide, I’ll walk you through the basics of web accessibility, why it matters, and practical steps you can take to make your websites more accessible, even if you’re just starting out.

Why Accessibility Matters

Before diving into the technical details, let’s understand why accessibility is important:

  1. Inclusivity: About 15% of the world’s population lives with some form of disability. Making your website accessible ensures everyone can use it.

  2. Legal requirements: Many countries have laws requiring websites to be accessible, especially for government, education, and business sites.

  3. Better user experience for everyone: Many accessibility features benefit all users, not just those with disabilities.

  4. SEO benefits: Many accessibility practices also improve your site’s search engine optimization.

  5. Larger audience: An accessible website can reach more people, potentially increasing your user base or customer reach.

Understanding Disabilities and Web Usage

People with various disabilities use the web in different ways:

  • Visual impairments: From low vision to complete blindness, these users might use screen readers, screen magnifiers, or high-contrast modes.

  • Hearing impairments: Deaf or hard-of-hearing users need alternatives to audio content, such as captions or transcripts.

  • Motor impairments: People with limited mobility might use keyboard-only navigation, voice commands, or specialized input devices.

  • Cognitive impairments: These include learning disabilities, attention deficit disorders, and memory issues, requiring clear layouts, simple language, and consistent navigation.

Web Content Accessibility Guidelines (WCAG)

The Web Content Accessibility Guidelines (WCAG) are the internationally recognized standards for web accessibility. They’re organized around four principles, often remembered by the acronym POUR:

  1. Perceivable: Information must be presentable to users in ways they can perceive.
  2. Operable: User interface components must be operable by all users.
  3. Understandable: Information and operation must be understandable.
  4. Robust: Content must be robust enough to work with current and future technologies.

WCAG has three levels of conformance: A (minimum), AA (standard), and AAA (enhanced). Most organizations aim for AA compliance.

Getting Started with Accessible HTML

Semantic HTML: The Foundation of Accessibility

Using the right HTML elements for their intended purpose is the first step toward accessibility:

<!-- ❌ Non-semantic approach -->
<div class="header">
  <div class="nav">
    <div class="nav-item">Home</div>
    <div class="nav-item">About</div>
  </div>
</div>
<div class="main-content">
  <div class="title">Welcome to Our Website</div>
  <div class="paragraph">This is some content.</div>
</div>

<!-- ✅ Semantic approach -->
<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <h1>Welcome to Our Website</h1>
  <p>This is some content.</p>
</main>

Semantic HTML helps screen readers and other assistive technologies understand the structure and purpose of your content.

Key Semantic Elements to Use

  • <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> for page structure
  • <h1> through <h6> for headings (in proper hierarchical order)
  • <p> for paragraphs
  • <ul>, <ol>, <li> for lists
  • <button> for clickable buttons (not <div> styled to look like buttons)
  • <a> for links
  • <table> for tabular data (with <th>, <caption>, etc.)
  • <form>, <label>, <input> for forms

Document Structure

Ensure your HTML document has a proper structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Descriptive Page Title</title>
</head>
<body>
  <header>
    <!-- Site header content -->
    <nav>
      <!-- Navigation -->
    </nav>
  </header>

  <main>
    <!-- Main content -->
    <h1>Main Page Heading</h1>
    <!-- Rest of content -->
  </main>

  <footer>
    <!-- Footer content -->
  </footer>
</body>
</html>

Note the lang attribute on the <html> element, which helps screen readers use the correct pronunciation.

Images and Alternative Text

Images need alternative text to be accessible to screen reader users:

<!-- ❌ Inaccessible image -->
<img src="logo.png">

<!-- ✅ Accessible image with alt text -->
<img src="logo.png" alt="Company Logo: A blue circle with a white star">

<!-- For decorative images that don't convey information -->
<img src="decorative-line.png" alt="">

Guidelines for writing good alt text:

  • Be concise but descriptive
  • Convey the purpose and content of the image
  • Don’t start with “Image of” or “Picture of” (screen readers already announce it’s an image)
  • Use empty alt text (alt="") for decorative images

Forms and Labels

Forms are often challenging for users with disabilities. Here’s how to make them more accessible:

<!-- ❌ Inaccessible form -->
<div>
  Email:
  <input type="email">
</div>

<!-- ✅ Accessible form -->
<div>
  <label for="email">Email Address:</label>
  <input type="email" id="email" name="email">
</div>

<!-- Even better with additional accessibility attributes -->
<div>
  <label for="email">Email Address:</label>
  <input
    type="email"
    id="email"
    name="email"
    aria-required="true"
    aria-describedby="email-help"
  >
  <p id="email-help">We'll never share your email with anyone else.</p>
</div>

Key form accessibility features:

  • Associate labels with inputs using the for attribute
  • Use appropriate input types (type="email", type="tel", etc.)
  • Provide clear error messages
  • Group related fields with <fieldset> and <legend>
  • Ensure form controls can be navigated and activated using keyboard only

Color and Contrast

Color should never be the only way to convey information, and text should have sufficient contrast against its background:

/* ❌ Poor contrast */
.text {
  color: #999;
  background-color: #777;
}

/* ✅ Good contrast */
.text {
  color: #fff;
  background-color: #333;
}

WCAG 2.1 AA requires:

  • Text contrast ratio of at least 4.5:1 for normal text
  • Text contrast ratio of at least 3:1 for large text (18pt or 14pt bold)
  • Non-text contrast ratio of at least 3:1 for user interface components and graphics

You can check contrast using tools like:

Keyboard Navigation

Many users navigate websites using only a keyboard. Ensure all interactive elements are keyboard accessible:

<!-- ❌ Not keyboard accessible -->
<div onclick="doSomething()" class="button">Click Me</div>

<!-- ✅ Keyboard accessible -->
<button onclick="doSomething()">Click Me</button>

Key keyboard accessibility features:

  • All interactive elements should be focusable
  • Focus order should be logical and follow the visual layout
  • Focus states should be visible (don’t remove the outline without providing an alternative)
  • Avoid keyboard traps where focus can’t move away from an element

Test keyboard navigation by:

  1. Pressing Tab to move through interactive elements
  2. Pressing Enter to activate links and buttons
  3. Using arrow keys for components like sliders and menus
  4. Ensuring you can access all functionality without a mouse

ARIA: Accessible Rich Internet Applications

ARIA attributes provide additional information to assistive technologies when HTML alone isn’t enough:

<!-- Example: A custom dropdown menu -->
<div role="combobox" aria-expanded="false" aria-controls="dropdown-list">
  Select an option
</div>
<ul id="dropdown-list" role="listbox" aria-hidden="true">
  <li role="option">Option 1</li>
  <li role="option">Option 2</li>
</ul>

Important ARIA concepts:

  • Roles: Define what an element is or does (role="button", role="alert")
  • Properties: Define properties of elements (aria-required="true", aria-disabled="false")
  • States: Define the current state of elements (aria-expanded="true", aria-checked="false")

The first rule of ARIA: Don’t use ARIA if you can use native HTML elements instead. Native elements have built-in accessibility features.

Common ARIA Patterns

Here are some common ARIA patterns for interactive components:

Toggle Buttons

<button aria-pressed="false" onclick="toggleButton(this)">
  Dark Mode
</button>

<script>
function toggleButton(button) {
  const isPressed = button.getAttribute('aria-pressed') === 'true';
  button.setAttribute('aria-pressed', !isPressed);
  // Additional logic to apply the change
}
</script>

Accordion

<div class="accordion">
  <h3>
    <button
      aria-expanded="false"
      aria-controls="section1"
      onclick="toggleAccordion(this)"
    >
      Section 1
    </button>
  </h3>
  <div id="section1" hidden>
    <p>Content for section 1</p>
  </div>

  <!-- More accordion items -->
</div>

<script>
function toggleAccordion(button) {
  const isExpanded = button.getAttribute('aria-expanded') === 'true';
  button.setAttribute('aria-expanded', !isExpanded);

  const sectionId = button.getAttribute('aria-controls');
  const section = document.getElementById(sectionId);
  section.hidden = isExpanded;
}
</script>
<button onclick="openDialog()">Open Dialog</button>

<div
  id="dialog"
  role="dialog"
  aria-labelledby="dialog-title"
  aria-describedby="dialog-desc"
  aria-modal="true"
  hidden
>
  <h2 id="dialog-title">Confirmation</h2>
  <p id="dialog-desc">Are you sure you want to continue?</p>
  <button onclick="closeDialog()">Cancel</button>
  <button onclick="confirm()">Confirm</button>
</div>

Testing for Accessibility

Manual Testing

Basic accessibility testing you can do yourself:

  1. Keyboard navigation: Navigate your site using only the keyboard
  2. Screen reader testing: Use a screen reader like VoiceOver (Mac), NVDA (Windows), or TalkBack (Android)
  3. Zoom testing: Zoom your browser to 200% and check if content is still usable
  4. Color contrast: Use contrast checker tools
  5. Disable styles: View your site with CSS disabled to check the underlying structure

Automated Testing Tools

While not comprehensive, these tools can catch many issues:

Practical Accessibility Checklist

Here’s a practical checklist for making your website more accessible:

Structure and Content

  • Use semantic HTML elements
  • Ensure proper heading hierarchy (h1, h2, etc.)
  • Include a page language (<html lang="en">)
  • Provide descriptive page titles
  • Ensure content is readable and understandable

Images and Media

  • Add alt text to all informative images
  • Provide captions and transcripts for videos
  • Ensure media doesn’t autoplay
  • Make sure media controls are keyboard accessible

Forms and Interaction

  • Label all form fields properly
  • Group related form elements with fieldset and legend
  • Provide clear error messages
  • Ensure all interactive elements are keyboard accessible
  • Make sure focus states are visible

Visual Design

  • Ensure sufficient color contrast
  • Don’t rely on color alone to convey information
  • Support text resizing up to 200% without loss of content
  • Ensure the site is usable at different viewport sizes

ARIA and JavaScript

  • Use ARIA attributes when necessary
  • Ensure dynamic content changes are announced to screen readers
  • Make custom widgets keyboard accessible
  • Test JavaScript-enhanced features with assistive technologies

Real-World Examples

Let’s look at some common components and how to make them accessible:

<nav aria-label="Main">
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

The aria-current="page" attribute indicates the current page in the navigation.

Card Component

<div class="card">
  <img src="product.jpg" alt="Blue t-shirt with white logo">
  <h3><a href="/product/123">Cotton T-Shirt</a></h3>
  <p>Comfortable cotton t-shirt available in multiple colors.</p>
  <p class="price">$19.99</p>
  <button aria-label="Add Cotton T-Shirt to cart">Add to Cart</button>
</div>

A skip link allows keyboard users to bypass navigation and jump straight to the main content:

<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>

  <header>
    <!-- Navigation and header content -->
  </header>

  <main id="main-content">
    <!-- Main content -->
  </main>
</body>

With CSS:

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 8px;
  background-color: #000;
  color: #fff;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

Mobile Accessibility Considerations

Mobile devices present unique accessibility challenges:

  1. Touch targets: Make interactive elements at least 44×44 pixels
  2. Gestures: Provide alternatives for complex gestures
  3. Orientation: Support both portrait and landscape orientations
  4. Zoom: Don’t disable pinch-to-zoom
  5. Screen readers: Test with mobile screen readers (VoiceOver on iOS, TalkBack on Android)

Progressive Enhancement

Progressive enhancement is an approach that aligns well with accessibility:

  1. Start with semantic HTML that works for everyone
  2. Add CSS for visual styling
  3. Add JavaScript for enhanced functionality
  4. Ensure the site remains functional if JavaScript fails

This approach ensures that your site remains usable even when certain technologies aren’t available or supported.

Conclusion

Web accessibility isn’t about checking boxes or meeting minimum requirements—it’s about creating inclusive experiences that work for everyone. By incorporating these practices into your development workflow from the beginning, you’ll build better websites that reach more people.

Remember these key points:

  • Use semantic HTML as your foundation
  • Ensure keyboard accessibility for all interactive elements
  • Provide alternatives for visual and auditory content
  • Test with assistive technologies
  • Think about accessibility from the start of your projects

Making your websites accessible is not just the right thing to do—it’s also good for business, good for SEO, and often required by law. By following the guidelines in this article, you’ll be well on your way to creating more inclusive web experiences.

Further Resources