diff --git a/.Jules/palette.md b/.Jules/palette.md index 49b0751..c7e189b 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -19,3 +19,7 @@ ## 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. + +## 2025-10-27 - Keyboard Shortcuts Semantics +**Learning:** Explicitly highlighting keyboard shortcuts using semantic tags with physical key styling improves intuitiveness and discoverability for users playing web games or using custom keyboard inputs. +**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..e4236b3 100644 --- a/src/views/mario-game.njk +++ b/src/views/mario-game.njk @@ -61,6 +61,20 @@ font-size: 16px; font-family: Arial; pointer-events: none; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); + } + + kbd { + background-color: #f7f7f7; + border: 1px solid #ccc; + border-radius: 4px; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset; + color: #333; + display: inline-block; + font-family: monospace; + font-size: 14px; + padding: 2px 6px; + text-shadow: none; /* override the parent shadow for clear text on the key */ } @@ -69,7 +83,7 @@
Score: 0
-
Press Space or ↑ to jump!
+
Press Space or to jump!