Custom JavaScript/ARIA Widgets

Custom JavaScript/ARIA Components

Already enrolled? Login now.

Technical level: Advanced (knowledge of HTML, CSS, and JavaScript is required)

Duration: 3 hours (online self-paced class, estimate)

IAAP Education Credits: 3.00 (This course counts toward renewal of IAAP certification)

Course Synopsis:

Using ARIA and JavaScript effectively for custom components like dialogs, alerts, tooltips, date pickers, carousels, expand/collapse regions, aria-live regions, autocomplete, application menus, tab panels, tree views, etc.

Version 3.0 is a major update featuring 30 interactive component examples, each with video demonstrations, screen reader support notes, keyboard interaction patterns, full source code, and developer and QA testing notes. The foundational ARIA concepts from previous versions are retained, with expanded examples, updated browser support data, and a refreshed learning experience throughout.

Course Topics:

  • Introduction
  • ARIA Concepts
    • Overview
    • Name
    • Role
      • Landmark Roles
      • Component Roles
      • Pseudo HTML Roles
      • The Document Role
      • The Application Role
      • The Presentation Role
      • The Math Role
      • The Definition Role
      • The Note Role
      • Abstract Roles
    • Value
    • Description
    • Live Regions
    • Advanced ARIA Attributes
    • Keyboard Accessibility
      • ARIA Keyboard Patterns
      • Operability
      • Visible Focus Indicator
      • Tab/Reading Order
      • No Keyboard Trap
      • Using tabindex Correctly
      • Focus Management
      • Keyboard Instructions
  • ARIA Component Examples
    • Accordion (Multiselect)
    • Accordion (Single-Select)
    • Alert
    • Button
    • Button (Toggle)
    • Carousel (Based on a Tabpanel)
    • Checkbox (Single)
    • Checkbox (Tri-State)
    • Calendar/Date Picker
    • Dialog (Simple Dialog)
    • Dialog (Alert Dialog)
    • Expand/Collapse
    • Expand/Collapse Summary
    • Link
    • Live Region Playground
    • Navigation (Hierarchical) with Expand/Collapse
    • Predictive Text
    • Progress Bar (Bounded)
    • Progress Bar (Unbounded)
    • Radio and Radio Group
    • Shopping Cart
    • Slider
    • Slider (Multirange)
    • Stepper
    • Table (Responsive, Collapsible)
    • Table (Sortable)
    • Tabpanel
    • Tooltip
    • Tooltip Dialog
    • Tree View
  • Summary