diff --git a/Memory-block-game-main/code/script.js b/Memory-block-game-main/code/script.js index 4e4c0cc..17193e6 100644 --- a/Memory-block-game-main/code/script.js +++ b/Memory-block-game-main/code/script.js @@ -142,7 +142,18 @@ document.addEventListener("DOMContentLoaded", () => { face.style.display = "none"; block.appendChild(face); - block.addEventListener("click", flipBlock); + block.setAttribute("tabindex", "0"); +block.setAttribute("role", "button"); +block.setAttribute("aria-label", "Memory card"); + +block.addEventListener("click", flipBlock); + +block.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + flipBlock.call(block); + } +}); }); resetBoard(); diff --git a/Memory-block-game-main/code/styles.css b/Memory-block-game-main/code/styles.css index cf20b0b..422ecf3 100644 --- a/Memory-block-game-main/code/styles.css +++ b/Memory-block-game-main/code/styles.css @@ -398,4 +398,17 @@ select:disabled { margin: 15px 0; box-shadow: 0 0 30px #FFD700; border: 2px solid white; +} +} +/* ── Keyboard Accessibility ───────────────────── */ + +.block:focus-visible { + outline: 4px solid #fbbf24; + outline-offset: 4px; +} + +button:focus-visible, +select:focus-visible { + outline: 3px solid #fbbf24; + outline-offset: 3px; } \ No newline at end of file