無障礙
本頁說明圖示如何配合螢幕閱讀器、鍵盤、觸控輸入和「減少動態效果」設定運作。
無障礙名稱
沒有 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> Web Component 的無障礙名稱取自 label 屬性。
輸入與動態
- 設定
prefers-reduced-motion時，圖示會直接移到結束姿態，不播放動畫。 - 使用
trigger="parent"時，鍵盤焦點會和滑過一樣播放動態；滑鼠點擊後殘留的焦點則不會。 - 在觸控螢幕上，點選一次會先正向再反向播放動態。切換型圖示則是切換狀態。
Bookmark等切換型圖示只透過顏色和形狀顯示狀態。請在圖示旁加上可見的文字，或在按鈕上設定aria-pressed，讓螢幕閱讀器能報讀狀態。