From c78ae12e92b6a6211a728088857a52faa6a0f80a Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 30 Sep 2026 14:43:00 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[=EC=A0=91=EA=B7=BC?=
 =?UTF-8?q?=EC=84=B1=20=ED=96=A5=EC=83=81]=20aria-label=20=EB=8B=A4?=
 =?UTF-8?q?=EA=B5=AD=EC=96=B4=20=EC=A7=80=EC=9B=90=20=EB=B0=8F=20=ED=95=9C?=
 =?UTF-8?q?=EA=B5=AD=EC=96=B4=20=EA=B8=B0=EB=B3=B8=EA=B0=92=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What: `index.html`과 `404.html`에 하드코딩 되어 있던 영어 `aria-label` 텍스트를 한국어 기본값으로 변경하고, `i18n.js`에 `data-i18n-aria-label` 처리 로직을 추가하여 언어 변경 시 `aria-label`이 함께 번역되도록 구현했습니다. 테스트 코드도 이에 맞게 갱신했습니다.
🎯 Why: 스크린 리더 사용자가 한국어로 사이트를 이용할 때 주요 랜드마크와 버튼이 영어로 읽혀 컨텍스트 파악이 어려운 접근성 문제가 있었습니다. 또한 사이트 언어 전환 시 숨겨진 접근성 요소들은 번역되지 않는 문제가 있었습니다.
📸 Before/After: 해당 사항 없음 (시각적 변경 없음, 스크린 리더 음성 출력만 변경됨)
♿ Accessibility: 스크린 리더 사용자를 위해 네비게이션 랜드마크, 언어 전환 그룹 등 주요 컨테이너의 접근성 이름(`aria-label`)이 사이트 설정 언어에 맞게 동적으로 번역됩니다.
---
 .jules/palette.md           |  3 +++
 404.html                    |  4 ++--
 i18n.js                     | 23 ++++++++++++++++++++++-
 index.html                  | 12 ++++++------
 tests/test_i18n_features.py |  6 ++++--
 5 files changed, 37 insertions(+), 11 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..ea7c2bc
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-09-30 - Add aria-label i18n support
+**학습:** 기존 `aria-label` 텍스트들이 영어로 하드코딩 되어 있었으며, `data-i18n-title`처럼 번역 시스템과 연동되어 있지 않았습니다. 스크린 리더 사용자들이 언어를 변경할 때 탐색 랜드마크 등의 이름이 바뀌지 않는 문제가 있었습니다.
+**적용:** `i18n.js`에 `data-i18n-aria-label` 속성을 처리하는 로직을 추가하고, 하드코딩된 `aria-label`들을 한국어 기본값으로 수정한 후 `data-i18n-aria-label` 속성을 추가하여 다국어 변경 시 함께 업데이트 되도록 구현합니다.
diff --git a/404.html b/404.html
index 5e5fa8f..4c05d62 100644
--- a/404.html
+++ b/404.html
@@ -18,11 +18,11 @@
   <body>
     <a href="#top" class="skip-link">본문으로 건너뛰기</a>
     <header class="site-header">
-      <a class="brand" href="/" aria-label="Contextual Wisdom Lab home">
+      <a class="brand" href="/" aria-label="Contextual Wisdom Lab 홈" data-i18n-aria-label="nav.ariaHome">
         <img src="assets/context-wisdom-lab-avatar.svg" alt="" width="44" height="44">
         <span>Contextual Wisdom Lab</span>
       </a>
-      <nav class="site-nav" aria-label="Primary navigation">
+      <nav class="site-nav" aria-label="주 탐색" data-i18n-aria-label="nav.ariaPrimary">
         <a href="/#principles">소개</a>
         <a href="/#problem">문제의식</a>
         <a href="/#dikw">연구모형</a>
diff --git a/i18n.js b/i18n.js
index 66acf7f..1ce902d 100644
--- a/i18n.js
+++ b/i18n.js
@@ -21,6 +21,13 @@ const messages = {
     "nav.work": "작업",
     "nav.skipToContent": "본문으로 건너뛰기",
     "common.newTab": "새 창에서 열림",
+    "nav.ariaHome": "Contextual Wisdom Lab 홈",
+    "nav.ariaPrimary": "주 탐색",
+    "nav.ariaLanguage": "언어",
+    "hero.ariaActions": "홈페이지 작업",
+    "ladder.ariaList": "데이터에서 지혜로 가는 단계",
+    "nav.ariaIntro": "소개 탐색",
+
     "hero.title": "맥락지혜 연구실",
     "hero.labName": "Contextual Wisdom Lab",
     "hero.thesis": "구슬이 서 말이어도 꿰어야 보배이듯, 문서, 메일, 로그, 회의록을 맥락 안에서 엮어 사람이 무엇을 결정하고 무엇을 실행할지 보이게 하는 AI 의사결정 지원 시스템을 연구하고 만듭니다.",
@@ -180,6 +187,13 @@ const messages = {
     "nav.work": "Work",
     "nav.skipToContent": "Skip to main content",
     "common.newTab": "Opens in a new window",
+    "nav.ariaHome": "Contextual Wisdom Lab home",
+    "nav.ariaPrimary": "Primary navigation",
+    "nav.ariaLanguage": "Language",
+    "hero.ariaActions": "Homepage actions",
+    "ladder.ariaList": "Data to wisdom ladder",
+    "nav.ariaIntro": "Introduction navigation",
+
     "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.",
@@ -406,7 +420,7 @@ function setLanguage(lang) {
 
   if (!isInitialDefault) {
     if (!i18nNodes) {
-      i18nNodes = document.querySelectorAll("[data-i18n], [data-i18n-title]");
+      i18nNodes = document.querySelectorAll("[data-i18n], [data-i18n-title], [data-i18n-aria-label]");
     }
 
     // Only update textContent if it actually changed to avoid layout recalculations
@@ -423,6 +437,13 @@ function setLanguage(lang) {
           node.setAttribute("title", newTitle);
         }
       }
+      if (node.hasAttribute("data-i18n-aria-label")) {
+        const newAriaLabel = dict[node.getAttribute("data-i18n-aria-label")];
+        if (newAriaLabel && node.getAttribute("aria-label") !== newAriaLabel) {
+          node.setAttribute("aria-label", newAriaLabel);
+        }
+      }
+
     });
   }
 
diff --git a/index.html b/index.html
index b553382..8edf45a 100644
--- a/index.html
+++ b/index.html
@@ -47,12 +47,12 @@
     <span id="new-window-desc" class="visually-hidden" data-i18n="common.newTab">새 창에서 열림</span>
     <a href="#top" class="skip-link" data-i18n="nav.skipToContent">본문으로 건너뛰기</a>
     <header class="site-header">
-      <a class="brand" href="#top" aria-label="Contextual Wisdom Lab home">
+      <a class="brand" href="#top" aria-label="Contextual Wisdom Lab 홈" data-i18n-aria-label="nav.ariaHome">
         <!-- ⚡ Bolt: Removed decoding="async" for SVG/LCP optimization -->
         <img src="assets/context-wisdom-lab-avatar.svg" alt="" width="44" height="44">
         <span>Contextual Wisdom Lab</span>
       </a>
-      <nav class="site-nav" aria-label="Primary navigation">
+      <nav class="site-nav" aria-label="주 탐색" data-i18n-aria-label="nav.ariaPrimary">
         <a href="#principles" data-i18n="nav.intro">소개</a>
         <a href="#problem" data-i18n="nav.problem">문제의식</a>
         <a href="#dikw" data-i18n="nav.model">연구모형</a>
@@ -63,7 +63,7 @@
         <a href="#work" data-i18n="nav.work">작업</a>
         <a aria-describedby="new-window-desc" target="_blank" rel="noopener noreferrer" href="https://github.com/ContextualWisdomLab" title="새 창에서 열림" data-i18n-title="common.newTab">GitHub</a>
       </nav>
-      <div class="language-switch" role="group" aria-label="Language">
+      <div class="language-switch" role="group" aria-label="언어" data-i18n-aria-label="nav.ariaLanguage">
         <button type="button" data-lang="ko" lang="ko" aria-pressed="true" aria-label="한국어" title="한국어로 보기" data-i18n-title="nav.langKoTitle">KO</button>
         <button type="button" data-lang="en" lang="en" aria-pressed="false" aria-label="English" title="View in English" data-i18n-title="nav.langEnTitle">EN</button>
       </div>
@@ -77,7 +77,7 @@ <h1 data-i18n="hero.title">맥락지혜 연구실</h1>
           <p class="thesis" data-i18n="hero.thesis">
             구슬이 서 말이어도 꿰어야 보배이듯, 문서, 메일, 로그, 회의록을 맥락 안에서 엮어 사람이 무엇을 결정하고 무엇을 실행할지 보이게 하는 AI 의사결정 지원 시스템을 연구하고 만듭니다.
           </p>
-          <div class="hero-actions" role="group" aria-label="Homepage actions">
+          <div class="hero-actions" role="group" aria-label="홈페이지 작업" data-i18n-aria-label="hero.ariaActions">
             <a aria-describedby="new-window-desc" target="_blank" rel="noopener noreferrer" class="button primary" href="https://github.com/ContextualWisdomLab" data-i18n="hero.primaryCta" title="새 창에서 열림" data-i18n-title="common.newTab">GitHub 보기</a>
             <a class="button secondary" href="#dikw" data-i18n="hero.secondaryCta">DIKW 보기</a>
           </div>
@@ -86,7 +86,7 @@ <h1 data-i18n="hero.title">맥락지혜 연구실</h1>
         <div class="hero-visual">
           <!-- ⚡ Bolt: Removed decoding="async" for SVG/LCP optimization -->
           <img class="context-art" src="assets/context-thread-map.svg" alt="" aria-hidden="true" width="760" height="560" fetchpriority="high">
-          <div class="ladder" role="list" aria-label="Data to wisdom ladder">
+          <div class="ladder" role="list" aria-label="데이터에서 지혜로 가는 단계" data-i18n-aria-label="ladder.ariaList">
             <div class="ladder-row" role="listitem">
               <span>Data</span>
               <strong data-i18n="ladder.data">기록된 흔적 · 문서 · 메일 · 로그</strong>
@@ -107,7 +107,7 @@ <h1 data-i18n="hero.title">맥락지혜 연구실</h1>
         </div>
       </section>
 
-      <nav class="intro-lnb" aria-label="Introduction navigation">
+      <nav class="intro-lnb" aria-label="소개 탐색" data-i18n-aria-label="nav.ariaIntro">
         <a href="#principles" data-i18n="nav.contextualWisdom">이름 뜻</a>
         <a href="#problem" data-i18n="nav.problem">문제의식</a>
         <a href="#dikw" data-i18n="nav.dikw">DIKW</a>
diff --git a/tests/test_i18n_features.py b/tests/test_i18n_features.py
index 63732df..6ad22d4 100644
--- a/tests/test_i18n_features.py
+++ b/tests/test_i18n_features.py
@@ -5,10 +5,12 @@
 def test_i18n_js_supports_title_translation() -> None:
     js = (ROOT / "i18n.js").read_text(encoding="utf-8")
     assert "data-i18n-title" in js
-    assert "querySelectorAll(\"[data-i18n], [data-i18n-title]\")" in js
+    assert "querySelectorAll(\"[data-i18n], [data-i18n-title], [data-i18n-aria-label]\")" in js
     assert "node.getAttribute" in js
     assert "node.dataset" not in js
 
-def test_index_html_uses_title_translation() -> None:
+def test_index_html_uses_title_translation_and_aria_label_translation() -> None:
     html = (ROOT / "index.html").read_text(encoding="utf-8")
     assert "data-i18n-title" in html
+
+    assert "data-i18n-aria-label" in html