SharePoint Online のブログへのアクセシビリティを高める

SharePoint Online のブログに、視覚障碍、運動障碍、または聴覚障碍のある読者が、アクセスできるようにすることができます。

たとえば、読みやすさを高めるフォントと色が含まれるテンプレートを使用できます。個々のブログ投稿およびその他のページに、ブログ要素へのわかりやすい説明、イメージなどのマルチ メディア コンテンツの代替テキスト (alt テキストとも呼ばれる)、オーディオ要素のトランスクリプトなどを追加できます。

注記: 

この記事の内容

障碍のあるユーザーがどのようにブログを利用するか

障碍のある読者がどのようにブログ利用するかを把握することで、ブログのアクセシビリティを高めることができます。

  • ユーザーは、ショートカット キーを使用してブログ内を移動する場合があります。キーボード ナビゲーションの既定のタブ順序がそのままになるように、画面要素を既定の場所に保持することが重要です。詳細については、「Keyboard shortcuts in SharePoint Online (SharePoint Online のショートカット キー)」を参照してください。

  • ユーザーは、スクリーン リーダーを使用してブログのコンテンツを音声に変換する場合があります。スクリーン リーダーがページを正しく効率的に解釈するように、すっきりとした従来のままのフォント、フォント スタイル、大文字と小文字のスタイルを維持します。詳細については、「SharePoint Online で作成されたブログと共にスクリーン リーダーを使用する」を参照してください。

アクセシビリティの高いブログのテンプレートを適用する

サイトの視覚的なテーマを慎重に選択することで、すべてのユーザーに対してブログ サイトのアクセシビリティを高めます。"Office" テンプレートは、すべての新しい SharePoint Online サイト用の既定のテンプレートで、アクセシビリティの高いテーマです。

Office テンプレートは、カラー バランス、およびテキストと背景のコントラストを最適化します。弱視や色覚障碍などの視覚障碍のあるユーザーにとって、このテンプレートを使用するサイトは読みやすいものとなります。

Office テンプレートは、いつでもブログに適用できます。また、リンク、見出し、およびその他のテキストに使用するレイアウトや色を変更することもできます。

  1. SharePoint Online Web サイトにサインインし、ブログ ページに移動します。

  2. スタイル テンプレート ギャラリーを開くには、[設定] メニュー (右上隅にある歯車アイコン) に移動し、[外観の変更] コマンドを選択します。

  3. 使用するテンプレートを選択します。"Office" テンプレートは、アクセシビリティを最大限に高めるようデザインされています。

  4. 次のページで、テンプレートの詳細を確認します。必要に応じて、背景イメージ、配色、サイト レイアウト (左側のナビゲーション バーの有無)、および見出しと本文のフォントを変更します。これらの変更は、テンプレートの使用に反映され、ブログ全体のすべてのページに適用されます。

  5. ブログ サイトでテンプレートをプレビューするには、[試してみる] リンクを選択します。

  6. [デザインのプレビュー] ページで、テンプレートがブログとどのように連動するのかを確認します。

  7. テンプレートを適用するには、[はい、確定します] リンクを選択します。選択したテンプレートをさらに変更するには、[いいえ、まだ完成ではありません] リンクを選択して、前のページに戻ります。

    テンプレート ギャラリーに戻り、別のテンプレートを選択して、[やり直す] リンクを選択します。

ロゴをカスタマイズして代替テキストを追加する

ブログ サイトを含むすべての新しい SharePoint Online サイトには、既定のプレース ホルダー ロゴがあります。このロゴはいつでも置き換えて、代替テキストを追加することができます。

  1. SharePoint Online Web サイトにサインインし、ブログ ページに移動します。

  2. [設定] メニュー (右上隅にある歯車アイコン) に移動し、[サイトの設定] コマンドを選択します。

  3. [外観] で、[タイトル、説明、ロゴ] リンクを選択します。

  4. [ロゴの挿入] で、[コンピューターから] リンクを選択します。

  5. [ドキュメントの追加] ダイアログ ボックスで、[ファイルの選択] ボタンをクリックします。

  6. ブログに使用するロゴ イメージを見つけるには、コンピューターのファイルを参照し、イメージを選択して、Enter キーを押します。

  7. ブログのロゴとして選択したイメージをアップロードするには、Alt キーを押しながら O キーを押します。

  8. [説明の入力] フィールドに移動し、ロゴ イメージを説明する代替テキストを入力します。

  9. イメージおよび説明の代替テキストを保存するには、Alt キーを押しながら O キーを押します。

    注: ロゴは、SharePoint Online ブログ サイトのホーム ページに自動的にリンクされます。このリンクを変更することはできません。

ブログ要素にカテゴリを追加する

SharePoint Online ブログは、選択した任意の方法でカテゴリ化できるリストおよびライブラリを含む Web サイトです。カテゴリは、ブログ サイト全体でリストおよびライブラリ内の投稿やその他のコンテンツを整理するのに役立ちます。ブログの中心は、ブログ投稿のリストです。ブログ サイトには、他のブログへのリンクのリストなど、その他のさまざまなリストを含めることができます。また、ブログには、写真またはリファレンス ドキュメントのライブラリを含めることもできます。

カテゴリは、さまざまな主題またはさまざまな目的でブログ投稿を作成する場合に特に役立ちます。投稿がカテゴリ別に整理されていると、ユーザーは、カテゴリ リストで該当するアイテムを選択して、興味に沿った投稿を容易に見つけることができます。

リスト、ライブラリ、およびカテゴリを明確に説明することで、読者はそれぞれの目的を理解しやすくなります。これにより、ブログのアクセシビリティが高まります。

  1. SharePoint Online Web サイトにサインインし、ブログ ページに移動します。

  2. [設定] メニュー (右上隅にある歯車アイコン) に移動し、[サイトの設定] コマンドを選択します。

  3. [サイトの管理] で、[サイトのライブラリとリスト] リンクを選択します。

  4. [サイトのライブラリとリスト] ページで、次の操作を行います。

    • 投稿のリストに説明を追加するには、["投稿" のカスタマイズ] リンクを選択します。

    • 写真のライブラリに説明を追加するには、["写真" のカスタマイズ] リンクを選択します。

    • その他のアセットのライブラリに説明を追加するには、["サイト アセット" のカスタマイズ] リンクを選択します。

    • カテゴリに説明を追加するには、["カテゴリ" のカスタマイズ] リンクを選択します。

  5. [全般設定] で、[リスト名、説明、ナビゲーションの列挙] リンクを選択します。

  6. [説明] テキスト ボックスで、プレース ホルダー テキストを、読者に対して要素を最適に説明するコンテンツに置き換えます。

  7. [保存] ボタンを選択し、Enter キーを押します。

コンテンツのアクセシビリティを高めるためのヒント

ブログにテキストを追加する際には、コンテンツのアクセシビリティを高めるためにフォント、見出し、およびハイパーリンクを使用します。

わかりやすくするためのスタイル フォント

テキストでフォント、ポイント サイズ、種類、および大文字と小文字を使用する方法を把握しておきます。視覚障碍があるユーザーおよびスクリーン リーダーを使用するユーザーのために、読みやすさを考慮してください。

  • 単純なフォントを使用し、使用するフォントはブログ サイト全体で 2 ~ 3 個までとします。

  • 14 ポイントなどの固定フォント サイズは設定しないでください。代わりに、標準などのスタイルを使用します。固定サイズは、画面上の他の要素と干渉する可能性があります。特に、画面の大きさが拡大または縮小されたときです。固定フォント サイズを使用すると、たとえば、テキスト行が列と重複したり、テキストが表示されなくなる可能性があります。

  • 太字 (Ctrl キーを押しながら B キーを押す) または斜体 (Ctrl キーを押しながら I キーを押す) フォントを適用する代わりに、[テキストの書式設定] リボン タブ の [スタイル] グループで、[強調] または [アクセント] スタイル オプションを選択します。これらのスタイルには、フォントの外観とその意味に関する情報が含まれています。たとえば、[強調] スタイルでは、選択したテキストに斜体が適用されますが、スクリーン リーダーは "強調" の語を音声にします。

  • 文の先頭文字を大文字にします。大文字ばかりが長く続くと、読みにくくなる可能性があります。加えて、スクリーン リーダーは大文字と小文字を区別しないので、意図する違いをユーザーが認識できません。

コンテンツの概略をつかめるように見出しを追加する

ユーザーは多くの場合、Web コンテンツをざっと見て概要をつかみ、特に関心があるコンテンツだけをじっくり読む傾向にあります。さらに、スクリーン リーダーは、ユーザーが概要をつかんで必要な情報をすばやく見つけられるよう、見出しを音声に変換します。

  1. ブログ投稿またはページの [編集] モードにある [本文] ボックスで、見出しとして使用するテキストを選択します。

  2. [テキストの書式設定] タブの [スタイル] グループで、目的の見出しレベルを選択します。

    注: 見出しは階層状になっています。通常、見出し 1 スタイルは最上部の見出しです。見出し 2 は第 2 レベルです。見出し 3 は下位見出しに使用でき、ドキュメント内で必ず 1 つ以上の見出し 2 の後に配置されます。

わかりやすいハイパーリンクを作成する

スクリーン リーダーは、ハイパーリンクの表示テキストを読み上げます。このテキストをわかりやすくすることが重要です。表示テキストは、聞き手がリンク先の内容を把握できるようにする必要があります。

  1. ブログ投稿またはページの [編集] モードにある [本文] ボックスで、ハイパーリンクを表示する場所にフォーカスを設定します。

  2. [ハイパーリンクの挿入] ダイアログ ボックスを開くには、[挿入] タブで、[リンク]、[アドレスから] の順に選択します。

  3. [表示するテキスト] ボックスに、リンク テキストを入力します。最も役立つわかりやすいリンク表示テキストは、多くの場合、Web サイト名、ページ タイトル、または主題です。"ここをクリック" など、内容に関するヒントをほとんど提供しないリンク テキストは使用しないでください。

  4. [リンク アドレス] ボックスに、リンク先の Web サイトの Web アドレスを入力するか、貼り付けます。

    注: リンクが正常に動作することを確認するには、[リンクのテスト] を選択します。

  5. 作業が終了したら、[OK] を選択します。

イメージとメディアに代替テキストを追加する

画像やその他のイメージなどのビジュアル オブジェクトをブログに追加する際には、イメージについて説明する代替テキストを使用します。スクリーン リーダーで正しく解釈できるように、テーブルを書式設定します。ビデオのクローズド キャプション、およびビデオ オブジェクトとオーディオ オブジェクトのトランスクリプトを追加します。その方法については、「アクセシビリティの高い画像とメディアをサイトに追加する」を参照してください。

テーブル間を簡単に移動できるようにする

テーブル間を簡単に移動できるようにするには、シンプルなまま (セルを結合または分割せずに) 保持します。また、見出し行のスタイルを設定し、列見出しを追加することが重要です。

  1. ブログ投稿またはページの [編集] モードにある [本文] ボックスで、テーブルを追加する場所にフォーカスを設定します。

  2. [挿入] タブの [テーブル] グループで、[テーブル]、[テーブルの挿入] の順に選択します。

  3. [テーブルの挿入] ダイアログ ボックスで、2 つのテキスト ボックスに、列数と行数を入力します。[OK] ボタンにタブ移動し、Enter キーを押します。[本文] ボックスに、テーブルが表示されます。

  4. アクセシビリティを高めるためにテーブルを書式設定します。

    • 見出し行を指定します。

      [デザイン] タブの [テーブル スタイルのオプション] グループで、[見出し行] チェック ボックスをオンにし、該当する場合は [最初の列] チェック ボックスをオンにします。

    • 各列の見出しにラベルを追加します。

    • キャプションとしてテーブルの簡単な説明を追加します。

      [テーブルのレイアウト] タブの [プロパティ] グループで、[概要] テキスト ボックスに説明を入力します。

  5. 列の幅と行の高さのサイズを指定する場合は、ピクセルまたはポイント値ではなく、パーセンテージによる比例サイズ指定を使用します。これにより、ユーザーのデバイスまたはズーム レベルに関係なく、テーブルが適切にスケーリングされます。

    • [テーブルのレイアウト] タブの [幅と高さ] グループで、[列の幅と行の高さ] ボックスにパーセンテージ値を入力します。各値の後に、パーセント記号 (%) を入力します。

    • 必要に応じて、[テーブルの幅とテーブルの高さ] ボックスにもパーセンテージ値を追加します。

オーディオおよびビデオのキャプションを追加する

ブログに追加するビデオには、クローズド キャプションを含める必要があります。クローズド キャプションは、聴覚障碍のあるユーザーにとって不可欠です。クローズド キャプションは、非ネイティブ スピーカーだけでなく、音声情報の処理にさまざまなオーディオ ビジュアル ラーニング スタイルを使用するユーザーを支援できます。ブログに追加するオーディオ クリップには、聴覚に障碍のあるユーザー向けにトランスクリプトを含める必要があります。ビデオ クリップとオーディオ クリップの両方が、代替テキストで特定される必要があります。

  • ブログ投稿またはページの [編集] モードにある [本文] ボックスで、ビデオを追加する場所にフォーカスを設定します。

  • [挿入] タブの [メディア] グループで、[ビデオとオーディオ] を選択し、[コンピューターから]、[埋め込み]、[SharePoint から]、または [アドレスから] を選択します。

  • ブログでビデオまたはオーディオを検索、選択、および挿入するには、画面の指示に従います。

スキルを磨く
トレーニングの探索
新機能を最初に入手
Office Insider に参加する

この情報は役に立ちましたか?

ご意見をいただきありがとうございます。

フィードバックをお寄せいただき、ありがとうございます。Office サポートの担当者におつなぎいたします。

×