ウェブコンテンツ・アクセシビリティ・ガイドライン（WCAG）に圧倒されていますか？あなただけではありません。このガイドラインが存在することは素晴らしいことですが、eラーニングの専門家の多くは、このガイドラインに圧倒されていると感じています。ガイドラインは長く、技術的な用語で書かれているため、その意味を完全に理解することは難しく、ましてや自分のコースがガイドラインに準拠しているかどうかを確認することは困難です。
しかし、実際のところ、一晩でアクセシビリティへの準拠を0から100%にする必要はありません。ほとんどのeラーニングのプロは、WCAGの専門家ではなく、アクセシビリティに対応した学習への第一歩を踏み出し、徐々に改善しているのです。
このブログ記事では、コースをよりアクセシブルにするために、簡単でありながら重要な、すぐに実行可能な変更をいくつか紹介したいと思います。
1. すべてのテキストを12サイズ以上にする
eラーニングをデザインする際には、わかりやすさと読みやすさのために、テキストの大きさに気を配りましょう。コース内のすべてのテキストを、読みやすいように12サイズ以上に設定するだけです。とても簡単ですよね？
2. コントラストのある色を使う
すべての学習者がコンテンツを読み、簡単にインタラクションできるようにするためにできるもう一つの簡単なことは、テキストやボタンなどのオブジェクトに、背景から目立つ色を使うことです。最も簡単な方法は、このようなカラーパレットビルダーを使って、前景色と背景色のコントラスト（明るさの差）を測定することです。
ここで覚えておきたいのは、主に2つのルールです。
テキストの色は、背景色とのコントラスト比が4.5:1（注）にする
ボタンなどのインターフェイスの色は、背景色とのコントラスト比を3:1にする
コントラストについて詳しくは、こちらの記事「アクセシブルなeラーニングのためのコントラストに関する考察」をご覧ください。
3. ボタンを44×44ピクセル以上の大きさにする
ボタンのサイズを変更するのも、効果的な方法です。すべてのボタンを44×44ピクセル以上に調整することで、機能障害を持つ学習者でも選択しやすくなります。以下に、その違いをご紹介します。
35×20 ピクセル | 45×90 ピクセル | 65×185 ピクセル |
 |  |  |
要するに、ボタンが大きければ大きいほど、クリックしやすいということです。
4. 情報量の多い画像に代替テキストを追加し、装飾的な画像を非表示にする
コースをよりアクセスシブルするもう一つの簡単な方法は、コース内の情報豊富な画像にaltテキスト（スクリーンリーダーが学習者に伝える説明用テキスト）を追加し、画像が何を表しているかを説明することです。画像が単なる装飾である場合、学習者が重要な要素を理解するために、タブキーまたはスクリーンリーダー機能を何度も押す必要がないように、アクセシビリティツールから画像を非表示にすることをお勧めします。
情報提供用の画像と装飾用の画像の違いは、どのように見分ければよいのでしょうか？自分にこう問いかけてみてください。この画像を削除したら、学習体験に影響があるか？もし答えがイエスなら、それは情報提供画像です。答えがノーなら、それは装飾的な画像です。
効果的なaltテキストの書き方については、こちらのWebAIMの英語記事をご覧ください。
5. オーディオとビデオにクローズドキャプションやトランスクリプトを含める
音声と動画のコンテンツをよりアクセシブルにするために、クローズドキャプション（字幕）やトランスクリプトを含めるようにします。ビデオの場合は、クローズドキャプションという視覚的な説明を含めることで、誰もがビデオに含まれるコンテキストから利益を得ることができるようにします。
なぜクローズドキャプションやトランスクリプトを含める必要があるのでしょうか？なぜなら、聴覚障害者はナレーションが聞こえないからです。もちろん、トランスクリプトを使えば、認知障害のある人も自分のペースで読むことができます。
幸運にもArticulateアプリでは、クローズドキャプションとトランスクリプトを追加することは簡単です。クローズドキャプションのためのこれらのチュートリアルをチェックしてください。
そして、トランスクリプトを追加するには、こちらがおすすめです。
Storyline 360の場合は、トランスクリプトテキストが表示されるレイヤーを開くボタンを追加します。
Rise 360の場合は、オーディオまたはビデオブロックの下に、シングルタブのアコーディオンブロックを追加し、その中にトランスクリプトテキストを追加します。
コースで多くのオーディオやビデオを使用する場合、コースの最初にダウンロード可能なトランスクリプトを含めることも良い方法です。
6. フォーカスの順番をカスタマイズする（必要な場合）
スクリーンリーダーを使用している学習者の学習体験に大きな影響を与えるもう1つのことは、画面上のテキストやオブジェクトを読み上げる順序、いわゆるフォーカスの順番です。学習者がスライド上のタブインタラクションを開いたときに、最初のタブから始めるのではなく、真ん中のタブに誘導されたらと想像してみてください。さらに、そこから次のタブに進むのではなく、スライドのタイトルが読み上げられてしまったとしたら？これでは、イライラしてしまいますよね？論理的なフォーカスの順番を定義しないと、スクリーンリーダーを使用している学習者は、他の学習者と同じ情報にアクセスするために余分な作業をすることになり、それは平等な体験とは言えません。
幸いなことに、Rise 360を使用している場合は、フォーカスの順番が自動的に設定されるので、心配する必要はありません。また、Storyline 360を使用している場合は、この「Storyline 360: Customizing the Focus Order of Slide Objects」チュートリアルの指示に従って、簡単にカスタマイズすることができます。
まとめ
これらのヒントを実装することで、あなたのコースはすべてのWCAG基準に100%適合するわけではありません。しかし、アクセシビリティのレベルを大幅に向上させることができ、すべての人の学習体験を向上させることができます。
（注）WCAGガイドラインによると、大きな文字（太字14以上、普通字18以上）のコントラスト比は3:1まで可能ですが、覚えやすくするため、またコントラストが高いほうが良いため、簡略化しています。まだArticulate 360を試したことがない方は、Articulate 360の30日間の無料トライアルをお試しください。ご登録にクレジットカードは必要ありません！！
株式会社ディーシェは日本におけるArticulate製品の販売代理店です
Comments