diff --git a/.Jules/palette.md b/.Jules/palette.md index 8ee612f..ffe30ad 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -12,3 +12,7 @@ ## 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. + +## 2026-07-02 - Web Game Keyboard Accessibility and Instructions +**Learning:** For interactive HTML5 widgets or games with custom keyboard event bindings, always provide explicit, visible instructional text so users know the required inputs. Additionally, do not place static text (like instructions) inside an `aria-live` region, as it forces screen readers to unnecessarily repeat the static text every time the dynamic content updates. Extract static text into a separate sibling element. +**Action:** When adding dynamic status updates (like scores) alongside instructions, keep them as separate elements. Add `aria-live="polite"` and `aria-atomic="true"` only to the element containing the dynamic content to maintain clean screen reader announcements. diff --git a/src/views/mario-game.njk b/src/views/mario-game.njk index 67b6bd7..b9db338 100644 --- a/src/views/mario-game.njk +++ b/src/views/mario-game.njk @@ -52,13 +52,24 @@ font-size: 20px; font-family: Arial; } + + #instructions { + position: absolute; + top: 35px; + left: 10px; + color: white; + font-size: 14px; + font-family: Arial; + opacity: 0.8; + }
-
Score: 0
+
Score: 0
+
Press Space or Up Arrow to jump