Skip to Main Content

Accessible Widgets II

taught by: Patrick Fox

Session Summary:

This class will continue our exploration of creating accessible UI widgets, and will build on the core accessibility concepts presented in Accessible Widgets I, witha . focus on creating accessible single-page applications and handling dynamic sorting and filter of search results and table data.


Building upon the concept and examples in Accessible Widgets I, this class will continue to explore the requirements and possible pitfalls when developing the accessible user experience of following widgets and scenarios:

  • Single-page applications
  • Dynamic search results and filtering
  • Dynamic table filtering and sorting
  • File selector and upload
  • Form validation

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