7. 접근성과 움직임

7.1 포커스 표시는 항상 눈에 보이게 남깁니다

포커스 위치를 형태로 구분해 키보드 사용자가 현재 위치를 알 수 있습니다.

포커스 표시를 유지하고 outline: none을 쓸 때는 대체 스타일을 함께 제공합니다. 표시는 수정자 안에만 두지 않고 **기본 블록의 :focus-visible**로 선언합니다.

:focus-visible을 적용할지는 브라우저가 입력 방식과 사용자 설정으로 판단하므로 고정 규칙으로 가정하지 않습니다. WCAG 2.2 SC 1.4.11(AA)은 인접 색 대비를, SC 2.4.13(AAA)은 2 CSS px 둘레의 최소 면적과 3:1 대비를 요구합니다.

포커스 링을 제거하고 대체를 두지 않습니다.

.ui_button__root {
	border: 1px solid #d9d9d9;

	&:focus {
		outline: none;
	}
}

:focus-visible에 형태가 바뀌는 표시를 기본 블록에 둡니다.

.ui_button__root {
	border: 1px solid #d9d9d9;

	&:focus-visible {
		outline: 2px solid #1677ff;
		outline-offset: 2px;
	}
}

색만 바꾸고 수정자 안에만 둡니다.

.ui_input__field--invalid {
	&:focus-visible {
		outline: none;
		color: #1677ff;
	}
}

그림자 링에 투명한 외곽선을 함께 두어 강제 색상 모드에서도 표시를 남깁니다.

.ui_input__field {
	border: 1px solid #d9d9d9;

	&:focus-visible {
		outline: 2px solid transparent;
		outline-offset: 2px;
		border-color: #1677ff;
		box-shadow: 0 0 0 3px #1677ff;
	}
}

함께 보기

• 4.6 DOM 상태 가상 클래스는 해당 요소의 기본 블록에 둡니다

7.2 @keyframes 이름에 소유자를 붙이고 prefers-reduced-motion을 따릅니다

전역 애니메이션 이름의 충돌을 막고 움직임에 민감한 사용자의 설정을 따릅니다.

@keyframes에는 소유자 이름을 붙이고 움직임 감소 설정은 전역 스타일시트 한 곳에서 처리합니다.

이름과 토큰

일반 CSS의 @keyframes는 파일로 격리되지 않으며, 같은 이름이 있으면 문서 순서상 뒤의 정의가 적용됩니다.

지속 시간과 이징 토큰은 규칙 5.2의 예외입니다.

도구 설정과 속성

움직임 감소 처리

움직임 감소 요청이 오면 기본으로 전역에서 animation과 transition을 함께 차단합니다.

0.01ms도 transitionend 발생을 보장하지 않으므로 취소되거나 제거된 요소의 완료를 이벤트에만 맡기지 않습니다.

전역 이름을 겹치게 쓰고 시간을 직접 적습니다.

@keyframes fadeIn {
	from {
		opacity: 0;
	}
}

.pg_products__panel {
	animation: fadeIn 200ms ease-out;
}

소유자를 붙인 이름과 토큰을 씁니다.

@keyframes pg_products__fadeIn {
	from {
		opacity: 0;
	}
}

.pg_products__panel {
	animation: pg_products__fadeIn var(--app-motion-duration-fast) var(--app-motion-easing-out);
}

컴포넌트 파일마다 따로 끄고 지속 시간을 0으로 둡니다.

@media (prefers-reduced-motion: reduce) {
	.pg_products__panel {
		animation-duration: 0s;
	}
}

전역 스타일시트에서 한 번 처리합니다.

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}

함께 보기

• 5.2 여러 파일이 쓰는 값은 전역 토큰으로 씁니다
• 8.1 stylelint로 자동 검사할 규칙을 설정합니다