Date/Time Pickers — Accessibility Specification (WCAG 2.1 AA)

What is this component?

What is this component? Controls to capture dates and times. Prefer native <input type="date|time|datetime-local"> when available; custom calendars must mirror keyboard/ARIA behavior.

Accessibility Requirements

Requirement	WCAG Criteria	Description
Label/Instructions	1.3.1, 3.3.2	Provide clear labels, format hints, and timezone info if applicable.
Error identification	3.3.1, 3.3.3	Announce invalid formats and provide correction suggestions.
Keyboard	2.1.1	Native pickers use OS UI; custom calendars must support arrows, Home/End, PgUp/PgDn, Enter.
Name, Role, Value	4.1.2	Expose active date, focused cell, and selected value.

ARIA Roles and Attributes

ARIA Role/Attribute	Used On	Purpose & Usage
`<input type="date\|time\|datetime-local">`	Native pickers	Preferred for mobile/OS integration.
`role="grid"` + `aria-selected`/`aria-label`	Custom calendars	Announce focused date and selection; manage keyboard navigation.
`aria-describedby`	Inputs	Describe required format & timezone.

Implementation Guidelines


Appointment

Local time; format: YYYY-MM-DD hh:mm.

DO’s

Prefer native inputs on mobile.
Provide clear formatting hints and timezone context.
For custom calendars, implement full keyboard support and live region announcements.

Don’ts

Don’t rely on placeholder to convey formats.
Don’t trap keyboard focus inside custom pickers.
Don’t announce dates without indicating focus/selection.

Common Pitfalls

Ambiguous formats: 01/02/03 without locale context.
No screen reader feedback: changing dates silently.

Testing Checklist

Test Item	WCAG Criteria	Pass Criteria
Format announced	3.3.2	Screen reader announces hint/format.
Keyboard nav (custom)	2.1.1	Arrows/Home/End/PgUp/PgDn/Enter work; focus visible.