접근성

이 페이지에서는 아이콘이 스크린 리더, 키보드, 터치 입력, 동작 줄이기 설정과 어떻게 동작하는지 설명합니다.

접근 가능한 이름

title이 없으면 아이콘은 aria-hidden이 되어 스크린 리더가 건너뜁니다. 아이콘이 버튼이나 링크의 유일한 내용이라면 컨트롤에 aria-label을 지정하거나 아이콘에 title을 지정해 접근 가능한 이름을 부여하세요.

tsx

import { Settings } from "kubai-icons-react";

<button aria-label="Settings"><Settings /></button>

<button><Settings title="Settings" /></button>

<kubai-icon> 웹 컴포넌트는 label 속성에서 접근 가능한 이름을 가져옵니다.

prefers-reduced-motion이 설정되어 있으면 아이콘은 애니메이션 없이 바로 끝 포즈로 이동합니다.
trigger="parent"를 사용하면 키보드 포커스도 호버와 마찬가지로 모션을 재생합니다. 마우스 클릭 후 남은 포커스는 재생하지 않습니다.
터치 화면에서는 탭하면 모션이 앞으로 재생되고 다시 탭하면 되돌아갑니다. 토글 아이콘은 대신 상태가 전환됩니다.
Bookmark 같은 토글 아이콘은 상태를 색상과 모양으로만 나타냅니다. 스크린 리더가 상태를 알릴 수 있도록 아이콘 옆에 보이는 텍스트를 추가하거나 버튼에 aria-pressed를 지정하세요.