ContextualWisdomLab · seonghobae · Jun 30, 2026 · Jun 25, 2026 · Jun 28, 2026 · Jun 28, 2026
diff --git a/.jules/palette.md b/.jules/palette.md
@@ -1,3 +1,7 @@
 ## 2024-05-15 - Enhancing Generated File Tree HTML
 **Learning:** Raw directory listings generated into HTML often lack critical accessibility meta tags (like `lang="en"`, `viewport` for responsive scaling) and aria-labels for directory/file links (which are otherwise non-descriptive for screen readers like just `&#128193; folderName`).
 **Action:** Always include base semantic structures (`<main>`, `<html lang="en">`, responsive meta tags) and `aria-label`s specifying the entity type (e.g., `folderName directory`) when generating raw navigation trees to ensure keyboard and screen-reader usability. Add `:focus` styles mimicking `:hover` for keyboard users.
+
+## 2024-06-25 - Directory Listing Navigation Landmark
+**Learning:** Generated directory listings act as navigation regions, and screen readers benefit when the listing is announced separately from the page's main content.
+**Action:** Wrap generated directory listing `<ul>` elements in `<nav aria-label="Directory listing">` while keeping the surrounding semantic `<main>` structure.
diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt
@@ -148,6 +148,7 @@ fun process_dir(curr_dir: File){
      <body>
        <main>
          <h1>${curr_dir.getName().escapeHtml()}</h1>
+         <nav aria-label="Directory listing">
          <ul>
             <li><a style="display:block; width:100%" href="./.." aria-label="상위 디렉토리로 이동">&#x21B0; ..</a></li>
 """ 
@@ -173,6 +174,7 @@ fun process_dir(curr_dir: File){
 
    val index_bottom="""
          </ul>
+         </nav>
        </main>
     </body>
 </html>

diff --git a/src/test/kotlin/html4tree/MainTest.kt b/src/test/kotlin/html4tree/MainTest.kt
@@ -125,6 +125,7 @@ class MainTest {
         assertTrue(indexFile.exists())
         val htmlContent = indexFile.readText()
         assertTrue(htmlContent.contains("<html lang=\"ko\">"))
+        assertTrue(htmlContent.contains("<nav aria-label=\"Directory listing\">"))
         assertTrue(htmlContent.contains("<main>"))
         assertTrue(htmlContent.contains("</main>"))
         assertTrue(htmlContent.contains("aria-label=\"상위 디렉토리로 이동\""))
-Original file line number
+Diff line change
@@ Expand Up / @@ -148,6 +148,7 @@ fun process_dir(curr_dir: File){ @@
          <body>
            <main>
              <h1>${curr_dir.getName().escapeHtml()}</h1>
+             <nav aria-label="Directory listing">
              <ul>
                 <li><a style="display:block; width:100%" href="./.." aria-label="상위 디렉토리로 이동">&#x21B0; ..</a></li>
     """
@@ Expand All / @@ -173,6 +174,7 @@ fun process_dir(curr_dir: File){ @@
        val index_bottom="""
              </ul>
+             </nav>
            </main>
         </body>
     </html>
@@ Expand Down @@