From 7cf0aac96e83dc8ac776b74bfc9ec079d2cf5506 Mon Sep 17 00:00:00 2001 From: 0m364 <13804150+0m364@users.noreply.github.com> Date: Mon, 15 Jun 2026 10:46:42 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Anchor=20Tag=20Button?= =?UTF-8?q?=20Accessibility?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Added role="button" and aria-haspopup="dialog" to OSINT modal links. - Implemented spacebar activation for the #sitrep-btn anchors to support standard keyboard behavior. - Documented learning in .Jules/palette.md. --- .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..2f2bb2b 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-15 - Anchor Tags as Buttons Accessibility +**Learning:** Using `` tags with `href="#"` as buttons to trigger actions like opening a modal lacks native button semantics and keyboard behaviors. While visual users can click them, screen readers may not announce their interactive purpose, and keyboard users expect Spacebar to activate buttons (which fails on native anchors, scrolling the page instead). +**Action:** When using `` tags as buttons, enforce accessibility by adding `role="button"` and `aria-haspopup="dialog"`. Additionally, bind a JavaScript `keydown` event listener for the `Spacebar` key (using `e.preventDefault()` to stop default page scrolling) to trigger the action alongside the default 'Enter' key behavior. 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..3fd335d 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.code === 'Space') { + 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