セマンティクスと支援技術の概要
これまでに、身体障がい、技術的な問題、個人の好みなどにより、マウスやポインティング デバイスを使用できないユーザーがサイトにアクセスできるように、キーボードの使用のみに対応する方法を説明しました。ある程度の注意と検討が必要ですが、最初から計画すれば多大な労力にはなりません。この基本的な作業が完了すると、完全にアクセス可能で洗練されたサイトに到達するための長い道のりとなります。
このレッスンでは、その取り組みを基に、他のユーザー補助機能の要素について検討します。たとえば、画面を見ることができない Victor Tsaran のようなユーザーをサポートするウェブサイトの構築方法を検討します。
まず、支援技術について説明します。支援技術とは、障がいのあるユーザーが情報にアクセスできないように支援する、スクリーン リーダーなどのツールの総称です。
次に、一般的なユーザー エクスペリエンスのコンセプトを土台にして、支援技術のユーザー エクスペリエンスについて深く掘り下げます。
最後に、HTML を効果的に使用して優れたユーザー エクスペリエンスを実現する方法と、先ほどフォーカスに取り組んだ方法とかなり重複する点を確認します。
支援技術
支援技術は、障がいのある人が作業を完了できるよう支援するデバイス、ソフトウェア、ツールを総称する用語です。広い意味では、歩行用の松葉づえや読書用の虫メガネのようなローテクから、ロボットアームやスマートフォンの画像認識ソフトウェアなどのハイテクがこれに該当します。
支援技術には、ブラウザのズームといった一般的なものから、カスタム設計のゲーム コントローラといった限定的なものまで含まれます。点字ディスプレイなどの独立した物理デバイスにすることも、音声操作などのソフトウェアに完全に実装することもできます。スクリーン リーダーのようにオペレーティング システムに組み込まれる場合もあれば、Chrome 拡張機能などのアドオンである場合もあります。
支援技術と一般的な技術の境界はあいまいで、結局のところ、すべての技術はなんらかのタスクで人を支援することを目的としています。また、テクノロジーはしばしば「アシスト」カテゴリ内外に移ります。
たとえば、最も初期の市販の音声合成製品の一つは、目の不自由な人向けの音声電卓でした。今では音声合成が運転ルートから仮想アシスタントまで 至るところで使用されています逆に、元々汎用的な技術では、支援用途で使われることもよくあります。たとえば、ロービジョンの方がスマートフォンのカメラズームを使用して、現実世界の小さなものを見やすくすることができます。
ウェブ開発のコンテキストでは、幅広いテクノロジーを考慮する必要があります。ユーザーは、スクリーン リーダーや点字ディスプレイ、拡大鏡、音声操作、スイッチ デバイス、その他の支援技術（ページのデフォルトのインターフェースを調整して使用できるより具体的なインターフェースを作成する支援技術）を使用してウェブサイトを操作する場合があります。
これらの支援技術の多くは、アクセス可能なユーザー エクスペリエンスを実現するため、プログラムで表現されたセマンティクスに依存しています。このレッスンでは、この点を主に説明します。ただし、プログラムで表現されたセマンティクスを説明する前に、アフォーダンスについて少し説明しておく必要があります。
アフォーダンス
人工のツールやデバイスを使用する場合、通常はその形式やデザインに着目して、その機能と仕組みを理解します。アフォーダンスは、ユーザーにアクションを実行する機会を提供または提供するオブジェクトです。アフォーダンスの設計が優れているほど、その使用方法は明確または直感的になります。
一般的な例としては、湯沸かしポットやティーポットがあります。以前にティーポットを見たことがなくても、注ぎ口ではなく取っ手でつかむべきであると簡単に認識できます。
これは、このアフォーダンスが、水やりの注ぎ口、飲み物のピッチャー、コーヒーカップなど、他の多くの物体に似ているためです。注ぎ口でポットを手に取ることもできますが、同様のアフォーダンスの経験では、ハンドルを使用する方が良いことがわかります。
グラフィカル ユーザー インターフェースでは、アフォーダンスは実行できるアクションを表しますが、操作する物理オブジェクトがないため、あいまいになる場合があります。したがって、GUI アフォーダンスは、あいまいさを排除するように設計されています。ボタン、チェックボックス、スクロールバーは、可能な限り少ないトレーニングで使用方法を伝えることを目的としています。
たとえば、一般的なフォーム要素（アフォーダンス）の使用を次のように言い換えることができます。
- ラジオボタン - 「いずれかのオプションを選択できます」
- チェックボックス - 「[はい] か [いいえ] を選択できます。」
- テキスト フィールド - 「この領域に何かを入力できます」
- プルダウン - 「この要素を開いてオプションを表示できます。」
これらの要素について、結論を導き出すことができるのは、その要素が見えているからだけです。当然のことながら、要素が提供する視覚的な手がかりを見られない人は、その意味を理解することも、アフォーダンスの価値を直感的に理解することもできません。したがって、ユーザーのニーズに合った代替インターフェースを構築できる支援技術でアクセスできるよう、十分な柔軟性を備えた情報を用意する必要があります。
アフォーダンスの使用を非視覚的に開示することを、そのセマンティクスと呼びます。
スクリーン リーダー
一般的な支援技術の 1 つにスクリーン リーダーがあります。これは、生成された音声で画面のテキストを読み上げることで、視覚障がいのあるユーザーがパソコンを使用できるようにするプログラムです。ユーザーは、キーボードを使用して関連する領域にカーソルを移動することで、読み上げる内容を制御できます。
Google では、視覚障がいのあるユーザーが VoiceOver という OS X に組み込まれているスクリーン リーダーを使用してウェブにアクセスする方法を Victor Tsaran に説明してもらいました。VoiceOver を使用した Victor のこちらの動画をご覧ください。
では、スクリーン リーダーを使用してみましょう。こちらは、JavaScript で記述された最小限の機能を備えたスクリーン リーダーである ChromeVox Lite のページです。ロービジョン エクスペリエンスをシミュレートし、スクリーン リーダーでタスクを完了するようユーザーに強制するために、画面は意図的にぼかしています。演習には Chrome ブラウザを使用する必要があります
画面下部のコントロール パネルを使用して、スクリーン リーダーを制御できます。このスクリーン リーダーの機能は非常に限定的ですが、Previous ボタンと Next ボタンを使用するとコンテンツを探索でき、Click ボタンを使用するとクリックできます。
スクリーン リーダーの使用感を体験するには、ChromeVox Lite を有効にしてこのページを使用してみてください。スクリーン リーダー（またはその他の支援技術）は、プログラムで表現されたセマンティクスに基づいて、代替となる完全なユーザー エクスペリエンスを実際に作成するという事実について考えてください。ビジュアル インターフェースではなく、スクリーン リーダーが音声インターフェースを提供します。
スクリーン リーダーが各インターフェース要素に関する情報をどのように提示するかに注目してください。適切に設計されたリーダーであれば、遭遇した要素に関する次の情報のすべて（少なくとも大部分）を伝えることができます。
- 要素のロールまたはタイプ（指定されている場合）。
- 要素の名前（存在する場合）。
- 要素の値（値がある場合と持たない場合があります）。
- 要素のstate。有効か無効か（該当する場合）など。
ネイティブ要素にはユーザー補助メタデータが組み込まれているため、スクリーン リーダーはこの代替 UI を作成できます。レンダリング エンジンがネイティブ コードを使用してビジュアル インターフェースを構築するのと同じように、スクリーン リーダーは DOM ノードのメタデータを使用して、次のようなアクセス可能なバージョンを作成します。
