시각적으로 숨기기
시각적으로 숨기기 (Visually hidden)
요소를 시각적으로 숨기되, 보조 기술에는 계속 접근 가능하도록 남겨 두는 헬퍼예요.
출처: 문서
본문
.visually-hidden은 요소를 시각적으로 숨기면서도 스크린 리더 같은 보조 기술에는 계속 노출해요. .visually-hidden-focusable은 기본적으로는 시각적으로 숨기되, 요소가 포커스를 받으면(예: 키보드 전용 사용자) 표시해 줘요. .visually-hidden-focusable은 컨테이너에도 적용할 수 있는데, :focus-within 덕분에 컨테이너의 어떤 자식 요소라도 포커스를 받으면 컨테이너가 표시돼요.
<h2 class="visually-hidden">
Title for screen readers
</h2>
<a class="visually-hidden-focusable" href="#content">
Skip to main content
</a>
<div class="visually-hidden-focusable">
A container with a
<a href="#">
focusable element
</a>
.
</div>
visually-hidden과 visually-hidden-focusable은 모두 mixin으로도 사용할 수 있어요.
// Usage as a mixin
.visually-hidden-title {
@include visually-hidden;
}
.skip-navigation {
@include visually-hidden-focusable;
}