アクセシビリティの高いコース教材に関する考慮事項

Udemyでは、ビデオコンテンツとコース教材を組み合わせて、学びを強化し、新しいスキルを身に付けます。したがって、コース全体のアクセシビリティを確保するために、コースで提供するものはすべてアクセスしやすいものにする必要があります。

このセクションでは、アクセスしやすいコース教材を4つのパートに分けて説明します。 

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

 

コンテンツの整理

• コンテンツを整理し、テキストを短い段落に分割して、目立つ見出しを付けます。これにより、コンテンツに目を通しやすくなり、すべてのユーザーにとって読みやすいものになります。
• すべてのドキュメントにおいて、冒頭に目次を設定するか、要約（2~3文または箇条書き）を掲載します。
• ユーザーのコース受講時に役立つダウンロード可能なリソースとして、用語集やその定義を含めます。また、ダウンロード可能なリソースを含めるか、使用しているスライドへのリンクを含めることが理想的です。
• スペル、文法、読みやすさを必ず確認します。可読性とは、テキストの読みやすさを指します。これには、文の長さ、音節の密度、主題の複雑さ、単語の親しみやすさなどの要因が含まれます。アクセスしやすいコースを作成するための最終チェックとして、同僚や友人にコースコンテンツを読んでもらい、演習を試してもらいます。

 

アクセスしやすいドキュメントを作成する

視覚障害者が使用するスクリーンリーダー（JAWS、NVDA、Voiceoverなど）は、ページ上のテキストを読むだけでなく、見出し、サブタイトル、およびリストアイテムへの編成方法を伝えることもできます。たとえば、視覚障害のない読者は、セクションタイトルを示す大きな太字のテキストが表示されたページを見ますが、視覚障害のある人は、いわゆる「セマンティックマークアップ」によって見出しを確認します。このメタ情報は、アクセスしやすいドキュメントにとって不可欠です。幸いなことに、Microsoft WordやGoogle Docsなどの多くのワープロプログラムやアプリには、これが組み込まれています。

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

このセクションには、デジタルドキュメントにセマンティクスを追加するためのいくつかのトピックと、包括的なリソースが含まれています。

 

真の見出し

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

ワードプロセスアプリケーションやスライドショーアプリケーションで「H1」または「Heading 1」とラベル付けされることもある真のセマンティック見出しを使用してコンテンツを整理することで、スクリーンリーダーがコンテンツを正確に伝えることができます。たとえば、ドキュメントのタイトルは第1レベルの見出し、セクションタイトルは第2レベル（例: H2）、サブセクションの見出しは第3レベルまたは第4レベルにする必要があります。例を以下に示します:

 

ページタイトル（見出し1）

セクションタイトル（見出し2）

テキストコンテンツはここに表示されます。

サブセクション見出し（見出し3）

テキストコンテンツはここに表示されます。

 

メモ: 見出しレベルを飛ばさないようにします（たとえば、第1レベルの見出しから第3レベルの見出しに飛ばさない）。 

 

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

タブ、アスタリスク、数字でテキストを手動でスタイル設定する代わりに、ワード プロセスまたはスライドショーアプリケーションの箇条書き（順序なしリスト）および番号付きリスト（順序付きリスト）機能を常に使用してください。スクリーンリーダーはこれらのリストの種類を認識し、コンテンツを適切に表示します。 

 

シンプルなテーブル構造

スパンまたは統合された行または列に注意し、複数レベルのテーブルヘッダーを避けます。結合されたセルにより、学習者への説明が紛らわしくなり、スクリーンリーダーが解釈を誤る可能性があります。可能であれば、視覚的なレイアウトにテーブルを使用することも避けます。 

 

リンクに説明を付ける

次のような文脈のない単独のフレーズは避けます。

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

 

より多くの情報を伝える次の代替フレーズをお勧めします。

• 「シラバスをダウンロードできます」
• 「____への引用」
• 「追加の____は、このリンクから入手できます」

 

また、ドキュメントが印刷用である場合やURLが関連コンテンツである場合を除き、www.abcde.comなどのURLのみをリンクとして使用することは避けます。

 

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

1つの画像で多くの情報を伝えられますが、視覚障害がある学習者や盲目の学習者は、画像の代替テキストに頼ります。必ずドキュメントやスライドプレゼンテーションなどの画像に、明確でコンテキスト主導の代替テキストを提供します。このテキストは、スクリーンリーダーやその他の支援技術を使用している場合に読み上げられます。

• 多くのツールで画像の代替テキストを提供できます。これらのボックスには、「代替テキスト」、「代替」、さらには「画像の説明」などのフレーズがラベル付けされている場合があります。もしこれらが存在する場合は、このフィールドを使用して、画像の代替テキストを提供します。
• 画像の意味を伝える代替テキストは、簡単な説明だけとは限りません。例えば、代替テキストには「歯車アイコン」ではなく、「設定時に使う歯車の画像」と記述します。もし画像を削除する必要がある場合、その場所にどのようなテキストを配置するでしょう？あるいは、電話で誰かに画像を説明する必要がある場合、その人に何と言うかを考え、それを画像の説明に役立てます。
• 画像に関連するコンテンツや機能がない場合や、装飾である場合、または代替テキストが近くのテキストで提供されている場合、可能であれば画像の代替テキストを空にします。一部のワードプロセスまたはスライドショーアプリケーションには、「空白」または「空」のオプションがあります。 
• 「～の写真」、「～の画像」、「～へのリンク」などの単語の追加を避けます。支援技術はこれを自動的に処理し、ユーザーに自分が画像上にいることを知らせます。
• 明確さや文脈を失うことがない範囲で、可能な限り使用する単語数を抑えます。
• PDFドキュメントの場合、Adobe Acrobat Proは、ドキュメントがアクセシビリティ標準に準拠しているかどうかを検証できます。リソースセクションのリンクをご覧ください。

 

代替テキスト付きのサンプル画像

多くの場合、コピーはデフォルトで画像ファイル名になるため、役に立たない場合があります。

デフォルト代替テキスト（ファイルの名前）: adult-kid-tech_revised_220811.jpg

修正された代替テキスト: ソファに座ってノートパソコンで作業している大人と、ヘッドホンを付けてタブレットを見ている子供。

 

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

色のコントラストは、2つの色の明るさの差を測定したもので、1:1（悪い）から 21:1（良い）までの比率で表されます。特にテキストと背景の間で、高いカラーコントラストを使用します。テキストを含む画像も高いコントラストにする必要があります。低コントラストと高コントラストの組み合わせの違いを説明するために、以下の白い背景に色付きのテキストの例をいくつか示します。 

悪いコントラスト

アクセスしやすいコンテンツとして認められる最小コントラスト比は4.5:1です。このしきい値を満たさず、避けるべき色を組み合わせている例を次に示します。

• 黄色テキスト – スコア: 1.07:1
• 淡緑色テキスト – スコア: 1.12:1
• オレンジ色テキスト – スコア: 2.14:1
• ピンク色テキスト – スコア: 3.14:1
• 赤色 – スコア: 4.0:1

 

良いコントラスト

以下の色の組み合わせは、十分なコントラスト（4.5:1から7:1の比率）があるため適切な選択です。

• 青色のテキスト – スコア: 4.68:1
• 濃い緑色のテキスト – スコア: 5.14:1
• 紫色のテキスト – スコア: 6.95:1

 

優れたコントラスト

最適なコントラスト（7:1以上の比率）である以下の色を使用することをお勧めします。

• 濃いオレンジ色のテキスト – スコア: 7.43:1
• 濃い灰色のテキスト – スコア: 12.63:1
• 黒色のテキスト – スコア: 21:1

 

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

内容

• 本文を整理し、コンテンツを短い段落に分割する
• 長いドキュメントには、目次または要約を掲載する
• リソースとして用語集を含める
• スペル、文法、読みやすさを確認する

 

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

• セマンティックマークアップを使用して、支援技術が適切に機能するようにする 
• 真の見出しを使用してコンテンツを整理する
• 真の箇条書きと番号付きリストを使用する
• 可能な限りシンプルなテーブル構造を使用する
• リンクに説明を付ける

 

代替テキスト

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

 

カラーコントラスト

• テキストと画像に強いカラーコントラストを使用する

 

その他アクセシビリティとインクルーシブに関する記事へのリンク

• アクセスしやすいインクルーシブなコンテンツの作成の概要 
• アクセスしやすいビデオコンテンツに関する考慮事項
• インクルーシブなビデオコンテンツに関する考慮事項
• アクセシビリティとインクルーシブに関するリソース