Skip to Main Content

Accessible Widgets I

taught by: Patrick Fox

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.

Practical Skills:

  • Code examples for accessible focus management, dynamic content, tool tips, modal dialogs, and dynamic table filtering and sorting

Prerequisites:

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