アクセシビリティ対応の文章は優れた文章です。コンテンツが誰にとっても使いやすいものになります。アクセシビリティを念頭に記述する方法について、いくつかヒントを紹介します。

わかりやすい文章

ドキュメントは、人がそこから情報を得られて初めて価値があります。文章が複雑すぎると、誰もそれを利用できませんわかりやすい言葉はアクセシビリティを向上させます。

次のヒントを基に、文章をシンプルかつ簡潔に保つようにしてください。

見出し構造

アクセシビリティ対応コンテンツを作成する上で、見出しは非常に重要です。スクリーンリーダーの利用者は直接特定のコンテンツにジャンプすることができるので、時間の節約になります。

コンテンツを作成しているシステムで作業します。Microsoft Word、PowerPoint、Open Officeなど人気の高いツールには スタイルや書式設定のオプションがあり、ドキュメントに適切な構造を構築するために利用できます。選択したエディタツールに用意されているスタイルや書式設定のオプションを使用します。

例：見出し1 (

)

見出しスタイルの数字はスクリーンリーダーの構造コンテキストを作成し、視覚的な障害を抱えるユーザが、ドキュメント内の視覚的な区切りが見えなくてもコンテンツを理解できるようにします。

例：

教育におけるアクセシビリティ

Blackboardにおけるアクセシビリティ

アクセシビリティ対応コンテンツのデザインの詳細

コンテンツの強調

スクリーンリーダーは、次を含むフォントスタイルを識別しません。

  • カラー
  • 太字
  • 斜体
  • 下線
  • 取り消し線

これらのスタイルを使用して視覚的な区切りを提供します。重要性を示したり情報を伝えたりする唯一の方法としてこれらを使用しないでください。

例：赤字のテキストはアラートのように見えます。スクリーンリーダーの利用者はテキストが赤字であることがわかりません。合図が見えなければ、アラートであることがわかりません。

視覚的に強調する必要がある場合、アクセシビリティの観点から、別の方法を使用してください。重要な文の最後には感嘆符 (！) を使いましょう。スクリーンリーダーは、感嘆符や疑問符を抑揚をつけて読み上げます。つまり、ツールは"疑問符"とは読まず、質問調で質問を読み上げます。

例：繰り返しますが、フォントのスタイルのみを使って重要ポイントを表わさないでください！

イメージ

画像が何を目的としているのか自問自答してください。ページに視覚的な魅力を与えるため？それとも目の見えるユーザに対し、期待することに関する視覚的な参照手段を与えるため？この画像は、コンテンツを理解するために全ユーザが参照する必要があるか？

目的がよく分かっていない場合は、画像を使用しないでください! 学習障害を抱える人々にとっては、不要な画像は混乱の元であり、圧倒されてしまいます。

代替テキスト

LMSまたはWebサイトを使用して情報を伝える場合、画像をアップロードする際に代替テキストのフィールドが表示されます。装飾的な画像の場合は、代替テキストのフィールドを空白のままにします。この場合、スクリーンリーダーは画像を無視します。ページに情報を追加しない画像は装飾的な画像です。

Webアクセシビリティ戦略Webサイトの装飾的画像の詳細

例：ツールのユーザインターフェイス (UI) を表示する画像の場合は、そこにアクセスする方法やページ上の内容を記述します。ページ上の画像の説明の例をご覧ください。

スクリーンリーダーに画像を飛ばしてほしくない場合は、画像に代替テキストを含めます。支援ツールは画像だとわかっているので、"～の画像"のように説明する必要はありません。簡潔に、わかりやすく、説明的に記述します。

"関連テキストを示す画像"など、すべての画像に同じ代替テキストを使用しないでください。意味がなく、混乱を招くだけです。

複雑な画像の場合は、代替テキストを6、7文字程度に短く保ちます。そして全員が見られるように画像の下にキャプションを追加し、分かりやすい説明を加えます。

情報画像

情報画像には代替テキストが必要です。これはユーザが視覚で取得するのと同じ情報を語り口調で説明するものです。代替テキストは情報画像の直後に配置する必要があります。代替テキストを表示するには、ページの先頭にアンカーリンクを含めます。

代替テキスト付き情報画像の例をご覧ください。

画像内のテキスト

WCAGガイドラインに従って、テキストは画像の一部として含めるべきではありません。代わりに、ページ内で画像についてテキストで説明します。

リンク

リンクを説明的なものにすることが必要です。リンクはすべて、ユーザがクリックすると何にたどり着くのかを説明する必要があります。これは、スクリーンリーダーが提供するリンクリストツールにとって重要です。このツールはページ上のリンクのみをリストします。リンクの追加コンテキストはありません。

例：このページでは、リンクリストツールが読み上げるものは次のものです。"ページ上の画像の説明の例をご覧ください"、"代替テキスト付き情報画像の例"など。それぞれ、そのリンクを選択したときに、どのような情報が得られるのかわかるような説明にします。

  • "ここをクリック"や"詳細を参照"など、一般的なフレーズを使用しないようにします。リンクリストツールは、入力された通りにテキストを読み上げます。同じリンクが繰り返されると ("ここをクリック、ここをクリック、ここをクリック"が繰り返し読み上げられることを想像してみてください)、ユーザの混乱を招きます。ユーザはリンク先はどこか、なぜクリックしなければならないのかを理解する必要があるのです。説明的なリンクはこの情報を提供します。
  • WebアドレスやURLは、情報を提供するように考慮されていないため、使用しないでください。スクリーンリーダーの文字を１つずつ読み上げてしまいます。そうではなく、テキストを説明的なものにしてください。
  • 新しいウィンドウでリンクを開くと、ユーザを混乱させる可能性があります。最小限にとどめてください。新しいウィンドウを使用するときはユーザに伝えます。

リストと表

コンテンツを作成しているツールでこの作業を行います。コンテンツエディタの箇条書き、番号付きリスト、表ツールを使用します。あるいはソースを表示して適切なHTMLタグを使用します。

リスト

適切に作成された箇条書きリスト (

    ) は、スクリーンリーダーの利用者に、箇条書きリスト内の項目数を伝えます。

    適切に作成された番号付きリスト (

      ) は、スクリーンリーダーの利用者に、番号付きリスト内の項目数を伝え、各項目の番号を読み上げます。

      表

      できるだけ、表よりもリストを使用します。表もアクセシビリティ対応にできますが、スクリーンリーダーの利用者がこのようなテーブルを操作し、理解するには高度なキー操作が求められます。

      列見出し () を使用する。これにより、ユーザが表の中のセルを移動するたびに、スクリーンリーダーがその列の見出しを改めて読み上げるようになります。この結果、ユーザが各セルのコンテンツの内容を理解できます。列に名前を付けて、セルに情報を追加する際には、それぞれのセルをどのように読み出すかを検討してください。

      コンテンツの視覚的レイアウトの作成には、表を使用しないでください。

      アクセシビリティ対応の表の例

      キーボードコマンド

      Webコンテンツのキーボードコマンドには世界標準規格があります。たとえば、Tabキーを押すと、コンピュータは次のボタンにフォーカスを移動します。これらは説明する必要がありません。グローバルコマンドのリストについては、このJAWSキーボードコマンドクイックリファレンスガイドを参照してください。

      時には、開発者が製品用に独自のキーボードコマンドを作成する必要があります。たとえば、Blackboard Collaborateでは、マイクをオン/オフするための独自のキーボードコマンドを作成しました。このような独自のキーボードコマンドはトピックで文書化します。

      クリックとキーボードコマンドは別の目的があるので、同じ段落内に記述しないでください。MacコマンドがPCコマンドと異なる場合は、キーボード操作トピックの段落内で2つの文章にわけて記述します。

      例1

      デフォルトでは、設定を完了すると、非表示でミュートの状態になります。マイクとカメラのアイコンをクリックして、ミーティングへの完全な参加を開始します。

      キーボードの場合、[Alt+M]キーを押してマイクのオン/オフを切り替えます。[Alt+C]キーを押すとカメラのオン/オフを切り替えられます。

      例2

      プレゼンテーションを共有すると、スライド間を移動できる参照ボタンが表示されます。

      キーボードの場合、[Alt+Page Up]キーを押すと次のスライドに進みます。[Alt + Page Down]キーを押すと前のスライドに戻ります。Macでは、[Alt+Fn+上矢印]または[Alt+Fn+下矢印]キーを押します。

      動画

      動画には字幕 (キャプション) が必要です。詳細については、「動画へのキャプションの追加について」を参照してください。