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

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

代替テキストを含める

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

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

画像またはロゴを選択します。
その他の編集オプションアイコンを選択 [代替テキストを追加] を選択します。
説明の欄に代替テキストを入力します。

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

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

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

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

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

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

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

カスタムテーマの詳細

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

色のコントラストが十分にあれば、テキストや画像は読みやすく、わかりやすくなります。Web Content Accessibility Guidelines（WCAG）2.0（ウェブコンテンツのアクセシビリティガイドライン（WCAG）2.0）では、サイズの大きな文字には 4.5:1 以上、その他の文字と画像には 7:1 以上のコントラスト比を推奨しています。たとえば、白い背景に明るい灰色の文字は避けます。

Chrome DevTools を使用すると、色のコントラストを上げる際の推奨事項を確認し、サイトに適用することができます。

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

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

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

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

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

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

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

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