diff --git a/.Jules/palette.md b/.Jules/palette.md index 7c7c523..8450ca3 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-25 - Using `` Tags as Buttons +**Learning:** When using `` tags with `href="#"` as buttons to open modals or trigger actions, they lack the semantic role and keyboard interactions that users expect from actual buttons. Specifically, screen readers will announce them as links, and natively they only trigger on `Enter`, not on `Spacebar` (which instead scrolls the page). +**Action:** Always add `role="button"` and `aria-haspopup="dialog"` (if applicable) when using anchor tags as buttons. Additionally, manually bind a `keydown` event listener for the `Spacebar` key (checking for `e.key === ' '`), and ensure you call `e.preventDefault()` to stop the default page scroll, so they respond consistently like actual native `