How to build an accessible ARIA date picker control

Learn how to build an accessible ARIA date picker control from the ground up following the ARIA Authoring Practices Guide (APG) date picker pattern. We'll walk through the ARIA roles, states, properties, keyboard behaviour and focus management needed to make a custom date picker work properly for screen reader and keyboard users. CodePen code repository: 📅 https://codepen.io/collection/eYrGje → Building an ARIA date picker control Background reading: https://adrianroselli.com/2019/07/may... → Maybe You Don’t Need a Date Picker Web accessibility courses: 🔵 https://www.udemy.com/course/advanced... → Our Advanced WCAG Accessibility: Master ARIA Component Patterns UDEMY course 🔵 https://www.udemy.com/course/introduc... → Get better at the basics with our Web Accessibility fundamentals UDEMY course Signup for our newsletter: https://www.canaxess.com.au/about#new... More from CANAXESS: https://www.canaxess.com.au Join our channel: We upload new videos every Monday at 7am Australian Eastern Standard Time (AEST) If you want to see more of our videos click Like and Subscribe. Subscribe to our channel here:    / @canaxess   Chapters: 0:00 Introduction 2:03 Introducing the component 4:15 Experiencing the accessibility gap 6:02 Identifying the component parts 6:31 Overview of what ARIA attributes are required 8:36 Adding the ARIA roles 11:17 Adding the ARIA states 12:44 Adding the ARIA properties 15:00 Implementing keyboard behaviour 19:37 Improving the screen reader experience 21:06 Understanding what you have learnt 22:22 Unit summary We're CANAXESS. We’re the people for technical consulting on web and digital accessibility. We’re the web accessibility experts. From accessibility assessments and compliance reports to design reviews, accessibility pulse checks and increasing your teams' capabilities with training and coaching. We can help you at any stage on your accessibility journey. Come and say hello! https://www.canaxess.com.au/contact/ #a11y #accessibility #webDev