HTML & CSS Accessibility

Technical level: Intermediate (knowledge of HTML required)

Duration:

  • 5 hours (online self-paced class, estimate)

Course Synopsis:

An overview of the requirements under Web Content Accessibility Guidelines (WCAG) 2.0 Level A and AA success criteria and best practices for conformance. This course provides detailed best practice guidance on accessibility for the following content types:

  • Keyboard Accessibility & Focus Control (functionality, visual focus indicator, tab order, focus traps)
  • Images (alt text, long descriptions, null alt text, linked images, text in images)
  • Forms (basic labels, complex labels, form instructions, data format information)
  • Tables (captions, header cells, scope, id + headers)
  • Media (video, audio, captions, transcripts, audio descriptions, media player functionality)
  • Document Structure (page title, headings, landmarks, lists)
  • Color (color choices, color to convey meaning)
  • Contrast (text against the background)
  • CSS (hiding content, visual layout)
  • Text Content (fonts, text alignment, emphasis)
  • Navigation (link text, skip navigation, main navigation)

Recommended Prerequisites:

Pricing for Online Class

Each class is $45 for a full year of access, or lower for group enrollment, or when purchasing multi-course curriculum packages. See the the full set of curriculum options for details.

Enroll in "HTML and CSS Accessibility"

Course Topics: HTML & CSS Accessibility

  • Introduction
    • Review: Disability Types
    • Laws & Guidelines
  • Structure & Semantics
    • Language
    • Page Title
    • Headings
    • Lists, Links, Blockquote...
    • Emphasizing Content
  • Device Independence
    • Basics
    • Programmatic Focus
    • Keyboard Tab Order
    • Visual Focus Indicator
    • Keyboard Trap
    • Mac Keyboard Accessibility
  • Navigation & Links
    • Main Navigation
    • Skip Navigation
    • HTML 5 & ARIA Landmarks
    • Links
  • Visual Layout & CSS
    • Content vs. Presentation
    • Reading Order
    • Color & Visual Cues
    • Color Contrast
    • Fonts & Typography
  • Images
    • Alt Text
    • Charts & Graphs
    • Infographics
    • Background Images
    • Null Alt Text
    • CAPTCHAs
    • Image Maps
    • Animations
    • SVG
      • Raster vs Vector
      • Images of Text
      • Using SVG Inline
      • SVG vs Icon Fonts
      • Animating SVG
      • Browser Support/Summary
  • Video, Audio, & Multimedia
    • Transcripts
    • Captions
    • Audio Descriptions
    • Background Sounds
    • Live Events
    • Media Player Accessibility
    • Auto-Play
    • Seizure-Inducing Effects
  • Understandability
    • Simplicity
    • Understandable Text
    • Supplemental Formats
  • Frames & Iframes
    • Frame Titles
    • Elements & Structure Across Frames
    • Hiding Iframes
  • Data Tables
    • Table Caption
    • Row & Column Headers
    • Column Groups & Row Groups
    • Headers + ID for Complex Data Tables
    • Table Summary
  • Forms
    • Form Labels
    • Groups of Form Labels
    • Complex Form Labels
    • Special Input Attributes
    • Form Instructions
    • Form Validation
    • Dynamic Forms
  • Dynamic Content
    • Timed Content
    • Widgets & Controls
  • Robust Compatibility
    • Markup Validation
    • Open vs. Proprietary
  • Additional Resources