Skip to content

🎨 Palette: [접근성 개선] 네비게이션 aria-label을 숨겨진 헤딩 태그 참조로 변경 #627

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
seonghobae wants to merge 5 commits into
base: master
Choose a base branch
from
Draft

🎨 Palette: [접근성 개선] 네비게이션 aria-label을 숨겨진 헤딩 태그 참조로 변경 #627

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d7eb34b
🎨 Palette: [접근성 개선] 네비게이션 aria-label을 숨겨진 헤딩 태그 참조로 변경
seonghobae Sep 5, 2026
e83da07
docs(a11y): ground navigation landmark labeling
seonghobae Sep 5, 2026
bf7f2c7
🎨 Palette: [접근성 개선] 네비게이션 aria-label을 숨겨진 헤딩 태그 참조로 변경
seonghobae Sep 5, 2026
dbe2146
🎨 Palette: [접근성 개선] 네비게이션 aria-label을 숨겨진 헤딩 태그 참조로 변경
seonghobae Sep 5, 2026
7fb7668
🎨 Palette: [접근성 개선] 네비게이션 aria-label을 숨겨진 헤딩 태그 참조로 변경
seonghobae Sep 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,3 +73,6 @@
## 2026-08-17 - 브라우저 번역과 화면 판독기의 호환성을 위한 텍스트 처리
**Learning:** `aria-label` 속성으로 지정된 화면 판독기용 대체 텍스트는 Chrome Translate 등 브라우저 번역 도구에 의해 번역되지 않는 경우가 많습니다. 이로 인해 문서 언어가 변환되어도 스크린 리더에서는 원본 언어(예: 영어)로 읽혀 다국어 접근성이 저하됩니다.
**Action:** 화면 판독기를 위한 숨겨진 설명 텍스트를 제공할 때 `aria-label` 대신 CSS `.visually-hidden` 클래스를 적용한 `<span>` 요소를 사용하여, 브라우저가 일반 텍스트로 인식하고 번역할 수 있도록 하여 다국어 접근성 호환성을 확보하십시오.
## 2024-05-15 - 네비게이션 접근성 개선
**Learning:** `<nav>` 태그에 `aria-label`을 사용하는 대신 내부에 시각적으로 숨겨진 `<h2>` 태그를 두고 이를 `aria-labelledby`로 참조하게 하면 스크린 리더 사용자가 헤딩 단위로 탐색할 수 있어 유용하며, `aria-label`이 번역 도구에 의해 번역되지 않는 i18n 문제도 해결할 수 있습니다.
**Action:** 향후 네비게이션 영역 구현 시 `aria-label`보다 숨겨진 제목 요소와 `aria-labelledby`의 조합을 우선적으로 고려합니다.
3 changes: 2 additions & 1 deletion src/main/kotlin/html4tree/main.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -427,7 +427,8 @@ fun process_dir(curr_dir: File, excludeSet: Set<String>? = null, dirFiles: Array
<body>
<main>
<h1>${directoryName.escapeHtml()}</h1>
<nav aria-label="디렉토리 목록">
<nav aria-labelledby="nav-heading">
<h2 id="nav-heading" class="visually-hidden">디렉토리 목록</h2>
<ul role="list">
<li><a class="dir-link" href="./.." title="상위 디렉토리로 이동"><span class="icon" aria-hidden="true">&#x21B0;</span> <span aria-hidden="true">..</span> <span class="visually-hidden">상위 디렉토리로 이동</span></a></li>
"""
Expand Down
3 changes: 2 additions & 1 deletion src/test/kotlin/html4tree/MainTest.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -331,7 +331,8 @@ class MainTest {
assertTrue(htmlContent.contains("<meta name=\"theme-color\" content=\"#ffffff\" media=\"(prefers-color-scheme: light)\">"))
assertTrue(htmlContent.contains("<meta name=\"theme-color\" content=\"#0d1117\" media=\"(prefers-color-scheme: dark)\">"))
assertRobotsDirective(htmlContent)
assertTrue(htmlContent.contains("<nav aria-label=\"디렉토리 목록\">"))
assertTrue(htmlContent.contains("<nav aria-labelledby=\"nav-heading\">"))
assertTrue(htmlContent.contains("<h2 id=\"nav-heading\" class=\"visually-hidden\">디렉토리 목록</h2>"))
assertTrue(htmlContent.contains("role=\"list\""))
assertTrue(htmlContent.contains("<main>"))
assertTrue(htmlContent.contains("</main>"))
Expand Down
Loading