design-flow

インクルーシブなインタラクションフローの設計

多様な入力方法に対応し、後付けではなく、最初からアクセシブルなフィードバックを提供する新しいインタラクションフローを設計します。

プロセス

ステップ 1：すべてのインタラクションを特定する

フロー内でユーザーの操作が必要な箇所をすべて列挙します。

• ボタンをクリック／タップする
• テキストを入力する
• 選択する
• ステップ間を移動する
• ドラッグ、スワイプ、またはジェスチャーを行う
• プロンプトに応答する

ステップ 2：入力方法を割り当てる

multi-modal-input を使用して、各インタラクションが少なくとも 3 種類の入力方法でどのように機能するかを指定します。

• キーボード：どのキーまたはショートカットで操作できますか？
• ポインター／タッチ：ターゲットのサイズと間隔はどのくらいですか？
• 音声（該当する場合）：どのコマンドで操作できますか？

1 種類の入力方法でしか機能しないインタラクションには、フラグを付けます。

ステップ 3：キーボード操作レイヤーを設計する

keyboard-navigation を使用して、次の項目を定義します。

• すべてのインタラクティブ要素を通る Tab の順序
• モーダル、ドロップダウン、動的コンテンツのフォーカス管理
• スキップリンクとランドマークナビゲーション
• よく使う操作のキーボードショートカット（説明も記載する）

ステップ 4：ターゲットを指定する

touch-target-design を使用して、次の項目を指定します。

• すべてのインタラクティブ要素の最小サイズ
• 隣り合うターゲット間の間隔
• モバイルで主要な操作を配置する親指が届く範囲

ステップ 5：フィードバックを設計する

feedback-and-status を使用して、各インタラクションについて次の項目を指定します。

• ユーザーに何が表示されるか（視覚的なフィードバック）
• スクリーンリーダーが何を読み上げるか（テキストによる代替）
• 成功、エラー、読み込みの各状態で何が起きるか
• 色、アイコン、テキストを組み合わせたフィードバックの仕組み

出力

次の項目を含むインタラクション仕様を提出します。

• インタラクションのポイントを示したフロー図
• 入力方法のマトリックス（タスク × 入力方法）
• フォーカス順序のマップ
• ターゲットサイズの注釈
• インタラクションごとのフィードバック仕様