From a065bca034ef5a62d2a7a375bc089aae08271418 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Thu, 16 Jul 2026 13:24:54 +0000 Subject: [PATCH] Add instructional text and accessibility to mario game Adds explicit visible instructions ("Press Space or Up Arrow to jump") under the score so users intuitively know how to interact with the game. Adds `aria-live` and `aria-atomic` attributes to the `#score` element so screen readers can announce dynamic score updates. Co-authored-by: EiJackGH <172181576+EiJackGH@users.noreply.github.com> --- .Jules/palette.md | 7 +++++++ src/views/mario-game.njk | 13 ++++++++++++- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/.Jules/palette.md b/.Jules/palette.md index 8ee612f..8ab78e1 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -12,3 +12,10 @@ ## 2025-03-23 - Game Key Scrolling **Learning:** Browsers natively scroll the page when users press Space or Arrow keys. When building a web-based game, this creates a frustrating UX where the game viewport jumps around while playing. **Action:** Always call `e.preventDefault()` on keydown events for typical game controls ("Space", "ArrowUp", etc.) when the focus is on a game container or the body. +## 2024-07-16 - Game Keyboard Instructions +**Learning:** When building interactive HTML5 widgets or games with custom keyboard event bindings, always provide explicit, visible instructional text so users know the required inputs. +**Action:** Add instructional text explicitly beneath score elements or similar static headers instead of burying them in off-screen areas. + +## 2024-07-16 - Accessible Dynamic Scores +**Learning:** Dynamic text changes, such as scores updating in a game, are invisible to screen readers without specific ARIA tags. +**Action:** Add `aria-live="polite"` and `aria-atomic="true"` to score elements to maintain screen reader accessibility during dynamic updates. diff --git a/src/views/mario-game.njk b/src/views/mario-game.njk index 67b6bd7..d743f40 100644 --- a/src/views/mario-game.njk +++ b/src/views/mario-game.njk @@ -52,13 +52,24 @@ font-size: 20px; font-family: Arial; } + + #instructions { + pointer-events: none; + position: absolute; + top: 40px; + left: 10px; + color: white; + font-size: 16px; + font-family: Arial; + }
-
Score: 0
+
Score: 0
+
Press Space or Up Arrow to jump