Skip to Main Content

Accessible Widgets I

taught by: Patrick Fox

Session Summary:

This class will cover a few core accessibility concepts that will guide us in our exploration of creating accessible UI widgets, and will provide examples of various widgets, including modal dialogs and complex menus.


This is part one of two classes on creating accessible UI “widgets”. There is another class that will cover different widgets in the same amount of detail.

We will cover a few core accessibility concepts and best practices for:

  • Focus management
  • Communicating dynamic content and UI updates
  • Using ARIA

This class covers requirements and possible pitfalls when developing the accessible user experience of following widgets:

  • Modal dialogs
  • Complex menus
  • Tool tips
  • Multi-step “Wizard” progress indicator

Come and learn about the functionality of each widget and what it means to be accessible. How should it work with a mouse and how should it work with only a keyboard? What about a screen reader? What kind of visual feedback is needed? What should you see when using a mouse…what about when using a keyboard? What are the visual cues? What are the non-visual cues?

We’ll show you code examples that don’t work…and more importantly code examples that work for people of all abilities. And we’ll demo each widget - accessibly, of course!

While code examples will be provided, the underlying principles are explained in detail. This allows you to apply your new knowledge when implementing the widgets using modern frameworks, like React, Vue and Angular.

Practical Skills:

  • Understanding focus management and announcing content w/aria-live
  • Creating accessible experiences with modern, dynamic UI
  • How to create accessible UI widgets


Familiarity with WCAG 2 and WAI ARIA