Skip to content

🎨 Palette: Add skip to main content link #11

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

Merged
github-actions merged 1 commit into from
Jun 21, 2026
Merged

🎨 Palette: Add skip to main content link #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 4 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 `<main>` `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.
2 changes: 2 additions & 0 deletions i18n.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 의사결정 지원 시스템을 연구하고 만듭니다.",
Expand Down Expand Up @@ -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.",
Expand Down
3 changes: 2 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
<script src="i18n.js" defer></script>
</head>
<body>
<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">
<img src="assets/context-wisdom-lab-avatar.svg" alt="" width="44" height="44">
Expand All @@ -45,7 +46,7 @@
</div>
</header>

<main id="top">
<main id="top" tabindex="-1">
<section class="hero">
<div class="hero-copy">
<h1 data-i18n="hero.title">맥락지혜 연구실</h1>
Expand Down
21 changes: 21 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Loading