サイトのアクセシビリティを向上させる

サイトを作成するときは、下記の方法を参考にして、障がいのある方を含むすべてのユーザーにとって読みやすいサイトを作成するようにしてください。

代替テキストを含める

画像、ロゴ、図形描画などのグラフィック要素には代替テキストを追加します。代替テキストがない画像の場合、スクリーン リーダーでは「画像」としかアナウンスされません。画像によっては自動的に代替テキストが含まれることもあるため、その代替テキストが適切であるかどうか確認することをおすすめします。

挿入した画像の代替テキストを追加、編集する

背景画像の代替テキストを追加、編集する

1. パソコンから、Google サイトでサイトを開きます。
2. 次の方法で背景画像に代替テキストを追加します。
   • サイトのヘッダー: ヘッダーの左下にある画像アイコン  をクリックします。
   • 各セクション: セクションの右側にある「セクションの色」アイコン   [ 画像] をクリックします。
3. [代替テキスト] をクリックします。
4. 説明欄に代替テキストを入力します。

カスタムテーマのロゴやバナー画像の代替テキストを追加、編集する

新しいカスタムテーマに代替テキストを追加する

1. パソコンから、Google サイトでサイトを開きます。
2. 右側の [テーマ] パネルを選択します。
3. [カスタム] の「テーマを作成」アイコン  を選択します。
4. ロゴまたはバナー画像をアップロードするには、画像を追加アイコン   [アップロード] をクリックします。
5. 代替テキストを追加するには、アップロードした画像  [代替テキスト] をクリックします。

カスタムテーマのヘッダーに代替テキストを追加、編集する

1. パソコンから、Google サイトでサイトを開きます。
2. 右側の [テーマ] パネルを選択します。
3. [カスタム] で、カスタムテーマの右上にあるその他（テーマ オプション）アイコン   [編集] を選択します。
4. [画像] で、ヘッダー画像  [代替テキスト] をクリックします。
5. 説明欄に代替テキストを入力します。

カスタムテーマの詳細

高コントラストの色を使用する

説明的なリンクテキストを使用する

スクリーン リーダーではリンクもスキャンされるため、リンクの説明文を使用すると便利です。リンクテキストにはページのタイトルを使用することをおすすめします。たとえば、プロフィール ページにリンクする場合は、リンクテキストを「ここをクリック」や完全な URL ではなく「プロフィール」などとします。

テキストのサイズと配置を確認する

サイトを読みやすくするため、可能な場合は大きいサイズのテキストを左揃えで使用します。両端揃えのテキストは、単語間に余分なスペースができるため、読みにくくなります。

書式設定の代わりにテキストを追加する

意味を伝えるうえで、視覚的な書式だけにたよるのは最善ではありません。太字やハイライトなどの書式の変更は、スクリーン リーダーによってアナウンスされない場合もあります。たとえば、テキストの重要な部分を示すために「重要」という言葉を追加します。

番号付きリストと箇条書きを使用する

Google ドキュメントと Google スライドでは、一部のリストが自動的に検出され、わかりやすく書式設定されます。たとえば、ドキュメントを入力中に「1.」で新しい行を開始すると、その行が自動的に番号付きリストの最初の項目になります。詳しくは、箇条書きと番号付きリストの書式設定に関する記事をご覧ください。