From 90ab7fb2b4a9278ffcdc34dda62f418cbd7a29ee Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Sun, 21 Jun 2026 13:56:08 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20skip=20to=20mai?= =?UTF-8?q?n=20content=20link=20for=20accessibility?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds a hidden "Skip to main content" link at the top of the body that becomes visible when focused via keyboard navigation. Updates the main element to receive focus and adds required i18n support. --- .Jules/palette.md | 4 ++++ i18n.js | 2 ++ index.html | 3 ++- styles.css | 21 +++++++++++++++++++++ 4 files changed, 29 insertions(+), 1 deletion(-) diff --git a/.Jules/palette.md b/.Jules/palette.md index 74a96e8..3723067 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -1,3 +1,7 @@ ## 2024-06-19 - Added ARIA roles to generic div containers **Learning:** Found a recurring pattern in the app where generic `div` elements were being used with `aria-label` but lacked a specific role (e.g., `.language-switch`, `.hero-actions`). This makes screen readers announce them poorly since they don't know what kind of component the label applies to. **Action:** When adding `aria-label` to group interactive elements in generic containers (`div` or `span`), always remember to add `role="group"` (or another appropriate role) to give screen readers proper context. + +## 2024-06-21 - Added skip-to-content link +**Learning:** Found a missing skip-to-content link, which is a key accessibility feature to help keyboard and screen reader users bypass navigation. Additionally learned that giving `
` `tabindex="-1"` and removing its outline when `:focus-visible` ensures proper focus handling after clicking the skip link without disruptive visual outlines. +**Action:** Always include a skip-to-content link near the start of the `body` and manage target focus appropriately. diff --git a/i18n.js b/i18n.js index e9707b5..593b203 100644 --- a/i18n.js +++ b/i18n.js @@ -17,6 +17,7 @@ const messages = { "nav.forks": "Fork", "nav.references": "참고문헌", "nav.work": "작업", + "nav.skipToContent": "본문으로 건너뛰기", "hero.title": "맥락지혜 연구실", "hero.labName": "Contextual Wisdom Lab", "hero.thesis": "구슬이 서 말이어도 꿰어야 보배이듯, 문서, 메일, 로그, 회의록을 맥락 안에서 엮어 사람이 무엇을 결정하고 무엇을 실행할지 보이게 하는 AI 의사결정 지원 시스템을 연구하고 만듭니다.", @@ -159,6 +160,7 @@ const messages = { "nav.forks": "Forks", "nav.references": "References", "nav.work": "Work", + "nav.skipToContent": "Skip to main content", "hero.title": "Contextual Wisdom Lab", "hero.labName": "Research Lab", "hero.thesis": "A research lab building AI decision support systems. Even a heap of beads becomes treasure only when threaded; we compose context across documents, mail, logs, and meeting notes so people can see what to decide and what to do next.", diff --git a/index.html b/index.html index 4faa35b..fe24e53 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,7 @@ +
@@ -45,7 +46,7 @@
-
+

맥락지혜 연구실

diff --git a/styles.css b/styles.css index c7cd409..dfc509c 100644 --- a/styles.css +++ b/styles.css @@ -763,3 +763,24 @@ textarea:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } + +main:focus-visible { + outline: none; +} + +.skip-link { + position: absolute; + top: -40px; + left: 0; + background: var(--ink); + color: var(--white); + padding: 8px 16px; + z-index: 100; + font-weight: 800; + text-decoration: none; + transition: top 0.2s ease-in-out; +} + +.skip-link:focus-visible { + top: 0; +}