Uploaded June 2025 | Updated September 2026, 2 weeks ago
Talk: Oli Legat - "a11y & Interactive Canvases", JSNation 2025
Thinking of using (canvas) to render your UI? Great idea! But let’s make it accessible. Learn how to leverage the DOM tree structure to allow users to interact with your canvas using the keyboard and a screen reader. Find out about tricky gotchas and how to work around these.
Watch the full talk with Q&A on GitNation website: gitnation.com/contents/a11y-and-interactive-canvases
Follow the link to watch the full version of all the conference talks, QnA’s with speakers and hands-on workshop recordings → gitnation.com/events/jsnation-2025
Timestamps:
00:00 Accessibility and Interactive Canvases
02:19 SVG Attributes and Accessibility
04:11 Canvas Accessibility and Proxy Elements
06:29 Interactive Elements and Chart Accessibility
08:03 Interactive Screen Reader Feedback
08:38 Screen Reader Responsiveness & Element Limitations
09:48 UI Control 'Ball' with Screen Reader Integration
11:05 Proxy Element Integration for Screen Reader
12:03 Focus Changes and Proxy Element Swapping
13:54 Focus Indicators and Keyboard Shapes
15:14 Dynamic Focus Indicators and Interaction
17:02 Screen Reader Interaction and Focus Shapes
18:36 Dynamic Focus Indicators and Interactive Shapes
JSNation website: jsnation.com
JSNation on X: https://x.com/thejsnation
JSNation on LinkedIn: linkedin.com/showcase/jsnation-the-main-js-conference
JSNation on Bluesky: https://bsky.app/profile/jsnation.gitnation.org
JSNation on Instagram: instagram.com/thejsnation
GitNation on TikTok: tiktok.com/@gitnationorg
#JSNation #JSNation2025 #GitNation
Talk: Oli Legat - "a11y & Interactive Canvases", JSNation 2025
Thinking of using (canvas) to render your UI? Great idea! But let’s make it accessible. Learn how to leverage the DOM tree structure to allow users to interact with your canvas using the keyboard and a screen reader. Find out about tricky gotchas and how to work around these.
Watch the full talk with Q&A on GitNation website: gitnation.com/contents/a11y-and-interactive-canvases
Follow the link to watch the full version of all the conference talks, QnA’s with speakers and hands-on workshop recordings → gitnation.com/events/jsnation-2025
Timestamps:
00:00 Accessibility and Interactive Canvases
02:19 SVG Attributes and Accessibility
04:11 Canvas Accessibility and Proxy Elements
06:29 Interactive Elements and Chart Accessibility
08:03 Interactive Screen Reader Feedback
08:38 Screen Reader Responsiveness & Element Limitations
09:48 UI Control 'Ball' with Screen Reader Integration
11:05 Proxy Element Integration for Screen Reader
12:03 Focus Changes and Proxy Element Swapping
13:54 Focus Indicators and Keyboard Shapes
15:14 Dynamic Focus Indicators and Interaction
17:02 Screen Reader Interaction and Focus Shapes
18:36 Dynamic Focus Indicators and Interactive Shapes
JSNation website: jsnation.com
JSNation on X: https://x.com/thejsnation
JSNation on LinkedIn: linkedin.com/showcase/jsnation-the-main-js-conference
JSNation on Bluesky: https://bsky.app/profile/jsnation.gitnation.org
JSNation on Instagram: instagram.com/thejsnation
GitNation on TikTok: tiktok.com/@gitnationorg
#JSNation #JSNation2025 #GitNation
