User:Eeggert/Tutorials/DatePickerAlt

Part of New Tutorials work

• General requirements for new tutorials: New Accessibility Tutorials Requirements Analysis
• Landing page for current WAI Tutorials set
• ARIA Overview
• ARIA 1.0 and ARIA 1.1
• ARIA 1.1 Authoring Practices

Approach

Eric: (1) There should be no tutorial necessary for picking something from the Accessible UI Components List, as it will be easy to use. (2) As the UI Components Library is not ready, we should concentrate on building a date picker (like we did with carousels).

• 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

Date Picker Concepts

• What are the components of an accessible date picker? (links to sub sections below)
• Relationship to the forms tutorial.
• Why is this important?
• Relationship to WCAG SCs and Techniques

Structure of a Date Picker

• build on <input type="date">
• Enhance with own date picker popup, ARIA attributes

Date Picker Functionality

• What button does what?
• What is the keyboard interaction model?
• How do ARIA attributes change when the user interacts with the date picker?

Working Example

• Working date picker

Example Code

• Code example

Inline Comments to previous 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
  • Eric: This is documentation for the UI components library, not suitable for a tutorial.
• 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

Eric: All in all that is not something in the scope of the tutorial. It is better suited in the future UI Components List. Despite that, I think there is a disconnect between the list below and the heading of this sub-section.

• Basic design principles for accessible datepickers
  • Applicable WCAG 2.0 principles
    • ARIA Techniques for WCAG 2.0
    • Eric: Please submit as a tag to the Quickref.
  • Applicable UAAG 2.0 principles
    • Relevant techniques
  • Applicable ATAG 2.0 principles
    • Relevant techniques

Design resources for accessible datepickers

Eric: I do not get the purpose of this page. We should describe principles for styling, not describe how to customize date pickers from other sources. (Also: Vendor neutrality concern.)

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

Building websites using UI Components Library

Eric: Again, that is a UI Components Library documentation item, not a tutorial item.

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

Tips and tricks for using UI Components library

Eric: Again, that is a UI Components Library documentation item, not a tutorial item.

• @@@@

Notes and Issues

• We don't currently have accessible date-picker examples
• Eric: I expect the editor to create a bare-bones date picker that illustrates the tutorial (see carousels).

Change Log

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

Support

• U.S. Access Board, WCAG TA Project, Task 2
• @@@Editors and acknowledgements