Case Study: Building Accessible UI using Github Co-pilot
summary
Builds a reusable row-of-thumbnails multiselect for Adobe Express using GitHub Copilot, starts with divs, follows Copilot’s first suggestion to switch to button elements, then iterates to semantic HTML and input type="checkbox", discovers one disabled thumbnail (1 of 5) is skipped by the screen reader, adds aria-disabled and aria-checked fixes, and validates keyboard, labels and states through manual testing and refined prompts so the component actually announces labels and selection state.
AI-written summary · about
chapters (17)
- 0:00Accessibility and AI intro
- 3:37AI bridging accessibility gaps
- 5:01GitHub Copilot accessibility
- 6:06Building accessible UI with Copilot
- 10:25Refining prompts for accessibility
- 13:21Accessibility standards sources
- 15:24Edge cases and disabled states
- 18:20Iterating prompts effectively
- 20:05Risks of AI inaccessible code
- 21:52Human testing and empathy
- 24:20Avoiding AI reliance
- 25:23Copilot accessibility gaps
- 26:07Training AI for accessibility
- 26:49Testing AI accessible components
- 28:36AI assistance vs developer oversight
- 29:59Speed versus accessibility
- 31:05Q&A
related talks
25mBuilding Accessible UI using GitHub Copilot
49mEmpowering People with Disabilities Using GitHub Copilot
31mDeveloping for Everyone
33mAccess All Areas
40mBuilding Accessible Reusable Components
49mHow to create accessible JavaScript widgets with basic HTML components
53mDoing Responsive Right: Accessibility Lessons from the Field
32mBuilding Empathy and Accessible Apps