시각적으로 숨김

시각적으로 숨김 (Visually Hidden)

화면에서는 콘텐츠를 숨기되 보조 기술(스크린 리더)에는 보존해 주는 컴포넌트예요. 시각적 UI를 바꾸지 않으면서 접근성 정보를 제공할 때 사용해요.

출처: 문서

본문

Visually Hidden은 화면에서 콘텐츠를 숨기면서도 보조 기술을 위해서는 보존해 주는 컴포넌트예요.

기능 (Features)

  • 콘텐츠를 시각적으로 숨기면서도 보조 기술에는 그대로 남겨 둬요.

구조 (Anatomy)

컴포넌트를 임포트해요.

import { VisuallyHidden } from "radix-ui";

export default () => <VisuallyHidden.Root />;

기본 예제 (Basic example)

visually hidden 프리미티브를 사용해 봐요.

import { VisuallyHidden } from "radix-ui";

import { GearIcon } from "@radix-ui/react-icons";

export default () => (
  <button>
    <GearIcon />

    <VisuallyHidden.Root>Settings</VisuallyHidden.Root>
  </button>
);

API Reference

Root

이 컴포넌트 안에 넣은 모든 것은 화면에서는 숨겨지지만 화면 리더가 읽어 줘요.

Prop Type Default
asChild boolean false

접근성 (Accessibility)

aria-label이나 aria-labelledby를 사용한 전통적인 레이블링의 대안으로 특정 시나리오에서 유용해요.

더 알아보기 (Learn more)