コンポーネント / layout

状態マトリクス

構造

• 画面外テキスト領域
• 支援技術向け文言

キーボード操作契約

文言自体はフォーカスを受けず、関連する操作要素のキー操作を変えません。

スクリーンリーダー契約

画面には表示せず、支援技術のアクセシビリティツリーには補足文言を残します。

コンテンツ規則

• 視覚から得られる文脈だけを補います。
• 操作要素を意図せず見えなくしません。

公開API

環境適応契約

RTL

論理方向の余白と配置を使い、DOMとフォーカスの順序を保ちます。方向を持つアイコンだけを反転します。

ハイコントラスト

背景色だけに頼らず、境界・フォーカス・状態をシステムカラーでも判別可能にします。

動きを減らす設定

状態とフォーカスの連続性を残し、移動や装飾的な遷移を取り除きます。

検証ID

VisuallyHidden/accessibility-tree

ライブ表示

コピー可能な実装例

import { VisuallyHidden } from "@awesome-ds/react";

<VisuallyHidden>Extra context</VisuallyHidden>