HTML5 Canvas Accessibility

on YouTube ↗49m

" summary

History and current state of making HTML5 Canvas accessible with concrete features and a live demo: browsers now expose hit regions and drawFocusIfNeeded so canvas pixels map to DOM fallback elements, with transparent regions tied to paragraph controls and aria-live status updates; a prototype game Whack a Creeper uses nine grid cells, 10 creepers total, score +/-10, and relies on Firefox Nightly (enable canvas.focusrings.enabled and canvas.hitregions.enabled) to show focus rings and screen‑reader interaction.

AI-written summary · about

" chapters (7)

1. 0:00Start
2. 0:01Canvas Accessibility
3. 16:21Guiding Principles
4. 19:30The Board
5. 21:22Draw the character
6. 24:40Hit Region Script
7. 35:35Accessible Canvas Game Demo using Screen

" related talks

• 20ma11y & Interactive CanvasesOli Legat · JSNation 2025
• 42mWhat HTML5 Means for Web AccessibilityKevin Lamping · HTML5.tx Texas 2013
• 32mIntro to Web Graphics with HTML5 CanvasKai Chang · Øredev 2018
• 30mLighting Talks: Sharpen Your HTML5 SawRyan Joy, Aaron Murray, Austin Hallock · HTML5.tx Texas 2013
• 33mRubyist's Guide to the Canvas APIH. Dean Hudson · Cascadia Ruby 2012
• 35mHTML5 APIs - The New FrontierRobert Nyman · JSConf.eu 2010
• 01h 02mBeyond Compliance: Creating Exceptional Screen Reader Experiences in Learning DesignJacob Wood · The Accessible & Inclusive Design Conference 2025
• 51mHTML5: Risky Business or Hidden Security Tool Chest?Johannes Ullrich · AppSecUSA 2013