diff --git a/.Jules/palette.md b/.Jules/palette.md index 49b0751..25dfea0 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-28 - Keyboard Shortcut Highlighting +**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..91ca4a3 100644 --- a/src/views/mario-game.njk +++ b/src/views/mario-game.njk @@ -61,6 +61,22 @@ font-size: 16px; font-family: Arial; pointer-events: none; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); + } + + kbd { + background-color: #eee; + border-radius: 3px; + border: 1px solid #b4b4b4; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset; + color: #333; + display: inline-block; + font-size: 0.85em; + font-weight: 700; + line-height: 1; + padding: 2px 4px; + white-space: nowrap; + text-shadow: 0 1px 0 #fff; } @@ -69,7 +85,7 @@
Score: 0
-
Press Space or ↑ to jump!
+
Press Space or to jump!