Web Accessibility Fundamentals

Understanding Web Accessibility

Web accessibility means designing websites and applications that can be used by everyone, including people with disabilities. These disabilities might include visual, auditory, physical, speech, cognitive, or neurological limitations.

Think of web accessibility like building architecture. Just as physical buildings need ramps, elevators, and wide doorways to be accessible to everyone, websites need certain features to ensure all users can navigate and interact with content effectively.

Why Accessibility Matters

Ethical and inclusive: Everyone deserves equal access to information and services
Legal requirement: Many countries have laws requiring accessible websites (e.g., ADA in the US, EAA in Europe)
Larger audience: Approximately 15% of the world's population lives with some form of disability
Better for everyone: Accessible sites are often easier to use for all people
SEO benefits: Many accessibility practices also improve search engine rankings

The WCAG Guidelines

The Web Content Accessibility Guidelines (WCAG) provide a framework for making web content accessible. These guidelines are organized around four principles, often remembered by the acronym POUR:

flowchart TD A[Web Accessibility
WCAG Principles] --> B[Perceivable] A --> C[Operable] A --> D[Understandable] A --> E[Robust] B --> B1[Content can be perceived
by all users] C --> C1[Interface can be operated
by all users] D --> D1[Content and operation
is understandable] E --> E1[Content can be interpreted
by various user agents]

WCAG Conformance Levels

Level A: Minimal accessibility - addresses major barriers
Level AA: Good accessibility - addresses significant barriers (most common target)
Level AAA: Optimal accessibility - provides enhanced accessibility

HTML: The Foundation of Accessibility

HTML is inherently accessible when used correctly. Many accessibility issues arise from improper HTML usage or relying too heavily on CSS and JavaScript for essential functions.

Semantic HTML for Accessibility

The semantic HTML elements we discussed in the previous lecture are fundamental to accessibility:

Screen readers announce semantic elements like headings, allowing users to navigate efficiently
Properly structured content helps users with cognitive disabilities understand relationships between content
Semantically defined landmarks make navigation easier for assistive technology users

Accessibility Tree

Browsers create two trees from HTML: the DOM tree for rendering and the Accessibility Tree for assistive technologies. Proper HTML ensures this tree is useful.

flowchart TD A[HTML Document] --> B[DOM Tree
For visual rendering] A --> C[Accessibility Tree
For assistive technologies] B --> D[Visual Users] C --> E[Screen Reader Users]

Essential Accessibility Practices

1. Proper Document 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>
  <!-- Properly structured content here -->
</body>
</html>

Key aspects to note:

The lang attribute helps screen readers use the correct pronunciation
A descriptive title element helps users understand the page's purpose
The viewport meta tag ensures proper display on mobile devices

2. Proper Heading Structure

Headings create an outline of your document, much like a table of contents in a book. They should follow a logical hierarchy.

Good Practice

<h1>Website Title</h1>
<section>
  <h2>Main Section Title</h2>
  <p>Introduction text...</p>
  
  <h3>Subsection Title</h3>
  <p>Subsection content...</p>
  
  <h3>Another Subsection</h3>
  <p>More content...</p>
</section>

<section>
  <h2>Another Main Section</h2>
  <p>Section content...</p>
</section>

Poor Practice

<div>Website Title</div> <!-- No semantic heading -->
<div>
  <h3>Main Section Title</h3> <!-- Skipped h2 level -->
  <p>Introduction text...</p>
  
  <h1>Subsection Title</h1> <!-- Used h1 incorrectly -->
  <p>Subsection content...</p>
  
  <div class="looks-like-heading">Another Subsection</div> <!-- Styled div instead of heading -->
  <p>More content...</p>
</div>

3. Alternative Text for Images

Alternative text (alt text) provides a textual alternative to non-text content like images. It's essential for users who cannot see images.

Effective Alt Text Examples

<!-- Informative image with good alt text -->
<img src="chart-2025-sales.png" alt="Bar chart showing quarterly sales growth of 15% in Q1, 22% in Q2, 18% in Q3, and 25% in Q4 of 2025">

<!-- Decorative image that should be ignored by screen readers -->
<img src="decorative-divider.png" alt="">

<!-- Image in a link with alt text describing the destination -->
<a href="about.html">
  <img src="about-icon.png" alt="About Us Page">
</a>

Think of alt text like audio description in movies. Just as audio description narrates visual elements for blind viewers, alt text describes images for screen reader users.

4. Forms and Labels

Forms need proper labeling to be accessible. Every input should have an associated label.

Accessible Form Example

<form>
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
  </div>
  
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </div>
  
  <fieldset>
    <legend>Subscription Type</legend>
    
    <div>
      <input type="radio" id="basic" name="subscription" value="basic">
      <label for="basic">Basic</label>
    </div>
    
    <div>
      <input type="radio" id="premium" name="subscription" value="premium">
      <label for="premium">Premium</label>
    </div>
  </fieldset>
  
  <button type="submit">Subscribe</button>
</form>

Note that this form uses:

label elements that are correctly associated with inputs using the for attribute
fieldset with legend to group related controls
Native button element instead of a styled div

5. Links with Purpose

Links should make sense out of context. Screen reader users often navigate by tabbing through links.

Accessible vs. Inaccessible Links

<!-- Good: Link text describes destination -->
<p>Learn more about our <a href="services.html">web development services</a>.</p>

<!-- Poor: "Click here" doesn't describe destination -->
<p>To see our services, <a href="services.html">click here</a>.</p>

<!-- Poor: URL as link text -->
<p>Visit <a href="https://example.com">https://example.com</a> for more information.</p>

Keyboard Accessibility

Many users navigate websites using only a keyboard. This includes people with motor disabilities, visual impairments, or those using alternative input devices.

Essential Keyboard Accessibility Requirements

Focus indication: Visual indication of which element has keyboard focus
Logical tab order: Interactive elements should be navigable in a logical sequence
Keyboard traps: Users should never get "trapped" in a component
Access to all functionality: Everything done with a mouse should be possible with a keyboard

Common Issues to Avoid

<!-- Avoid: Div used as a button with no keyboard support -->
<div class="button" onclick="submitForm()">Submit</div>

<!-- Better: Native button element with keyboard support -->
<button type="button" onclick="submitForm()">Submit</button>

<!-- Avoid: Link with no href isn't keyboard accessible -->
<a onclick="showMenu()">Menu</a>

<!-- Better: Link with href or button element -->
<a href="#menu" onclick="showMenu()">Menu</a>

Focus Styles

Never completely remove focus styles. If you don't like the browser defaults, replace them with your own visible focus indicators.

Customizing Focus Styles

/* Don't do this - it removes focus indication */
:focus {
  outline: none;
}

/* Better approach - replace with custom focus styles */
:focus {
  outline: none;
  box-shadow: 0 0 0 3px #4d90fe;
  border-radius: 3px;
}

Color and Contrast

Color should never be the only means of conveying information, and text should have sufficient contrast against its background.

Color Contrast Requirements

WCAG 2.1 Level AA requires:

Text has a contrast ratio of at least 4.5:1 against its background (3:1 for large text)
User interface components and graphics have a contrast ratio of at least 3:1

Color as Information

<!-- Poor: Using only color to indicate required fields -->
<label style="color: red;">Name:</label>
<input type="text">

<!-- Better: Using both color and an indicator -->
<label>Name: <span class="required" aria-label="required">*</span></label>
<input type="text" required>

ARIA: Enhancing HTML Accessibility

Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content more accessible, especially for dynamic content and advanced interface controls.

Important Rule: No ARIA is better than bad ARIA. Only use ARIA when necessary, and follow the First Rule of ARIA: If you can use a native HTML element, do so instead of using ARIA.

Common ARIA Attributes

ARIA Landmark Roles

<!-- Use semantic HTML when possible -->
<header>Site header content</header>
<nav>Navigation content</nav>
<main>Main content</main>

<!-- Use ARIA when semantic HTML isn't possible -->
<div role="banner">Site header content</div>
<div role="navigation">Navigation content</div>
<div role="main">Main content</div>

ARIA for Dynamic Content

<!-- A toggle button that controls a menu -->
<button aria-expanded="false" aria-controls="menu-content">
  Toggle Menu
</button>

<div id="menu-content" aria-hidden="true">
  <!-- Menu content -->
</div>

<!-- Script would toggle these attributes -->
<script>
  const button = document.querySelector('button');
  const menu = document.getElementById('menu-content');
  
  button.addEventListener('click', () => {
    const expanded = button.getAttribute('aria-expanded') === 'true';
    button.setAttribute('aria-expanded', !expanded);
    menu.setAttribute('aria-hidden', expanded);
  });
</script>

ARIA Live Regions

<!-- Alerts that need immediate attention -->
<div role="alert">Your session will expire in 2 minutes.</div>

<!-- Status messages that should be announced but aren't urgent -->
<div aria-live="polite">Your changes have been saved.</div>

<!-- Content that updates frequently but shouldn't be announced -->
<div aria-live="off">Updated 2 seconds ago</div>

Testing for Accessibility

Testing is crucial to ensure your website is truly accessible. Use a combination of automated and manual testing.

Automated Testing Tools

Lighthouse: Built into Chrome DevTools
WAVE: Web Accessibility Evaluation Tool
axe: Accessibility testing engine
HTML Validators: Check for valid HTML which is fundamental to accessibility

Manual Testing Approaches

Keyboard navigation: Try using your site without a mouse
Screen reader testing: Learn to use screen readers like NVDA (Windows), VoiceOver (Mac), or JAWS
Zoom testing: Ensure your site works at 200% zoom
Text-only testing: View your site with styles disabled
Color contrast checking: Use tools to verify sufficient contrast

Basic Accessibility Checklist

Page has proper heading structure
All images have appropriate alt text
Color is not the only means of conveying information
Text has sufficient contrast against background
All form controls have associated labels
Page is navigable using only a keyboard
All interactive elements have a visible focus indicator
Document has proper language attribute
Page has a descriptive title
ARIA is used appropriately and only when necessary

Real-World Case Study: E-commerce Product Page

Let's examine common accessibility issues on an e-commerce product page and how to fix them:

Issue 1: Product Image Gallery

Inaccessible Implementation

<div class="gallery">
  <img src="product-main.jpg">
  <div class="thumbnails">
    <img src="thumb1.jpg" onclick="changeImage('product1.jpg')">
    <img src="thumb2.jpg" onclick="changeImage('product2.jpg')">
    <img src="thumb3.jpg" onclick="changeImage('product3.jpg')">
  </div>
</div>

Accessible Implementation

<figure class="gallery">
  <img src="product-main.jpg" alt="Red cotton t-shirt with crew neck, front view" id="main-image">
  <figcaption>Product views - click thumbnails to enlarge</figcaption>
  
  <div class="thumbnails">
    <button type="button" onclick="changeImage('product1.jpg', 'Front view of red t-shirt')" aria-label="View front of t-shirt">
      <img src="thumb1.jpg" alt="">
    </button>
    
    <button type="button" onclick="changeImage('product2.jpg', 'Side view of red t-shirt')" aria-label="View side of t-shirt">
      <img src="thumb2.jpg" alt="">
    </button>
    
    <button type="button" onclick="changeImage('product3.jpg', 'Back view of red t-shirt')" aria-label="View back of t-shirt">
      <img src="thumb3.jpg" alt="">
    </button>
  </div>
</figure>

<script>
  function changeImage(src, altText) {
    const mainImage = document.getElementById('main-image');
    mainImage.src = src;
    mainImage.alt = altText;
  }
</script>

Issue 2: Color Selection

Inaccessible Implementation

<div class="color-options">
  <div class="color-label">Colors:</div>
  <div class="color red" onclick="selectColor('red')"></div>
  <div class="color blue" onclick="selectColor('blue')"></div>
  <div class="color green" onclick="selectColor('green')"></div>
</div>

Accessible Implementation

<div class="color-options">
  <fieldset>
    <legend>Select a Color:</legend>
    
    <div>
      <input type="radio" name="color" id="red" value="red">
      <label for="red" class="color-label">
        <span class="color-swatch red"></span>
        Red
      </label>
    </div>
    
    <div>
      <input type="radio" name="color" id="blue" value="blue">
      <label for="blue" class="color-label">
        <span class="color-swatch blue"></span>
        Blue
      </label>
    </div>
    
    <div>
      <input type="radio" name="color" id="green" value="green">
      <label for="green" class="color-label">
        <span class="color-swatch green"></span>
        Green
      </label>
    </div>
  </fieldset>
</div>

Practical Exercise: Accessibility Audit

Exercise: Identify and Fix Accessibility Issues

Review the following code snippet and identify as many accessibility issues as you can. Then, rewrite it to be fully accessible.

<div>
  <div style="font-size: 24px; font-weight: bold;">Contact Us</div>
  <div>
    Name
    <input type="text">
  </div>
  <div>
    Email
    <input type="text">
  </div>
  <div>
    <div style="color: red;">* Required Field</div>
    Message
    <textarea></textarea>
  </div>
  <div style="background-color: blue; color: white; padding: 10px; display: inline-block;" onclick="submitForm()">
    SEND
  </div>
  <img src="contact.jpg">
</div>

Summary and Key Takeaways

Accessibility benefits everyone: Creating accessible websites improves the experience for all users
POUR principles: Make content Perceivable, Operable, Understandable, and Robust
Semantic HTML first: Use proper HTML elements as the foundation of accessibility
Text alternatives: Provide alternatives for non-text content
Keyboard accessibility: Ensure all functionality works with a keyboard
Color and contrast: Don't rely solely on color and ensure sufficient contrast
ARIA when needed: Use ARIA to enhance accessibility, but only when HTML isn't enough
Test thoroughly: Combine automated and manual testing methods

Understanding Web Accessibility

Why Accessibility Matters

The WCAG Guidelines

WCAG Conformance Levels

HTML: The Foundation of Accessibility

Semantic HTML for Accessibility

Accessibility Tree

Essential Accessibility Practices

1. Proper Document Structure

2. Proper Heading Structure

Good Practice

Poor Practice

3. Alternative Text for Images

Effective Alt Text Examples

4. Forms and Labels

Accessible Form Example

5. Links with Purpose

Accessible vs. Inaccessible Links

Keyboard Accessibility

Essential Keyboard Accessibility Requirements

Common Issues to Avoid

Focus Styles

Customizing Focus Styles

Color and Contrast

Color Contrast Requirements

Color as Information

ARIA: Enhancing HTML Accessibility

Common ARIA Attributes

ARIA Landmark Roles

ARIA for Dynamic Content

ARIA Live Regions

Testing for Accessibility

Automated Testing Tools

Manual Testing Approaches

Basic Accessibility Checklist

Real-World Case Study: E-commerce Product Page

Issue 1: Product Image Gallery

Inaccessible Implementation

Accessible Implementation

Issue 2: Color Selection

Inaccessible Implementation

Accessible Implementation

Practical Exercise: Accessibility Audit

Exercise: Identify and Fix Accessibility Issues

Summary and Key Takeaways

Further Reading