この「インクルーシブデザインの原則」は、利用者を最優先に考えることです。永続的な障害がある利用者、一時的または状況的な困難に直面している利用者、あるいは能力が変化してゆく利用者 (つまり、私たちみんな) のニーズに合わせてデザインすることです。
ここに掲げた原則は、デザイナー、ユーザーエクスペリエンスの専門家、開発者、プロダクトオーナー、プランナー、イノベーター、アーティスト、思想家など、ウェブサイトやアプリケーションの設計と開発に携わるあらゆる人に向けて、インクルーシブデザインに対する幅広いアプローチを提供することを目的としています。
原則
同等の体験を提供する
あなたの作ったインターフェースがすべての人に同等の体験を提供できるようにして、利用者がそれぞれのニーズに合った手段を用いても、コンテンツ品質が損われることなくタスクを達成できるようにしましょう。
詳しい説明
置かれている状況、選択する手段、利用する文脈など、利用者には多様性があります。利用者が情報を読んだり操作をしたりするために異なるアプローチやツールを用いたとしても、インターフェースが各利用者に提供する体験は、価値、質、効率性の面で、同等でなければなりません。
例
- 代替となるコンテンツ： 代替テキスト、トランスクリプト、音声解説、手話などの基本的な代替コンテンツがあることによって、コンテンツをアクセシブルにすることができます。ただし、その代替コンテンツが同等であるためには、元となるコンテンツのエッセンスが取り込まれている必要があります。
- 人間工学に基づいた機能： 同期したクローズドキャプションを提供することによって、あなたの動画コンテンツはアクセシブルになります。しかし、さらにそれをカスタマイズ可能にして、色を変えたり、表示位置を変えたりできることによって、より同等の体験をもたらすことができます。
- 通知：
インターフェースに表示される通知は視覚的には明白ですが、スクリーンリーダーの利用者がそれを主体的に発見できるようにする必要があります。全盲の視覚障害者にも晴眼者と同等の体験をもたらすには、ライブリージョンを用いることです。それによって、その通知を得るために利用者側で何か特別な操作を行う必要はなくなります。
［訳注］「ライブリージョン」とは、ページの全体ではなく一部のみが更新される場合に、その更新内容を支援技術 (スクリーンリーダーなど) の利用者にも適切なタイミングで伝達するための、WAI-ARIA の仕組みのことです。
「同等の体験を提供する」へのリンク
状況を考慮する
利用者は様々な状況であなたの作ったユーザーインターフェースを使います。状況に関係なく、あなたの作ったユーザーインターフェースが利用者に貴重な体験を提供できるようにしましょう。
詳しい説明
新規の利用者、既存の利用者、仕事中の利用者、在宅の利用者、移動中の利用者、プレッシャーにさらされている利用者、など人々の状況は様々です。これらの状況はすべて、人々の体験に影響を与える可能性があります。障害がある人のように、既にインタラクションに大変さを覚えている人にとっては、こうした状況による影響によって、著しく使いづらくなっていることがあります。
例
- 色のコントラスト： コントラストを確保することによって、屋外でインターフェースを使用するときの明るい日差しによる見づらさを軽減します。
- 状況に即したヘルプ： 利用者は複雑なフォームやインタラクションに初めて遭遇したとき、ヘルプを必要とすることがあります。このヘルプは、利用者がそのフォームやインタラクションに慣れていくにつれて、かえって冗長になったり、邪魔になったりする可能性があります。状況に即したヘルプによって、いつヘルプを利用してページをより使いやすくするかを、利用者に選択させます。
- 外出中のキャプション： あなたが提供している動画コンテンツは、ご存知のようにモバイルデバイス上でも視聴されます。それは公共の場所である可能性もありますが、社会的なマナーに反することなく楽しみたいものです。小さな画面の場合は、デフォルトで音声をオフにして、キャプションが表示されるようにしましょう。
一貫性を保つ
馴染みのある慣例を用いて、それを一貫して適用しましょう。
詳しい説明
使い慣れたインターフェースには、よく知られたパターンが流用されています。インターフェースの意味や目的を確固たるものにするために、これらのパターンをインターフェース内で一貫して使用する必要があります。この原則を、機能、ふるまい、エディトリアル、そしてプレゼンテーションに適用しなければなりません。同じものは同じように提示することによって、利用者も同じものは同じように利用できるでしょう。
例
- 一貫したデザインパターン： 利用者が慣れたり理解したりしやすいように、ウェブやプラットフォームの一貫したデザインパターンを使用しましょう。
- 一貫したエディトリアル： スクリーンリーダーの利用者が依存するエディトリアル (代替テキスト、見出し、ボタンのラベルなど) も含め、平易な言葉をプラットフォーム内で一貫して使用しましょう。エディトリアルのスタイルの一貫性を維持することも重要です。 例えば、記事の冒頭には要約の段落をわかりやすく置くことや、箇条書きは必ず太字で書かれた定義から始めることなどが挙げられます。
- 一貫したページの構造： 主要なコンテンツを閲覧したり回遊したりしやすくするために、テンプレート全体で、一貫したページの構造にしましょう。
利用者に制御させる
利用者が自ら制御できるようにしましょう。利用者はそれぞれ好みの方法によって、コンテンツにアクセスして、コンテンツとやりとりできるようにすべきです。
詳しい説明
利用者がブラウザやプラットフォームの標準設定を変えること (デバイスの向き、フォントサイズ、ズーム、コントラストなど) を制限したり、不可能にしたりしないでください。さらに、ユーザーが制御できる手段がある場合を除いて、ユーザーが要求していないのにコンテンツを変化させることは避けましょう。
例
- スクロールの制御： 「無限スクロール」は、特にキーボードで操作をしている利用者にとっては問題があります。無限スクロールによってコンテンツが更新されるエリアから抜け出すことができないためです。この機能をオフにして、代わりに「もっと読む」ボタンを提供しましょう。
- 停止させる： アニメーションやスクロールのパララックス効果によって、吐き気を催したり、明らかに集中力が散漫になってしまったりする利用者がいます。自動的に動くコンテンツにおいては、再生コントロールを目立つように提供することによって、利用者が簡単に停止できるようにすべきです。
- ズームできるようにする： タッチデバイス上で、ユーザーがピンチアウトのジェスチャによってズーム操作をしたいと考える理由はたくさんあります。ズーム操作を制限しないように、またズーム操作によってコンテンツが隠れてしまうことがないようにしてください。
選択肢を提供する
特に複雑なタスクや標準的でないタスクには、利用者がそれらのタスクを完遂できるように、様々な手段を提供することを検討しましょう。
詳しい説明
多くの場合、タスクを完遂するには複数の手段があります。利用者が好むであろう手段をあなたが決めつけることはできません。別のレイアウトや、タスクを完遂できる別の手段を提供することによって、利用者は自分に合った選択やそのときの自分の状況に合った選択をすることができます。
例
- アクションを完了するための複数の手段： 必要に応じて、利用者がアクションを完了できる複数の手段を提供します。たとえばモバイルにおいては、スワイプによるアイテム削除だけでなく、アイテムを選択してからボタンで削除できるようにしましょう。この事例としては、iOS のメールアプリがあります。
- レイアウト： コンテンツが長いリストになっている場合は、グリッド形式またはリスト形式のレイアウトを選択できるようにすることを検討しましょう。これにより、画面で画像を大きくして見たい利用者や、各項目の横の長さを短くしたい利用者をサポートすることができます。
- アクセシブルな代替手段： 例えば、インフォグラフィックスに対するデータテーブルのように、データを提示する代替手段は、スクリーンリーダー利用者だけを想定した隠しリンクではなく、すべての利用者向けに選択肢として提供すべきです。アクセシブルな代替手段を選択肢にすることによって、特定のターゲットグループだけでなく、すべての利用者にとってプラスになります。
コンテンツの優先順位を付ける
ユーザーが主たるタスク、機能、情報に集中できるように、それらをコンテンツやレイアウト内で優先順位付けしましょう。
詳しい説明
主たる機能が明確に露出していなかったり、優先順位付けがなされていなかったりすると、インターフェースを理解するのが難しくなる可能性があります。サイトやアプリケーションが多くの情報や機能を提供していても、利用者は一度にひとつのことにしか集中することができません。インターフェースの主たる目的を明確にして、その目的を達成するのに必要なコンテンツや機能を提示しましょう。
例
- タスクに集中させる： 場合によっては、機能やコンテンツを順を追って徐々に展開してゆきましょう。
- タスクの優先順位付け： 電子メールアプリケーションは、主に電子メールを書いたり読んだりするのに使われます。したがって、「メール作成」ボタンはすべての画面に表示され、フォーカス順序の中でも初めのほうにあります。また、受信箱は「送信済み」や「スパム」などの他のメール分類よりも優先的に表示されます。タグ付けやフォルダへの整理など、使用頻度が比較的低い機能は、メールを読むという主たるタスクが終わった後に使われることが多いため、フォーカス順序の中では後ろのほうにあります。
- コンテンツの優先順位付け： ニュース記事ページの主たるコンテンツは、その記事のストーリーです。したがって、見た目とソースコードのどちらにおいても、他のコンテンツよりも前に配置されるべきです。類似の記事のような関連コンテンツはその後に続くべきであり、関連性のないコンテンツはさらにその後に配置されるべきです。
- エディトリアルの優先順位付け： リンク、見出し、ボタンに対するエディトリアルでは、平易な言葉を使用し、重要なことを最初に書く必要があります。これは、視覚的に見えるテキストと見えないテキストのどちらにも当てはまります。これにより、利用者はテキストを視覚的に読み取りやすくなり、スクリーンリーダーの利用者は音声で聞き取りやすくなります。平易な言葉を用いることは、その言語の非ネイティブスピーカーにも役に立ち、翻訳しやすくなります。
価値を付加する
機能の持つ価値や、その機能によって様々な利用者の体験をどう向上させることができるかを考えましょう。
詳しい説明
各機能は、利用者がコンテンツを見つけたり、やりとりしたりするのに効果的で多様な手段を提供することによって、利用者の体験に価値を付加すべきです。音声、位置情報、カメラ、バイブレーションなどの各種 API のようなデバイス機能を活用することや、接続されたデバイスまたはセカンドスクリーンとの統合がいかにして利用者に選択肢を提供できるかといったことを、検討してください。
例
- 接続されたデバイスまたはセカンドスクリーンとの統合： 音声インターフェースを使用してマルチメディアを制御したり、音楽やテレビ番組からの出力に対してコンテンツを検索したりできるようにすることによって、他のインターフェースの使用が困難だった利用者に価値をもたらします。
- プラットフォームAPIとの統合： プラットフォームが持っている機能を活用して、インターフェースの機能を強化しましょう。バイブレーション API によって、ろう者や難聴者が通知を認識しやすくなります。また、位置情報 API によって、移動に困難を伴う人が位置情報サービスを利用しやすくなります。
- タスクの完了を容易にする： パスワード入力フィールドには「パスワードを表示」ボタンを追加して、ユーザーがテキストを正しく入力したかどうかを確認できるようにしましょう。または、パスワード保護領域へのアクセスには、タッチ認証機能を追加しましょう。