An inclusive tic-tac-toe, progressively enhanced
summary
Builds a working tic‑tac‑toe using plain HTML form elements: a 3×3 table of radio button grid inputs inside fieldsets with legends and reset to preserve keyboard and screen‑reader interaction. Adds CSS (preprocessor used) to replace labels with SVG X/O graphics and visually-hidden legends so styling doesn’t remove semantics. Adds JavaScript only to enforce turns and disable choices and to detect wins by summing cell values with 1/-1 win detection. The result works and remains accessible when CSS or JS is absent.
AI-written summary · about
chapters (7)
- 0:00Welcome
- 3:28Tic-tac-toe with progressive enhancement
- 12:36Styling and accessibility
- 22:37JavaScript for interactivity
- 27:17Detecting game outcomes
- 30:22Progressive enhancement summary
- 32:13Q&A
related talks
49mHow to create accessible JavaScript widgets with basic HTML components
31mCase Study: Building Accessible UI using Github Co-pilot
57mBranching Out with Elm
43mCSS is Awesome!
31mThe Power of CSS
21mCreating Interaction with CSS and Checkboxes
19mHTML can do that?
01h 07mInclusive Design Series: How to stop worrying and love accessible forms