접근 가능한 아이콘

접근 가능한 아이콘 (Accessible Icon)

레이블을 추가해서 아이콘을 접근 가능하게 만들어 주는 유틸리티 컴포넌트예요. 아이콘을 감싸고 의미 있는 label을 제공하면 모든 사용자가 그 의미를 이해할 수 있어요.

출처: 문서

본문

Accessible Icon은 아이콘을 감싸고 의미 있는 레이블(label)을 붙여서 아이콘을 접근 가능하게 만들어 주는 컴포넌트예요.

기능 (Features)

  • 아이콘을 감싸고 의미 있는 label을 제공해 어떤 아이콘이든 쉽게 접근 가능하게 만들어 줘요.

  • 시각적으로는 차이가 없지만, 화면 리더가 정확하게 읽어 줘요.

구조 (Anatomy)

컴포넌트를 임포트해요.

import { AccessibleIcon } from "radix-ui";

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

API Reference

Root

접근 가능하게 만들 아이콘을 담고 있어요.

Prop Type Default
label* string No default value

접근성 (Accessibility)

대부분의 아이콘이나 아이콘 시스템은 접근성이 기본으로 내장되어 있지 않아요. 예를 들어, 시각적으로 같은 십자(cross) 아이콘은 실제로 "닫기(close)" 또는 **"삭제(delete)"**를 뜻할 수 있어요. 이 컴포넌트는 앱 전반에서 사용되는 아이콘에 의미를 부여할 수 있게 해 줘요.

이 컴포넌트는 Visually Hidden을 기반으로 만들어졌어요.

더 알아보기 (Learn more)