시각적으로 숨기기
시각적으로 숨기기 (Visually Hidden)
화면에서는 콘텐츠를 숨기되, 스크린 리더가 읽을 수 있도록 접근성을 유지하고 싶을 때 사용해요. VisuallyHidden 컴포넌트는 시각적으로는 보이지 않지만 접근성 트리에는 남아 있는 콘텐츠를 렌더링해 줍니다.
출처: 문서
본문
사용법 (Usage)
import { VisuallyHidden } from "@chakra-ui/react"
<VisuallyHidden>Hidden content</VisuallyHidden>
예시 (Examples)
입력 필드 (Input)
asChild prop을 사용하면 VisuallyHidden 컴포넌트에 자식 요소를 전달할 수 있어요. 이렇게 하면 숨기고 싶은 실제 요소를 감싸지 않고 그 자체를 숨길 수 있습니다.