diff --git a/.Jules/palette.md b/.Jules/palette.md index bceddf1..5f9d566 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -13,3 +13,7 @@ ## 2024-06-25 - Improve Color Contrast **Learning:** Found that using `--gold` for text on white or light backgrounds (like `--paper`) fails WCAG AA contrast standards, making the text difficult to read for some users. **Action:** Avoid using `--gold` on light backgrounds. Instead, use alternatives with better contrast like `--teal`. Retain `--gold` for dark backgrounds (like `--ink`) where it provides excellent contrast. + +## 2024-06-25 - Respect prefers-reduced-motion +**Learning:** Users who have a vestibular disorder or prefer reduced motion can be negatively impacted by smooth scrolling or CSS transitions. +**Action:** Always include a `@media (prefers-reduced-motion: reduce)` media query that disables smooth scrolling (`scroll-behavior: auto !important`) and removes animation/transition durations globally. diff --git a/CHANGELOG.md b/CHANGELOG.md index e5fc107..8c24332 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,7 @@ # CHANGELOG ## [Unreleased] +- **접근성 개선**: 전정 기관 장애가 있거나 애니메이션을 최소화하려는 사용자를 위해 `prefers-reduced-motion` 미디어 쿼리를 추가하여 부드러운 스크롤 및 트랜지션을 비활성화했습니다. +- **UX 개선**: 내비게이션 링크(`.site-nav a`, `.intro-lnb a`)에 호버 시 부드러운 색상 전환 트랜지션을 추가했습니다. - **성능 개선**: `i18n.js`에서 초기 로드 시 기본 언어가 한국어(ko)인 경우 불필요한 DOM 순회 및 텍스트 업데이트를 생략하도록 개선했습니다. - **테스트 추가**: 다국어 처리 로직의 무결성을 검증하기 위해 `test_i18n.html` 테스트 파일을 추가했습니다. diff --git a/styles.css b/styles.css index 1a99f04..4a0ea61 100644 --- a/styles.css +++ b/styles.css @@ -82,6 +82,7 @@ a { .site-nav a, .intro-lnb a { text-decoration: none; + transition: color 0.2s ease; } .site-nav a:hover, @@ -777,6 +778,19 @@ h1 { } /* Accessibility enhancements */ +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto !important; + } + + *, *::before, *::after { + transition-duration: 0.01ms !important; + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + scroll-behavior: auto !important; + } +} + a:focus-visible, button:focus-visible, input:focus-visible,