From 2c614aaac0b2b1d4fc61477e7752388c667cf18d Mon Sep 17 00:00:00 2001 From: 0m364 <13804150+0m364@users.noreply.github.com> Date: Thu, 18 Jun 2026 10:59:01 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20ARIA=20roles=20?= =?UTF-8?q?and=20Spacebar=20support=20to=20anchor-based=20buttons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 💡 What: Added `role="button"` and `aria-haspopup="dialog"` to the `#sitrep-btn` anchor tags in `concepts.html`, `contact.html`, and `products.html`. Also added a `keydown` listener in `modal.js` to ensure the Spacebar triggers the modal correctly when these anchors are focused. 🎯 Why: To ensure native keyboard and screen reader accessibility for anchor tags repurposed as buttons. Native anchors only trigger on the 'Enter' key, missing the 'Spacebar' expectation for buttons, and they do not announce their role correctly without ARIA attributes. ♿ Accessibility: Ensures full WCAG keyboard navigation support (Enter and Space) and proper screen reader semantic announcements for the OSINT/Sitrep modal buttons. --- .Jules/palette.md | 4 ++++ concepts.html | 2 +- contact.html | 2 +- modal.js | 6 ++++++ products.html | 2 +- 5 files changed, 13 insertions(+), 3 deletions(-) diff --git a/.Jules/palette.md b/.Jules/palette.md index 7c7c523..f844add 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -29,3 +29,7 @@ ## 2026-06-12 - Robust Skip-to-Content Links **Learning:** Adding a "Skip to main content" link is a critical accessibility requirement for keyboard users. To make it robust, it needs to be hidden visually but appear when focused using `transform: translateY(-100%)` instead of magic pixel numbers, and the target container (e.g., `
`) must have a matching `id` and `tabindex="-1"` so it can programmatically receive focus across all browsers. **Action:** Always include a visually hidden 'Skip to main content' link immediately after the opening `` tag. Set the main content container with an `id` and explicitly `tabindex="-1"`. + +## 2026-06-18 - Anchor Tags as Buttons Spacebar Support +**Learning:** When using `` tags with `href="#"` as buttons to trigger actions like opening a modal, they lack native button keyboard accessibility. Native anchors only trigger on the 'Enter' key, whereas screen readers and keyboard users expect buttons (elements with `role="button"`) to respond to both 'Enter' and the 'Spacebar' key. +**Action:** Always add `role="button"` to anchor tags used for actions. Additionally, explicitly bind a JavaScript `keydown` event listener for the Spacebar key (`e.key === ' '`), using `e.preventDefault()` to stop the default page scrolling behavior before triggering the action. diff --git a/concepts.html b/concepts.html index d4e1807..13b8873 100644 --- a/concepts.html +++ b/concepts.html @@ -19,7 +19,7 @@

CHARLES WILLIAMS

Products Concepts Contact - OSINT + OSINT
diff --git a/contact.html b/contact.html index b30b503..15d119b 100644 --- a/contact.html +++ b/contact.html @@ -49,7 +49,7 @@

Get in Touch

- + OSINT diff --git a/modal.js b/modal.js index 994d6bd..7ad7852 100644 --- a/modal.js +++ b/modal.js @@ -56,6 +56,12 @@ const openModal = (e) => { const btns = document.querySelectorAll('#sitrep-btn'); btns.forEach(btn => { btn.addEventListener('click', openModal); + btn.addEventListener('keydown', (e) => { + if (e.key === ' ' || e.key === 'Spacebar') { + e.preventDefault(); + openModal(e); + } + }); }); // Close modal via button diff --git a/products.html b/products.html index f5f0835..01f1a6c 100644 --- a/products.html +++ b/products.html @@ -20,7 +20,7 @@

CHARLES WILLIAMS

Products Concepts Contact - OSINT + OSINT