From 8412948de009286d5d0e19f9a8306dd120a5178a Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Sun, 6 Sep 2026 03:40:08 +0000 Subject: [PATCH 1/8] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0]=20nav=20=EC=9A=94=EC=86=8C=EC=97=90=20aria-labelledb?= =?UTF-8?q?y=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .jules/palette.md | 3 +++ src/main/kotlin/html4tree/main.kt | 3 ++- src/test/kotlin/html4tree/MainTest.kt | 3 ++- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/.jules/palette.md b/.jules/palette.md index 604d7810..5bf82fb6 100644 --- a/.jules/palette.md +++ b/.jules/palette.md @@ -73,3 +73,6 @@ ## 2026-08-17 - 브라우저 번역과 화면 판독기의 호환성을 위한 텍스트 처리 **Learning:** `aria-label` 속성으로 지정된 화면 판독기용 대체 텍스트는 Chrome Translate 등 브라우저 번역 도구에 의해 번역되지 않는 경우가 많습니다. 이로 인해 문서 언어가 변환되어도 스크린 리더에서는 원본 언어(예: 영어)로 읽혀 다국어 접근성이 저하됩니다. **Action:** 화면 판독기를 위한 숨겨진 설명 텍스트를 제공할 때 `aria-label` 대신 CSS `.visually-hidden` 클래스를 적용한 `` 요소를 사용하여, 브라우저가 일반 텍스트로 인식하고 번역할 수 있도록 하여 다국어 접근성 호환성을 확보하십시오. +## 2026-09-06 - aria-label 대신 aria-labelledby를 사용하여 네비게이션 헤더 작성 +**Learning:** 브라우저 번역 도구는 종종 `aria-label` 속성을 번역하지 못하는 반면, 시각적으로 숨겨진 요소 내의 표준 텍스트 노드는 올바르게 번역합니다. 또한, 실제 제목 요소를 사용하면 스크린 리더 사용자가 '제목 단위 이동' 단축키를 사용하여 네비게이션 블록을 더 쉽게 발견할 수 있습니다. (aria-labelledby 번역 호환성) +**Action:** 항상 시각적으로 숨겨진 제목 요소 (예: ``)를 선호하고 번역된 텍스트를 직접 `aria-label`에 배치하는 대신 `aria-labelledby="nav-heading"`을 사용하여 네비게이션 컨테이너와 연결합니다. diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt index 0972fa2c..2d0de1da 100644 --- a/src/main/kotlin/html4tree/main.kt +++ b/src/main/kotlin/html4tree/main.kt @@ -427,7 +427,8 @@ fun process_dir(curr_dir: File, excludeSet: Set? = null, dirFiles: Array

${directoryName.escapeHtml()}

-