Visually Hidden

Visually Hidden 컴포넌트는 시각적으로는 숨겨지지만 스크린리더 사용자에게는 읽히는 콘텐츠를 제공합니다. 이를 통해 시각적 인터페이스를 깔끔하게 유지하면서도 보조 기술 사용자에게 필요한 정보를 전달할 수 있습니다.

스크린리더에만 전달해야 하는 추가 설명이나 맥락 정보를 제공할 때 사용합니다.

아이콘만 있는 버튼에 접근성 레이블을 제공합니다. aria-label을 사용하는 것도 좋은 대안입니다.

Tailwind CSS의 sr-only 클래스를 사용할 수도 있습니다. VisuallyHidden 컴포넌트와 동일한 효과를 냅니다.

다음 CSS 속성들은 스크린리더가 콘텐츠를 읽지 못하게 하므로 사용하면 안 됩니다:

• display: none - 완전히 숨김
• visibility: hidden - 완전히 숨김
• width: 0; height: 0 - 크기 0
• font-size: 0 - 폰트 크기 0

Visually Hidden이 적절한 경우:

• 아이콘 버튼에 레이블 제공
• 복잡한 비텍스트 콘텐츠에 추가 설명 제공
• 상태 변화 정보 전달 (예: "3개 항목 선택됨")
• 조작 방법 안내 (예: "Enter 키를 눌러 제출")

Visually Hidden을 사용하지 않아야 하는 경우:

• 간단한 이미지 설명 → alt 속성 사용
• 요소의 접근성 이름 → aria-label 사용
• 연결된 레이블 → aria-labelledby 사용

KRDS 접근성 가이드라인:

• 시맨틱 HTML을 우선 사용하고, 숨긴 텍스트는 보조 수단으로 활용
• 다양한 스크린리더(센스리더, VoiceOver, TalkBack)로 테스트
• 다국어 서비스의 경우 숨긴 텍스트도 번역 제공
• CMS에서 숨긴 텍스트 작성 기능 지원 권장