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; +}