This in-depth course is designed for developers who want to master accessible front-end development. You’ll learn how to work with semantic HTML, ARIA, and the accessibility tree; build inclusive forms; and create custom components that work well with assistive technologies like screen readers and keyboard navigation.

What you’ll learn

  • How the accessibility tree works and how to use ARIA effectively
  • How to apply accessible names, descriptions, and semantic markup
  • How to use headings, landmarks, links, buttons and image types correctly
  • How to design and develop accessible forms, labels, fieldsets and validation
  • How to use live regions and build accessible notifications
  • How to create accessible widgets including modals, tabs, comboboxes and chat windows

Who this course is for

  • Web developers focused on inclusive front-end development
  • Developers working with ARIA, custom components or complex UI widgets
  • Testers evaluating accessibility in forms, modals, and dynamic content
  • Designers and content creators collaborating with dev teams on accessible features

Knowledge level

  • Basic knowledge of HTML is required.
  • No prior accessibility knowledge is required.

Technology requirements

We use CodePen for some activities. You don’t need an account, but it will allow you to fork and save examples.

Delivery options

Self-paced online training

  • Duration: Approximately 10 hours
  • Cost: $297 AUD / year (GST inclusive)

View course on Intopia Learn

Instructor-led training for organisations

  • Duration: 5 x 2-hour sessions, over 5 weeks
  • Cost: $10,000 AUD (+ GST)
  • Attendees: Up to 20

Contact us to book training

Course outline

Session 1: The Accessibility Tree and ARIA

  • The accessibility tree
  • An introduction to ARIA
  • Accessible names
  • Accessible descriptions
  • More on accessible names and descriptions

Session 2: Semantic markup

  • Valid and semantic markup
  • Headings
  • Landmarks
  • Images
  • Tables
  • Links and buttons

Session 3: Accessible forms

  • An introduction to accessible forms
  • The <label> element
  • The <fieldset> and <legend> elements
  • Form field instructions
  • Required fields
  • Some important form attributes

Session 4: Accessible form notifications

  • Live regions
  • Client side form validation
  • Notifications

Session 5: Building accessible components

  • Introduction to components
  • Accessible modals
  • Accessible in-page tabs
  • Accessible editable comboboxes
  • Accessible chat windows