Building Accessible Components, Julie Grundy
The Accessibility Stack
An Accessible Process
Step 1
Original form
Original form after submitting
Original form with error
Add a datepicker button
Datepicker navigation in HTML
Datepicker navigation continued
Add a table for the dates
Add a table for the dates, continued
Avoid click handlers on table cells
Avoid click handlers on table cells, continued
Avoid click handlers, continued
Input elements support all click types
Form with radio buttons
Form with checkboxes
Form with buttons
Step 2
Hide until JavaScript is available
HTML with a class of hidden on the button
Javascript to show the toggle button
Form with visible button because Javascript is available
Make the toggle control the datepicker
Javascript for the toggle action
Form with datepicker open in a modal
Add Escape key listener to close the modal
Replace the HTML table with Javascript table
Add functions for navigation controls
Javascript for navigation controls
Disable any out-of-scope dates
Form with working navigation
Create date selection function
Video
Step 3
Datepicker with improved styles
Close button
Previous and Next buttons
Selected date
Focused or hovered date
Datepicker zoomed in
Text resized
Datepicker in high contrast mode
Step 4
Replace 'selected' class with ARIA
Replace 'selected' class, continued
ARIA live for month notification
ARIA live, continued
Is it a cycle instead of a process?
My final process
Progressive Enhancement
Resources