アクセスしやすい学習コンテンツの作成

アクセシビリティとは、あなたのコンテンツをより多くの人が利用できるようにすることです。アクセスしやすいコンテンツの作成は、一般的に身体の不自由な人の支援を目的としていると考えられていますが、コンテンツのアクセシビリティを向上させることで、モバイルデバイスを使用している人や、低速なネットワーク環境にいる人、学習障害のある人、高齢者など、すべての人の支援につながります。

アクセスしやすいコンテンツを作成すると、あらゆる人の体験を向上させることができます。障害を持つ人々を含め、より多くの人々があなたのコンテンツにアクセスしやすくなり、学習対象者が広がります。

アクセシビリティは、ビデオコンテンツの作成プロセスで見過ごされることが多く、作成にコストがかかると考えられています。しかし、必ずしもそうであるとは限りません。

Udemyではコースのアクセシビリティを向上するために、次の2つの部分に関して一般的な推奨事項を提供しています。

ビデオコンテンツに関する考慮事項
コースコンテンツに関する考慮事項

ビデオコンテンツに関する考慮事項

このセクションでは、アクセスしやすいビデオコンテンツを次の2つに分けました。

音声コンテンツ
画像コンテンツ

音声コンテンツ

多くの受講生について、コースをまったく見ずに、聴いているだけである可能性があることを認識することが重要です。また、多くの受講生はスマートフォンでコースを聴き、音声による説明を利用してより柔軟にコースにアクセスします。目の見えない受講生や視力の弱い受講生は、画面上のコンテンツを見ることができず、音声のみを聴いている場合があります。聴覚障害のある受講生は、音声の出力ではなく、主に字幕に集中します。コースを可能な限りアクセスしやすくし、このような受講生が使用できるようにするには、コースの内容が音声コンテンツと字幕のみで効果的に伝わるようにする必要があります。

音声コンテンツを可能な限り効果的なものにし、それ単体で利用できるようにすることは、インストラクショナルデザインの優れた実践でもあります。これにより、画像を見ながら学んでいる受講生も、聴いて学んでいる受講生も、理解を深めることができます。アクセスしやすいビデオ音声コンテンツを作成するには、次の3つの方法があります。

スライド画像を説明する
わかりやすくシンプルに話す
字幕を提供する

スライド画像や講師の行動を説明する

画像コンテンツが装飾でない場合は、画面上に表示されているものを説明します。話し始めや、主題の冒頭文にスライドを組み込むときは、必ずスライドのタイトルを述べます。

悪い例:「画面上のスライドまたはテキストを読むだけ」

良い例:「ご覧のとおり、私のコースのレビューは非常に高評価です。中には、受講後にどのようにして就職できたかについて触れている人もいます！」

画像を説明するときは、色や方向など、視覚に依存する言葉は避けます。（例:「正方形をクリック」、「ページの左側にあるボックス」、「大きな青いテキスト」）。

悪い例:「このようするだけで簡単に修正できます」。良い例:

「マウスで段落全体を選択し、左揃えボタンを押して修正します。またフォーマットメニューでこの選択肢を見つけることもできます」

悪い例:「ここで一行ずつ進めて、ドーン、これでルーティンに入りました！」。良い例:

「そのルーティンでブレークポイントに到達した後、F7を選択して、このコードを進めます。あるいは、パネルのここにあるステップインボタンを選択しても構いません」

わかりやすくシンプルに話す

経験則として、受講生の3分の2があなたの言語を第二言語として使用していると想定します。母国語を話さない人にとって、比喩は理解しにくい場合があります。音声スクリプトでは明確な言葉を使い、慣用句を避けて受講生にとってわかりやすいようにします。

わかりやすくシンプルな言葉を使って、ゆっくり慎重に話します。新しいトピックの紹介に時間をかけます。特に内容を理解しテキストを読むのにより多くの時間を必要とする受講生やコース内容の初心者など、すべての受講生に役立つようにします。

字幕を提供する

Udemyは英語、スペイン語、ポルトガル語のコースに自動字幕とトランスクリプトを提供していますが、エラーの余地があります。字幕が生成された後に、すべて正しいか確認するのが最善です。字幕はビデオで述べられたことを正確に反映している必要があります。

適切な名前、専門用語、技術用語、スペルが正しく書き出されていることを確認してください
つなぎ言葉や口ごもりを含めます。字幕でこれを修正すると、音声を聴きながら字幕を読んでいるユーザーに認知的不協和が生じる可能性があります。

詳細については、Udemyの自動生成字幕をご覧ください。馴染みのない固有名詞や重要な内容語に注意して、正しく字幕が付けられていることを確認します。字幕付きのビデオとライブ音声にも、 Udemyによって生成されたトランスクリプトが含まれます。

自動生成字幕が生成されないコース（英語、ポルトガル語、スペイン語を除くすべて）については、独自の字幕をアップロードする方法の詳細をご覧ください。

音声コンテンツのアクセシビリティに関するベストプラクティスの概要

音声スクリプトを音声ブックのようにそれ単体で利用できるようにします。可能であれば、スクリプトが画像に依存しないようにします
画像コンテンツが装飾でない場合は、画面上に表示されているものを説明します。
コンテンツを理解する時間をとります。速すぎない一定のペースで話します。また、一時停止して、受講生が音声と画像の両方でコンテンツを理解する時間をとります。
わかりやすい言葉を使用します。文や段落を簡潔にします。
一般的な単語を使用し、過度にカジュアルまたは口語的な言葉、略語、専門用語を避け、複雑な比喩や慣用句を避けます。
キーポイントを強調するために、言葉で要点を明確かつ正確に繰り返し説明します。同じことをさまざまな方法で言うことにより、受講生が理解しやすくなります。
すべての口頭内容に正確な字幕を付けます。

画像コンテンツ

多くの講師は、ビデオの視覚的な側面に多くの時間を費やしています。洗練されたまとまりのある画像コンテンツを表示することは重要ですが、誰にとっても使いやすく見やすいコンテンツを提供するのに役立ついくつかの指針をまとめました。視覚障害は、よく知られる近視や遠視および赤緑色覚異常から、色覚の完全な喪失、非常に低い視力、かすみ、視野狭窄にまで及びます。いくつかの基本原則に従うことで、できるだけ多くの人にとってアクセスしやすい画像コンテンツを作成できます。

フォントスタイルとフォントサイズ

全部大文字の表記は読みにくい場合があります。すべて大文字で入力しないようにします。
多くの受講生がモバイルデバイスでコースを受講することに留意してください。フォントサイズは、必ず小さい画面でも十分に読める大きさにします。少なくとも12ptのフォントを使用することを推奨しますが、14～16ptが理想的です。

色

色の使い方を考えます。弱視の人や色覚異常の人にとって、色に依存した、またはカラーコントラストが悪いビデオやリソースを見ることは困難な場合があります。常に視聴者が色を区別できることを前提とせずにコンテンツを表示します。たとえば、色に加えてテキストラベルを使用することで言葉を区別できます。
明るい色やネオン色は控えめに使用します。明るい色を使用すると、認知障害のあるユーザーがコンテンツを理解しにくくなる場合があります。

その他

コンテンツが複雑にならないようにします。複雑な画像に混乱する人もいます。ビデオのテーマに集中できなくなる可能性もあります。
高速で点滅するコンテンツは、発作を引き起こす可能性があるため、必ず避けるようにします。特に赤く点滅するコンテンツは避けてください。

画像コンテンツのアクセシビリティに関するベストプラクティスの概要

全部大文字表記の使用を避けます。
画面上のテキストや画像は、必ず弱視の人が読める大きさにします。 12ポイント以上の適切なフォントサイズを使用してください。
使用する色は、互いに簡単に区別でき、コンテンツと背景の間に十分なコントラストがある必要があります。
色だけで情報を伝えようとすることは必ず避けるようにします。これはビデオでチャートやグラフを使用する場合に特に重要です。画像が白黒で印刷されることを想像してみてください。その画像は誰にとっても理解しやすいものではないでしょう。
明るすぎない色を使用します。
整然とした背景を保ちます。
すっきりとしたレイアウトとデザインを使用します。背景はコンテンツの進行が明瞭になるものにする必要があります。
イラストやアイコンなどを使用してテキストを補足できますが、それらに置き換えるようなことはしないでください。
高速で点滅するコンテンツは避けます。発作を防ぐため、1秒間に3回以上フラッシュを使用しないでください。
スペル、文法、読みやすさを確認します

コースコンテンツのアクセシビリティに関する考慮事項

Udemyでは、ビデオコンテンツとコースコンテンツの両方を活用し、教えたことを強化し、新しいスキルを加えます。コースコンテンツがアクセスしやすいものでなければ、そのコースはアクセスしやすいものではありません。

このセクションでは、アクセスしやすいコースコンテンツを次の4つに分けました。

コンテンツの整理
意味のあるドキュメントセマンティクス
画像やメディアの代替テキスト
カラーコントラスト

コンテンツがセマンティックマークアップを使用して作成されていると、スクリーンリーダーは簡単にコンテンツにアクセスできます。たとえば、正しくフォーマットされたリストやテーブルは、期待されるレベルのコンテキストを提供し、スクリーンリーダーが読み取ることができます。

スクリーンリーダーが読み取りにくい要素を知ることも重要です。たとえば、テーブル内の結合されたセルは、スクリーンリーダーを使用するときに、その構成をナビゲートして理解するのが難しくなる可能性があります。さらに、フォーマットがセマンティックはない場合、スクリーンリーダーが紛らわしい情報を提供することがあります。たとえば、アスタリスクとタブで作成された箇条書きは、スクリーンリーダーが「箇条書き」ではなく「タブ」または「アスタリスク」と読み取る可能性があります。

コンテンツの整理

本文を整理し、目立つ見出しでコンテンツを短い段落に分割します。これにより、コンテンツに目を通しやすくなり、すべてのユーザーにとって読みやすいものになります。

すべてのドキュメントにおいて、冒頭に目次を設定するか、要約（1～2文または箇条書き）を掲載します。

さらに、ユーザーのコース受講時に役立つダウンロード可能なリソースとして、用語集やその定義を含めることをお勧めします。また、可能であれば、ダウンロード可能なリソースを含めるか、使用しているスライドへのリンクを含めることが理想的です。

スペル、文法、読みやすさを必ず確認します。さらに念のために、コースコンテンツに目を通し、演習を試してくれる仲間を見つけましょう！

意味のあるドキュメントセマンティクス

特に弱視のユーザーにとって、リソースのさまざまな部分のセマンティクスや意味は重要です。セマンティクスとは、ある要素が見出しまたはプレーンテキストであるか、あるいはリストまたは段落にあるかという違いを理解することです。多くの人がスクリーンリーダー（JAWS、NVDA、Voiceoverなど）を使用してコンテンツにアクセスしていますが、コンテンツがセマンティックマークアップを使用して作成されている場合、より簡単にアクセスできます。たとえば、正しくフォーマットされたリストやテーブルは、期待されるレベルのコンテキストを提供し、スクリーンリーダーが読み取ることができます。

このセクションでは、デジタルリソースへのセマンティクスの追加について軽く触れるだけですが、本書の最後に多くのリソースを含めました。これらは、リソースコンテンツ作成のために使用する特定のプログラムへのセマンティクスの追加に役立ちます。

真の見出し

真の見出しを使用してコンテンツを整理します（エディターなどで「H1」または「Heading 1」とラベル付けされることがあります）。ドキュメントのタイトルは、第1レベルの見出しにして、次のレベルは第2レベルなどにする必要があります。見出しレベルを飛ばさないでください（第1レベルから第3レベルの見出しに飛ばすなど）。

見出しは、アクセスしやすいコンテンツを作成するための最善の方法の1つです。真のセマンティックで視覚的に意味を伝える見出しを使用すると、目の見えるユーザーと目の見えないユーザーの両方にとって読み取りやすいコンテンツになります。

真の箇条書きと番号付きリスト

リストの作成にタブキーやアスタリスクを使用することを避けます。箇条書きまたは番号付きのリストを使用します。

シンプルなテーブル構造

スパンされた行または列に注意し、複数レベルのテーブルヘッダーを避けます。これは結合された列または行です。可能であれば、視覚的なレイアウトにテーブルを使用することは避けます。

リンクに説明を付ける

次のようなフレーズは避けます。

「こちらをクリック」
「こちら」
「もっと」
「詳細情報」
「続きを読む」
「続ける」

www.abcde.comのように、URLのみをリンクとして使用することを避けます。

画像やメディアの代替テキスト

ドキュメントやスライドプレゼンテーションなどの画像に、明確でコンテキスト主導の代替テキストを提供します。このテキストは、スクリーンリーダーやその他の支援技術を使用している場合に読み上げられます

多くのツールで画像の代替テキストを提供できます。これらのボックスには、「代替テキスト」、「代替」、さらには「画像の説明」などのフレーズがラベル付けされている場合があります。もしこれらが存在する場合は、このフィールドを使用して、画像の代替テキストを提供します。
代替テキストは、必ずしも画像の説明ではなく、コンテンツと機能を提示する必要があります。もし画像を削除する必要がある場合、その場所にどのようなテキストを配置するでしょう？あるいは、電話で誰かに画像を説明する必要がある場合、その人に何と言うかを考え、それを画像の説明に役立てます。
画像に関連するコンテンツや機能がない場合や、装飾である場合、または代替テキストが近くのテキストで提供されている場合、可能であれば画像の代替テキストを空にします（一部のツールには「空白」または「空」のオプションがあります）。
「～の写真」、「～の画像」、「～へのリンク先」などの単語は避けます。支援技術がこれを処理し、画像上にいることをユーザーに知らせます。
明確さや文脈を失うことがない範囲で、可能な限り使用する単語数を抑えます。

画像の例

デフォルトの代替テキスト（画像の名前）: kids-tech-revised.jpg
多くの場合、コピーはデフォルトで画像ファイル名になりますが、これは役に立たない場合があります。

変更された代替テキスト: ソファに座って、スマートフォンを使用している男の子、タブレットを使用している女の子、ノートパソコンを使用している女の子。

カラーコントラストを強くする

特にテキストと背景の間では、カラーコントラストを強くするようにしてください。これは、テキストを含む画像にも当てはまります。

色を使用する場合は、WebAIM Color Contrast Checker を参照して、適切なカラーコントラストとアクセシビリティに適した色を使用してください。

特定のユースケースでは、コントラストチェッカーを使用するのが一番です。以下では、白い背景に対して色付きのテキストをチェックしました。

チェッカーで不合格になった、避ける必要がある色の例を次に示します（スコアは4.5: 1未満です）。

以下の色は、優れたコントラストになるため、適切な選択です（4.5〜7）。

最高のコントラストが得られるため、以下の色を使用することをお勧めします（7以上）。

データテーブルの使用に注意する

可能な限りシンプルなテーブル構造を使用します。スパンされた行または列に注意し、複数レベルのテーブルヘッダーを避けます。これは結合された列または行です。これらは、受講生に説明する際やスクリーンリーダーが読み取る際に混乱を招く可能性があります。
可能であれば、視覚的なレイアウトにテーブルを使用することは避けます。

アクセスしやすいコースコンテンツのベストプラクティスの概要

内容

本文を整理し、コンテンツを短い段落に分割するようにします。
長いドキュメントの場合は、必ず目次または要約を掲載します。
リソースとして用語集を含めます。
スペル、文法、読みやすさを確認します。
全部大文字表記の使用を避けます。

ドキュメントセマンティクス

セマンティックマークアップを使用します。
真の箇条書きと番号付きリストを使用します。
可能な限りシンプルなテーブル構造を使用します。
真の見出しを使用してコンテンツを整理します。
リンクに説明を付けます。
ドキュメントが印刷目的でない限り、またはURLが関連するコンテンツである場合、URLをリンクとして使用することは避けます。

代替テキスト

ドキュメント、スライドプレゼンテーションなどの画像に、適切な代替テキストを提供します。

カラーコントラスト

強いカラーコントラストを使用します。

ドキュメントのアクセシビリティに関するリソース

Microsoft Office Suiteプログラム（Word、Excel、PowerPointなど）を使用して、スクリーンリーダーユーザーやその他の支援技術でも編集できる、最もアクセスしやすいWord文書、スプレッドシート、プレゼンテーションを作成することを強くお勧めします。Google Workspace（Google Docs、Sheets、Slides）は、一般的に、支援技術、特に編集目的ではアクセスしやすくありません。

WebAimのアクセスしやすいドキュメントリソース

Microsoft Suiteのアクセシビリティリソース

Googleドキュメントまたはスライドのアクセシビリティ

Googleドキュメントまたはスライドをアクセスしやすくする

Adobe PDFのアクセシビリティリソース

アクセシビリティに関する追加リソース

Udemyのアクセシビリティへの取り組み、およびUdemyのサービスのアクセシビリティに関連する懸念や提案についての連絡方法については、アクセシビリティに関する声明もご覧ください。

アクセスしやすい学習コンテンツの作成

ビデオコンテンツに関する考慮事項