Accessible Widgets

Session Evaluation

Class description

This is a class about “widgets.” There is another class that will cover different widgets in the same amount of detail.

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

– Focus management
– Announcing dynamic content
– Tool tips
– Modal dialogs
– Dynamic table filtering and sorting

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 Frameworks, like jQuery, or in “vanilla” JavaScript.


Patrick Fox


May 17th, 2017


10:15 am-11:45 am

Class level


Class type



Dev / Coding


  • HTML.
  • CSS and JavaScript basic knowledge.
  • WCAG 2.0 and WAI-ARIA knowledge is helpful.

Take Aways

Code examples for an accessible date picker, time field, combo box, and progress bar.


Room TH 118

Session Evaluation

  • Tell us what you thought of this class!