VisuallyHidden

todae.base 레이어의 유틸리티 클래스 두 개가 화면에서는 내용을 숨기고 보조 기술에는 남겨 둡니다. 컴포넌트는 없습니다. 아무 요소에나 클래스를 붙이세요.

todae-visually-hidden은 항상 숨깁니다.
todae-visually-hidden-focusable은 포커스가 안으로 들어올 때까지 숨깁니다. 건너뛰기 링크에 씁니다.

3 unread messages

<a href="#main" className="todae-visually-hidden-focusable">Skip to content</a>

<Button.Root>
	<Button.Icon><TrashIcon /></Button.Icon>
	<span className="todae-visually-hidden">Delete draft</span>
</Button.Root>

선언에 !important를 쓰므로 컴포넌트 자체의 패딩이나 크기 때문에 숨긴 내용이 보이는 일은 없습니다. 아이콘만 있는 Button.Root처럼 요소가 이미 aria-label을 받는다면 aria-label을 쓰세요.

언제 쓰나요

언제: 보는 사용자는 맥락으로 알지만 스크린 리더에는 필요한 텍스트. 아이콘의 의미, 숫자 뒤의 단위, 건너뛰기 링크.

쓰지 않을 때: 아무도 닿지 않아야 할 내용 → hidden. aria-label을 받는 컨트롤의 이름 → aria-label. 보조 기술에서만 숨기기 → aria-hidden.