Tutorial Outline: Datepickers

From Education & Outreach

Part of New Tutorials work

Approach

  • Use a specific topic [probably date-pickers but could change depending on ability of other ARIA examples] as an introduction to grabbing and customizing UI components from component library, while providing an overview of the types of material in the components library.
  • Technical review to be requested from ARIA WG and/or ARIA Authoring Practices group

Status

  • This is a draft outline, subject to change, currently getting early review by EOWG. Input welcome.

Tutorial Datepickers Outline

Introduction to UI Components Library with Datepicker Examples

  • User Interface components library
    • Finding components in UI Components Library
    • Free to use; permissions/acknowledgements of source
    • Comments and contributions welcome
  • What are date-pickers
    • When do you need a date-picker
    • Why can date-pickers become barriers for people with some disabilities
  • Why it's important to have barrier-free data-pickers
    • Incompletely steps mid-transaction, etc.

Finding and Using Pre-built datepickers

  • Basic design principles for accessible datepickers
    • Applicable WCAG 2.0 principles
      • ARIA Techniques for WCAG 2.0
    • Applicable UAAG 2.0 principles
      • Relevant techniques
    • Applicable ATAG 2.0 principles
      • Relevant techniques

Design resources for accessible datepickers

  • Sample one
    • Adapting sample code
    • Customizing features
    • Customizing styling
  • Sample two (etc)
  • Sample three (etc)

Building websites using UI Components Library

  • Compatible resources, customizable designs, with multiple components from the library

Tips and tricks for using UI Components library

  • @@@@

Notes and Issues

  • We don't currently have accessible date-picker examples

Change Log

  • Added approach, status, notes and issues, change log
  • Tweaked several sections of draft outline

Support