Web Accessibility, Part 9: Custom JavaScript/ARIA Widgets

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

Duration: 3 hours (estimate)

IAAP CAECs: 3.00 (This class counts toward renewal of IAAP certification)

Course Synopsis:

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

Course Topics: Web Accessibility, Part 9: Custom JavaScript/ARIA Widgets

ARIA Concepts
- Overview
- Name
- Role
  - Landmark Roles
  - Widget Roles
  - Pseudo HTML Roles
  - The Document Role
  - The Application Role
  - The Presentation Role
  - The Math Role
  - The Definition Role
  - The Note Role
  - The Directory Role
  - Abstract Roles
- Value
- Description
- Live Regions
- Keyboard Accessibility
  - ARIA Keyboard Patterns
  - Operability
  - Visible Focus Indicator
  - Tab/Reading Order
  - No Keyboard Trap
  - Using tabindex Correctly
  - Focus Management
  - Keyboard Instructions
ARIA Widget Examples
- Alert
- Button
- Button (Toggle)
- Carousel (based on a tabpanel)
- Checkbox
- Checkbox (Tri-State)
- Dialog (Simple Dialog)
- Dialog (Simple Alert Dialog)
- Dialog (Message Dialog)
- Dialog (Message Alert Dialog)
- Expand/Collapse
- Expand/Collapse (based on Details/Summary)
- Link
- Navigation (Hierarchical) with Expand/Collapse
- Predictive Text
- Progress Bar (Bounded)
- Progress Bar (Unbounded)
- Radio and Radio Group
- Slider
- Slider (Multirange)
- Tabpanel
- Table (Responsive, Collapsible)
- Table (Sortable)
- Tooltip
- Tooltip Dialog
- Tree View