ARIA and JavaScript Accessibility

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

Duration:

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

Course Synopsis:

This course educates students on the development of websites that make significant use of highly interactive features that rely on JavaScript, DOM scripting, and ARIA, including AJAX interactions. This course discusses the accessibility challenges of common interface elements developed using client‐side scripting and demonstrates ways in which those interface elements can be made so they are accessible and usable to persons with disabilities. This course will cover:

  • Accessibility challenges in developing websites that use highly interactive features relying on JavaScript, DOM scripting, and ARIA, including AJAX interactions
  • Accessibility challenges of common interface elements developed using client-side scripting
  • Ways in which those interface elements can be made so they are accessible
  • Labels (aria-label, aria-labelledby)
  • Descriptions (aria-describedby)
  • Roles (widget roles, landmark roles, pseudo HTML element roles)
  • Properties (e.g. aria-haspopup, aria-valuemin)
  • States (e.g. aria-selected, aria-checked)
  • Relationships (e.g. aria-owns, aria-controls)
  • Dynamic changes
  • Live regions (aria-live)
  • AJAX
  • Keyboard accessibility and focus management
  • Dynamic form validation
  • Working examples (e.g. tab panel widget, carousel, alert, alert dialog, dialog, tooltip, countdown, AJAX, etc.)

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 "ARIA and JavaScript Accessibility"

Course Topics: ARIA and JavaScript Accessibility

  • Introduction
    • What Is ARIA?
    • ARIA Concepts
  • Labels (aria-label, aria-labelledby, etc.)
    • aria-label
    • aria-labelledby
    • Support for aria-label and aria-labelledby
    • Non-ARIA Labels
  • Descriptions (aria-describedby)
  • Roles
    • Landmark Roles
    • "Widget" Roles
    • "Pseudo HTML" Roles
    • The Document Role
    • The Application Role
    • The Presentation Role
    • Other Semantic Roles
      • The Math Role
      • The Definition Role
      • The Note Role
      • The Directory Role
    • Abstract Roles
  • Properties and States
    • aria-haspopup
  • Relationships
    • aria-controls
    • aria-owns
    • aria-flowto
  • Dynamic Changes
  • Live Regions
    • aria-live
    • role="alert"
    • role="status"
    • role="timer"
    • role="marquee"
    • role="log"
  • Keyboard Accessibility
    • ARIA Keyboard Patterns
    • Operability
    • Visible Focus Indicator
    • Tab/Reading Order
    • No Keyboard Trap
    • Tabindex of 0 or -1 for Tabability & Focusability
    • Manage Dynamic Focus
    • Keyboard Instructions
    • JavaScript Keycodes
  • Forms
    • Form Labels
    • Required Fields
    • Form Validation
      • Error Summaries
  • Examples
    • Accordion
    • Alert
    • Alert Dialog
    • AJAX & Asynchronous Content
    • Button
    • Carousel
    • Checkbox
    • Combobox
    • Date Picker (Calendar popup)
    • Expand/Collapse Content (details/summary tags)
    • Interstitial Views and Pages
    • Link
    • Maximum Number of Characters Countdown
    • Tabs (tablist, tabpanel, tab)
    • Timer: Countdown to Deadlines (auctions, etc.)
    • Timer: Session Timeout
    • Tooltip
  • Appendices
    • ARIA Quick Reference
    • Glossary