アクセシビリティ

このページでは、アイコンがスクリーンリーダー、キーボード、タッチ入力、モーション軽減の設定とどのように連携するかを説明します。

アクセシブルネーム

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 コンポーネントは、label 属性からアクセシブルネームを取得します。

prefers-reduced-motion が設定されている場合、アイコンはアニメーションせずに終了ポーズへ直接切り替わります。
trigger="parent" では、ホバーと同様に、キーボードフォーカスでモーションが再生されます。マウスクリックの後に残ったフォーカスでは再生されません。
タッチスクリーンでは、タップするとモーションが順方向に再生され、その後に逆方向に再生されます。トグルアイコンは、代わりに状態が切り替わります。
Bookmark のようなトグルアイコンは、色と形だけで状態を示します。スクリーンリーダーが状態を読み上げられるように、アイコンの横に見えるテキストを追加するか、ボタンに aria-pressed を設定してください。