mcpField
A
assistive-technology-scenarios

assistive-technology-scenarios

github.com/owl-listenerデザイン・UI10875 回インストール20 週間前に更新
リポジトリ

assistive-technology-scenarios について

assistive-technology-scenariosは、支援技術を使う実際のタスクを想定したシナリオを作るデザインスキルです。利用者や環境、操作手順、つまずきを記述し、アクセシビリティの要件を設計に反映する際に役立ちます。

主な機能

  1. 01具体的な支援技術と設定の明記
  2. 02操作を段階ごとに記述
  3. 03インターフェースの問題や負担の発見
  4. 04視覚・運動・聴覚・認知の状況を網羅
  5. 05シナリオのテンプレートと評価項目

活用シーン

  1. 01スクリーンリーダー利用者の主要タスクを記述
  2. 02キーボードのみの操作フローにある障壁の発見
  3. 03弱視や状況による制約を踏まえた設計評価

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/owl-listener/inclusive-design-skills --skill assistive-technology-scenarios

インストール後、Claude Code で/assistive-technology-scenariosを入力して読み込まれたか確認します。

詳細

支援技術の利用シナリオ

実際の人々が実際の支援技術を使って実際のタスクを完了するシナリオを作成しましょう。そうすることで、チームは想像上の理想的な条件ではなく、実際の利用状況を考慮した設計ができます。

重要な理由

シナリオにマウスと大きなモニターを使う人しか登場しないなら、設計が機能するのも、マウスと大きなモニターを使う人だけです。シナリオは、チームが何を考慮するかを形作ります。そして、チームが考慮することが設計に反映されます。

一般的な支援技術

視覚
  • スクリーンリーダー(JAWS、NVDA、VoiceOver、TalkBack):コンテンツを読み上げ、キーボードを使って見出し、リンク、ランドマーク間を移動します
  • 画面拡大ソフト(ZoomText、組み込みのズーム機能):画面の一部を拡大します。ユーザーは一度に画面の一部分しか見られません
  • 点字ディスプレイ:テキストをリアルタイムで点字に変換します。スクリーンリーダーと併用します
  • ハイコントラストモード:読みやすさを向上させるため、システムレベルで色を置き換えます
運動
  • スイッチデバイス:選択肢を順に移動する1つまたは2つのボタンです。キーボードよりはるかに遅いため、余分な操作はどれも重要です
  • 音声コントロール(Dragon、Voice Control、Voice Access):コマンドを話して移動や入力を行います
  • ヘッドポインター/視線追跡:頭の動きや視線でカーソルを操作します。精度には限界があります
  • マウススティック/スタイラス:タッチスクリーンやキーボードを操作するための物理的なポインターです
聴覚
  • キャプション:音声コンテンツをリアルタイムまたは事前にテキスト化したものです
  • 視覚的な通知:音声通知の代わりに、画面の点滅や視覚的なインジケーターで知らせます
  • ヒアリングループ/Bluetooth:音声を補聴器に直接届けます
認知
  • テキスト読み上げ:コンテンツを読み上げます(スクリーンリーダーとは異なり、ユーザーは画面を見られますが、聞くことでより理解しやすくなります)
  • リーディングルーラー/行ガイド:一度に1行だけを強調表示します
  • シンプル表示:ブラウザー拡張機能や設定を使って、画面上の余分な要素を取り除きます
  • パスワードマネージャー:認証に必要な記憶の負担を軽減します

支援技術の利用シナリオの書き方

利用環境を含める

障害の名前だけを書かないでください。その人、使用する技術、利用環境について説明します。

「Priyaは、WindowsノートパソコンでFirefoxとJAWSスクリーンリーダーを使うデータアナリストです。キーボードショートカットを使いこなしており、2台のモニターを使っています。1台はスプレッドシート用、もう1台は確認中のツール用です。ノイズキャンセリングヘッドホンを着けて、デスクにいます。」

操作を順を追って示す

その人が使用する技術を使って、実際にどのようにインターフェースを操作するかを説明します。

「PriyaはTabキーでナビゲーションメニューに移動します。JAWSが『ナビゲーション、5項目』と読み上げます。下矢印キーで『レポート』を探し、Enterキーを押します。ページが読み込まれると、JAWSがH1の『月次レポート』を読み上げます。Hキーを押して見出し間を移動し、『2026年3月』を見つけます。」

問題が起きる箇所を示す

シナリオでは、設計上の問題を明らかにする必要があります。

「Priyaはデータテーブルにたどり着きますが、JAWSは列見出しなしで各セルを読み上げます。『42,500』とは聞こえますが、どの指標のどの月の数値なのか分かりません。テキストの要約を探してテーブルをTabキーで通り過ぎますが、要約はありません。」

シナリオの対象範囲

どのような製品でも、少なくとも次のユーザーを対象とするシナリオを作成してください。

  • 中核となるタスクを完了するスクリーンリーダーのユーザー1人
  • 中核となるタスクを完了するキーボードのみのユーザー1人
  • 拡大機能を使う弱視のユーザー1人
  • 認知特性の異なるユーザー1人
  • 状況による一時的な制約がある状況のユーザー1人

テンプレート

Name: [Name]
Role/context: [Who they are beyond their disability]
Technology: [Devices, AT, browser, settings]
Environment: [Where, when, what else is happening]
Task: [What they're trying to accomplish]
Steps: [How they interact, step by step, using their AT]
Pain points: [Where the design fails or creates friction]
Success: [What a good outcome looks like for this person]

評価の質問

  1. シナリオには障害だけでなく、具体的な支援技術が記載されていますか?
  2. 目標だけでなく、操作が順を追って説明されていますか?
  3. 具体的な設計上の問題が明らかになっていますか?
  4. これを読んだ開発者は、何を修正すればよいか分かりますか?

コメント