ホームページの写真を登録するときに、「代替テキスト」という入力欄で手が止まることがあります。これは、画像を見られない人や、画像が表示されない場面へ、写真が伝える情報を文字で届けるためのものです。写っているものを全部列挙するより、この場所で何を伝える写真なのかから考えると書きやすくなります。
島田市周辺で店舗やサービスのホームページを更新する方に向けて、写真の役割と代替テキストの関係を説明します。検索語を詰め込む作業ではありません。お客様が画像から得るはずの情報を、一緒に載せる文章と分担して伝える作業です。
同じ写真でも掲載する場所で説明が変わります
説明用の架空例として、持ち手の付いた青い陶器のカップを考えます。商品を選ぶページなら、形や特徴を知るための写真です。「青い陶器のカップ。側面に大きな持ち手がある」のような説明が考えられます。ただし、写真から分からない容量や材質の詳細を推測して加えません。仕様は確認済みの本文へ書きます。
同じ写真を、陶芸教室の雰囲気を添えるだけの背景として使う場合、周りの本文ですでに内容を伝えているなら、追加の説明が不要な装飾画像かもしれません。写真が商品詳細へ進むリンクなら、「青い陶器のカップの詳細を見る」のように、移動先や機能を伝える必要があります。
W3C WAIの画像チュートリアルは、情報を伝える画像、装飾画像、リンクやボタンになる画像で代替テキストの考え方を分けています。装飾だけなら空の代替テキストを用いますが、入力欄を空にするだけでその設定になるかは、使っている編集環境の実装を制作担当へ確認してください。
短くする前に写真だけが伝えていることを探します
掲載ページの見出しと、写真の前後の文章を読みます。それから、画像を一時的に見ないつもりで、何の情報がなくなるかを考えましょう。入口の案内写真なら入口の位置、商品の写真なら選ぶための特徴が残る候補です。
「写真」「画像」とだけ書いても、その内容は伝わりません。一方で、背景の小物や撮影時の天気まで書く必要があるとは限りません。入口を探す写真であれば、入口の目印を先に伝えます。色や形が選択に関わる場合は説明へ残します。写真の目的に関係のない地名やサービス名を繰り返さないようにします。
図の中に営業時間や申込み条件などの文章が入っているときは、「案内画像」という説明では不足します。長い案内は、ページ本文にも読める文字として載せる方法を相談しましょう。複雑な図をすべて短い一文へ押し込める必要はありません。本文の詳しい説明へつなぐ形を選べます。たとえば説明用の架空の案内図なら、短い代替文を「入口から受付までの案内図」とし、本文に曲がる位置や受付の目印を書きます。制作担当には、その詳しい文章の掲載場所も渡し、図と説明の対応が伝わる形を相談します。
制作担当には写真と文案を組み合わせて渡しましょう
次の四点を一枚のメモへ書けば、何を設定したいかが伝わります。掲載ページのURL、写真のファイル名、写真が担う役割、代替テキストの候補です。装飾と考えた場合は、候補を空欄にするだけでなく「周囲の文章で情報を伝えており装飾だけのため」と理由を添えます。
写真にリンクがあるなら、その行き先も記録します。商品名を伝える画像なのか、詳細ページへ進む操作なのかで、適した説明が変わるためです。同じファイルを別の場所で使う場合も、候補をそのまま全ページへ使い回す前に文脈を確認します。
見た目の変化がなくても設定結果を確かめます
代替テキストは、通常の画面に必ず表示される文章ではありません。更新後に見た目が変わらないから未設定とも、登録したから適切とも判断できません。制作担当へ、公開ページで目的の画像に説明が設定されたことと、装飾画像の扱いを確認してもらいます。画像がリンクなら、移動先も合わせて確かめます。
読み上げ環境を使える人がいれば、見出し、写真、周囲の文章を順に聞いて、説明が重複しないか、画像の役割が分かるかを確認してもらうと役立ちます。手元で確認できない範囲は「未確認」と残し、見た目だけで読み上げまで検証済みにしません。
写真や掲載文を差し替えたときは、代替テキストも同時に見直します。一枚の写真が何を伝えるかを決めておくと、更新担当者が変わっても、必要な説明を残しやすくなります。
あわせて確認したい記事
自社の説明と確認の進め方を整理したい場合は、LIFESEEDSのホームページ制作をご覧ください。対象のページや資料をもとに相談する方は、お問い合わせから困っている点をお知らせください。
コメント