PNL Learn

Web Accessibility

Build for everyone and meet WCAG 2.2 AA.

Build pages that work for everyone and meet WCAG 2.2 Level AA, the standard the ADA, Section 508 and the European Accessibility Act point to. You will learn who meets barriers on the web and how WCAG is organized, then write alt text by purpose, captions and transcripts, make every control work by keyboard with a skip link, a logical focus order and a visible focus ring, meet contrast and target size rules, survive 200 percent text and spacing overrides, label forms and describe errors so people can fix them, and use ARIA only where HTML runs out: names, states, landmarks and live regions. Every exercise is graded on what assistive technology really gets: accessible names, roles, states, the tab order, measured contrast and geometry, plus the axe engine, and you will learn what automated tools cannot catch. The course ends by auditing and fixing a signup form, a product page and a news article.

IntermediateHTML and CSS7 lessons70 exercisesAbout 6 h
Create a free account

What you will learn

  • WCAG 2.2 AA
  • Alt text and media alternatives
  • Keyboard and focus
  • Contrast and adaptable content
  • Accessible forms
  • ARIA
  • Accessibility testing

Lessons

  1. 1

    Why Accessibility and How WCAG Works

    Who meets barriers on the web and why the law cares, how WCAG's principles, levels and success criteria are organized, and why meaning belongs in the markup first.

    10 exercises

  2. 2

    Text Alternatives and Media

    Alt text written by purpose (informative, functional, decorative and complex), real text instead of images of text, captions, transcripts and audio description, and motion and flashing people can control.

    10 exercises

  3. 3

    Keyboard, Pointer and Focus

    Everything by keyboard with native controls, a skip link and a logical tab order, tabindex used correctly, focus you can always see and never lose under a header, and pointer targets and gestures everyone can use.

    11 exercises

  4. 4

    Color, Contrast and Adaptable Content

    Text and control contrast that meets 4.5 and 3 to 1, meaning never carried by color, shape or position alone, a source order that reads right, and content that survives 200 percent text, spacing overrides, 320px screens and hover.

    10 exercises

  5. 5

    Forms, Links and Consistent Navigation

    Labels and instructions, input purpose, errors described in text with a fix, review before paying, no asking twice, sign in with paste, time limits, links that say where they go, and navigation and help that stay put.

    11 exercises

  6. 6

    ARIA, Assistive Technology and Testing

    The accessibility tree and the first rule of ARIA, roles, states and names, labeled landmarks, visually hidden text, live regions for status messages, and what axe, Lighthouse, WAVE and a screen reader pass each catch.

    11 exercises

  7. 7

    Putting It Together

    Audit and fix three realistic pages, a signup form, a product page and a news article, against the automated checks and a manual checklist, then build an accessible newsletter signup from a brief.

    7 exercises

How you practice

You practice in the browser and every exercise gives you feedback right away. This course uses these formats:

  • Fix the bug: 19
  • Code exercise: 18
  • Type the answer: 10
  • Match the pairs: 6
  • Spot the bug: 4
  • Select all that apply: 4
  • Fill in the blank: 3
  • Predict the output: 3
  • Multiple choice: 2
  • Reorder lines: 1

Aligned to

CS2023ACM / IEEE-CS / AAAISource
  • Specialized Platform Development
    • SPD-WebWeb Platforms
  • Human-Computer Interaction
    • HCI-AccessibilityAccessibility and Inclusive Design
    • HCI-EvaluationEvaluating the Design
MDN Curriculum (core)MozillaSource
  • Accessibility
    • 7.1Accessibility basics
    • 7.2Accessible styling
    • 7.4Assistive technology and testing
    • 7.5WAI-ARIA basics
WCAG 2.2 Level A and AAW3CSource
  • Perceivable
    • 1.1.1Non-text Content
    • 1.2.1Audio-only and Video-only (Prerecorded)
    • 1.2.2Captions (Prerecorded)
    • 1.2.3Audio Description or Media Alternative (Prerecorded)
    • 1.2.4Captions (Live)
    • 1.2.5Audio Description (Prerecorded)
    • 1.3.1Info and Relationships
    • 1.3.2Meaningful Sequence
    • 1.3.3Sensory Characteristics
    • 1.3.5Identify Input Purpose
    • 1.4.1Use of Color
    • 1.4.2Audio Control
    • 1.4.3Contrast (Minimum)
    • 1.4.4Resize Text
    • 1.4.5Images of Text
    • 1.4.10Reflow
    • 1.4.11Non-text Contrast
    • 1.4.12Text Spacing
    • 1.4.13Content on Hover or Focus
  • Operable
    • 2.1.1Keyboard
    • 2.1.2No Keyboard Trap
    • 2.1.4Character Key Shortcuts
    • 2.2.1Timing Adjustable
    • 2.2.2Pause, Stop, Hide
    • 2.3.1Three Flashes or Below Threshold
    • 2.4.1Bypass Blocks
    • 2.4.2Page Titled
    • 2.4.3Focus Order
    • 2.4.4Link Purpose (In Context)
    • 2.4.5Multiple Ways
    • 2.4.6Headings and Labels
    • 2.4.7Focus Visible
    • 2.4.11Focus Not Obscured (Minimum)
    • 2.5.1Pointer Gestures
    • 2.5.2Pointer Cancellation
    • 2.5.3Label in Name
    • 2.5.4Motion Actuation
    • 2.5.7Dragging Movements
    • 2.5.8Target Size (Minimum)
  • Understandable
    • 3.1.1Language of Page
    • 3.1.2Language of Parts
    • 3.2.1On Focus
    • 3.2.2On Input
    • 3.2.3Consistent Navigation
    • 3.2.4Consistent Identification
    • 3.2.6Consistent Help
    • 3.3.1Error Identification
    • 3.3.2Labels or Instructions
    • 3.3.3Error Suggestion
    • 3.3.4Error Prevention (Legal, Financial, Data)
    • 3.3.7Redundant Entry
    • 3.3.8Accessible Authentication (Minimum)
  • Robust
    • 4.1.2Name, Role, Value
    • 4.1.3Status Messages

Proto Node Labs is not affiliated with or endorsed by ACM / IEEE-CS / AAAI, Mozilla and W3C. Exam names are trademarks of their owners.