언어 · Language
← 데모 목록으로

순수 CSS — 접근성

prefers-reduced-motion을 존중합니다. 다만 순수 CSS로는 콘텐츠를 고정할 수 없어, 위로 스크롤하면 공개가 되감기며 다시 사라집니다.

prefers-reduced-motion

접근성이 먼저

콘텐츠에는 언제나 접근할 수 있어야 하고, 애니메이션은 그것을 돕되 가로막지 않아야 합니다.

스크롤과 접근성

사용자의 모션 설정을 존중합니다.

접근성 특징

CSS만으로 보장할 수 있는 것과 없는 것.

모션 감소

사용자가 모션 감소를 선호하면 애니메이션이 꺼집니다.

CSS로는 고정 불가

스크롤 타임라인은 진행도를 위치에 대응시키므로, 위로 스크롤하면 공개가 역재생됩니다. 고정하려면 JS가 필요합니다 — IO 접근성 또는 rAF 접근성을 보세요.

또렷한 포커스

키보드 탐색을 위해 포커스 표시를 분명하게 그립니다.

접근성은 중요합니다

스크롤 위치에 따라 통계가 나타납니다.

15%
장애가 있는 사용자 비율
WCAG
2.1 AA 기준
4.5:1
최소 명도 대비

접근성 구현

  • @media (prefers-reduced-motion)으로 애니메이션 끄기
  • animation-fill-mode는 구간 밖 상태를 유지할 뿐, 고정은 못 합니다
  • 랜드마크를 갖춘 시맨틱 HTML
  • 키보드 사용자를 위한 건너뛰기 링크

관련 WCAG 지침

  • 2.3.3 상호작용에 의한 애니메이션 (AAA)
  • 2.2.2 일시정지·정지·숨기기 (A)
  • 1.4.3 최소 명도 대비 (AA)
  • 2.4.7 포커스 표시 (AA)

권장 사항

  • 애니메이션 뒤에 콘텐츠를 영구히 숨기지 않기
  • 모션 없는 대안을 항상 제공하기
  • 스크린 리더로 직접 확인하기
  • 시맨틱 HTML 구조 쓰기