ページをアクセシブルにする

アクセシブルなページは誰でも使えます。スクリーンリーダーを使う人、視力の弱い人、画面上の動きを避けたい人、単に日差しの下でスマートフォンを見ている人も含みます。LinkHarborは多くのことを自動で行いますが、自分で気をつけるべきこともあります。この記事では、その注意点を説明します。

#LinkHarborが自動で行うこと

• 訪問者がシステムで「視差効果を減らす」（Reduce motion）をオンにしている場合、背景動画は再生されず、スクロール効果、パララックス効果、ホバーアニメーションはオフになります
• 「見出し」ブロックは、スクリーンリーダーが目印にする本物の見出しとして出力されます
• 「画像」ブロックと「ギャラリー」ブロックの画像には、入力した代替テキストが説明として付きます
• ボタンの文字色を自分で選んでいない場合、LinkHarborがボタンの色に合う色を選びます

#画像の代替テキスト

代替テキストは、画像に何が写っているかを説明するものです。スクリーンリーダーが読み上げ、画像が読み込まれないときにも表示されます。

「画像」ブロック

ブロックエディターの「代替テキスト」欄です。

「ギャラリー」ブロック

画像ごとに最大200文字の「代替テキスト」です。

• ファイルではなく内容を説明します：「IMG_2041」ではなく「木のテーブルに置かれたラテアートのカプチーノ」
• 文字を含む画像では、その文字を代替テキストに入れます
• 短くまとめます。通常は1文で十分です

各欄の場所は無料ブロックの詳細とコンテンツブロックで説明しています。

#見出しで構成する

長いページは、大きな文字ではなく「見出し」ブロックで区切りましょう。スクリーンリーダーの利用者は見出しから見出しへ移動し、「営業時間」や「連絡先」など探しているものをすばやく見つけます。

#分かりやすいリンクタイトル

• どのリンクも単独で意味が分かるようにします：「ここをクリック」ではなく「メニュー（PDF）」
• 異なるリンク先に同じタイトルを付けないようにします
• タイトル先頭の絵文字は読み上げられるので、控えめに使います

リンクについて詳しくはリンクの追加とスタイル設定をご覧ください。

#コントラストと読みやすさ

• 文字と背景のコントラストを十分に確保します。淡いパステルカラーでは特に注意が必要です
• 背景画像や動画の上に文字を置く場合は、テーマの「オーバーレイの不透明度」で読みやすさを保ちます
• 重要な文字を画像だけに入れないでください。スクリーンリーダーの利用者には読めません
• テキストブロックには読みやすいフォントと、小さすぎない文字サイズを選びます

色、背景、フォントはテーマで設定します。デザインをご覧ください。

#カスタムCSSは慎重に

カスタムCSSではほとんど何でも変更でき、アクセシビリティに関わる部分も変えられてしまいます。フォーカスの枠線を隠したり、文字を小さくしすぎたりせず、変更後はキーボードでもページを試してください。カスタムCSSをご覧ください。

#自分で試す

1. スマートフォンのスクリーンリーダー（iPhoneではVoiceOver、AndroidではTalkBack）をオンにして、ページを聞いてみます
2. システム設定で文字サイズを大きくし、すべてが読みやすいままか確認します
3. 明るい光の下とダークモードでページを見てみます