General Assembly logo

Lab 3: Accessible Forms & Media Integration

Introduction

Digital accessibility ensures that all users, including those using assistive technologies, can interact with your web content. In this lab, you'll design an accessible feedback form that integrates multimedia (images, audio, or video), and then use an AI accessibility checker to identify gaps in your implementation. Finally, you’ll manually fix accessibility issues based on the AI-generated report.

This lab focuses on building with semantic HTML and WCAG-compliant media alternatives, while reinforcing how AI can support (not replace) engineering judgment.

Learning Objectives

By the end of this lab, you will be able to:

  • Build a fully functional, accessible HTML feedback form
  • Apply WCAG 2.1 AA best practices for form labels, landmarks, and keyboard navigation
  • Integrate accessible multimedia (captioned video, alt-texted image, or audio descriptions)
  • Use an AI-powered accessibility audit tool to find gaps
  • Manually correct accessibility issues identified by the audit
  • Understand how browser dev tools and screen readers interact with form structure
  • Reflect on the role and limits of AI in accessibility engineering

Getting Started

Prerequisites

Before beginning this lab, ensure you have:

  • Basic knowledge of HTML/CSS
  • Understanding of semantic HTML (labels, headings, alt text, etc.)
  • A modern browser (Chrome or Firefox recommended)
  • A code editor (VS Code recommended)
  • Access to an online AI accessibility checker (e.g., WAVE, axe DevTools, Chrome Lighthouse, or ChatGPT’s "Check Accessibility" feature if available)

No JavaScript is required for this lab.

Setup Instructions

  1. Create a new folder named lab3_accessible_forms
  2. Create an index.html file inside the folder
  3. Open the folder in VS Code (or your preferred editor)

Lab Structure

This lab contains the following recommended files:

  • README.md – Lab instructions and overview
  • index.html – Main file for building your accessible form
  • instructor_guide.md – Optional teaching notes and discussion prompts

Exercise Overview

You will build an accessible feedback form that includes:

  • Text inputs (name, email)

  • A multi-line feedback textarea

  • A rating component (radio buttons or select dropdown)

  • At least one multimedia element:

    • image (with alt text)
    • video (with captions + transcript)
    • audio (with transcript)

Then you will:

  1. Run an AI accessibility audit
  2. Fix all issues
  3. Re-run the audit to confirm improvements
  4. Answer reflection questions

How to Work Through the Lab

  1. Build the form using semantic HTML
  2. Add multimedia and apply proper accessibility attributes
  3. Run an accessibility audit using any AI or automated tool
  4. Manually fix violations
  5. Validate accessibility again
  6. Complete reflection questions included at the end
  7. Optional: test with a screen reader (NVDA, VoiceOver)

Part 1 - Build the Base Form

Create the following form structure:

Required elements:

  • <form> with aria-labelledby or <h1> as a visible title

  • Name field with <label for="...">

  • Email field with validation (e.g., type="email")

  • Feedback textarea

  • Rating field (1–5) using either:

    • radio buttons (with a <fieldset> and <legend>), or
    • a <select> dropdown

  • Submit button

Accessibility requirements:

  • Every field must have a visible label
  • Form must have a logical tab order
  • Use semantic landmarks such as <main> or <section>
  • Provide error messaging placeholders (even if not functional)

TODO: Build this form in index.html.

Part 2 - Integrate Multimedia

Choose one of the following media types and add it below your form:

Option A: Image

  • Add meaningful alt text
  • If decorative, use alt=""

Option B: Video

  • Must include:

    • <track kind="captions">
    • Text transcript (placed below video)

Option C: Audio

  • Include a transcript below the audio element

TODO: Add your chosen media with all accessibility attributes.

Part 3 - Run an AI Accessibility Audit (10 minutes)

Use one of the following automated tools:

  • WAVE Web Accessibility Evaluation Tool
  • Chrome Lighthouse (Accessibility tab)
  • Axe DevTools
  • ChatGPT’s "Check Accessibility" feature

What to check:

  • Missing labels
  • Color contrast issues (if you added styling)
  • Missing alt text
  • Missing captions or transcripts
  • ARIA misuse
  • Missing fieldset/legend
  • Heading hierarchy problems
  • Keyboard focus traps

TODO: Save or copy the audit results.

Part 4 - Apply Manual Fixes (15 minutes)

Using the audit report:

  • Fix every accessibility error

  • Fix all "serious" and "moderate" warnings

  • Review best practices:

    • Use proper heading levels
    • Add accessible names where needed
    • Add transcript or captions
    • Ensure form fields are programmatically associated with labels
    • Add ARIA only when necessary
    • Ensure the form is keyboard navigable

TODO: Update your index.html based on the audit results.

Part 5 - Reaudit & Validate (5 minutes)

Re-run the AI accessibility audit.

You should aim for:

  • 0 errors
  • 0–2 minor warnings

If problems remain, fix them until the page passes.

Reflection Questions (Complete Before Submitting)

  1. What were the top three accessibility issues identified by the AI audit?
  2. Were any issues false positives or over-warnings? What did you learn from them?
  3. Which accessibility fix improved usability the most?
  4. What limitations did you notice in the AI audit tools?
  5. How would you ensure accessibility in a large-scale production system?

Tips for Success

  • Avoid using unnecessary ARIA roles when HTML semantics suffice
  • Test with keyboard only—no mouse
  • Audit early and often
  • Use headings logically (h1 → h2 → h3…)
  • Keep multimedia captions and transcripts human-readable
  • Accessibility is iterative—not a one-time task

Additional Resources

  • W3C Web Content Accessibility Guidelines (WCAG 2.1)
  • WebAIM: Web Accessibility in Mind
  • MDN: Accessibility Guide
  • Deque Axe DevTools Docs
  • Inclusive Design Principles
  • W3C ARIA Authoring Practices

What to Expect After Completing This Lab

You will have:

  • A cleanly structured, accessible HTML form
  • Practical experience using automated auditors
  • Understanding of how AI can accelerate—but not replace—accessibility engineering
  • Fixes informed by real WCAG compliance gaps
  • A solid foundation for building accessible web UI at scale