diff --git a/.Jules/palette.md b/.Jules/palette.md index 49b0751..19bf647 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -19,3 +19,6 @@ ## 2024-08-06 - Screen Reader Accessible Dynamic Text **Learning:** Dynamic text changes, like game scores, are invisible to screen readers unless explicitly marked. 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:** Add `aria-live="polite"` to the container of the dynamic value and extract static text out of it. +## 2026-08-21 - Keyboard Shortcut Styling +**Learning:** Explicitly highlighting keyboard shortcuts using semantic tags with physical key styling improves intuitiveness and discoverability. +**Action:** Always wrap key shortcuts in and apply text-shadows to ensure high contrast against dynamic backgrounds. diff --git a/src/views/mario-game.njk b/src/views/mario-game.njk index c84e3f2..30594e9 100644 --- a/src/views/mario-game.njk +++ b/src/views/mario-game.njk @@ -62,6 +62,16 @@ font-family: Arial; pointer-events: none; } + + kbd { + background-color: #333; + border: 1px solid #777; + border-radius: 3px; + padding: 1px 4px; + font-family: monospace; + text-shadow: 1px 1px 0 #000; + color: #fff; + } @@ -69,7 +79,7 @@
Score: 0
-
Press Space or ↑ to jump!
+
Press Space or to jump!