みなさん、ウェブサイトで画像を載せるときに代替テキストを設定していますか？
ウェブアクセシビリティを高めるうえで、代替テキストの設定は必須です。
また、これはウェブアクセシビリティの観点だけでなく、SEO対策としても有効です。
この記事では、HTMLやWordPressで代替テキストを設定する方法についてご紹介します！
代替テキストとは
代替テキストとは、ウェブサイト上の画像が何らかの原因で表示されないときや、音声読み上げ機能を使用したときに、画像の代わりに情報を提供するテキストのことです。
少し専門的な言い方をすれば「非テキストコンテンツに対して、同等の情報をユーザに提供するためのテキストのこと」です。
画像を確認できない状況でも画像に含まれる情報を得ることが可能になるため、代替テキストはあらゆる人にとって大切な情報源となります。
つまり、適切な設定をすることでウェブアクセシビリティを高めることができるのです。
また、これはSEO対策としても有効です。
検索エンジンは画像の内容を完全に理解することができないため、代わりに代替テキストから画像の内容を把握し判断します。
代替テキストが適切に設定されていることで検索エンジンに有効なコンテンツだと判断されやすくなり、SEO対策にも繋がるのです。
代替テキストは「alt属性（オルト属性）」と呼ばれることも多くあります。
これは、HTMLのimgタグを使用して画像を挿入する際に、alt属性で代替テキストを設定することからそう呼ばれています。
代替テキストの設定方法
HTML
HTMLで代替テキストを設定する場合は、imgタグのalt属性で指定します。
この方法はウェブ制作の基礎知識を持っている方が行うことが多い、少し専門的な方法です。
このように、alt属性のダブルクォーテーションで囲まれている部分が代替テキストになります。
WordPress
WordPressは専門知識がなくても簡単に編集が行えるため、ホームページやブログ運営に利用している方も多いのではないでしょうか？
WordPressで代替テキストを設定する方法は何通りかあるのですが、今回はそのうちの2つをご紹介します。
注意点
使用するテーマによっては、下記の方法で代替テキストの設定ができない可能性があります。ご了承ください。
【メディアライブラリから編集する方法】
この方法は、過去に投稿した記事の画像や、固定ページで使用している画像の代替テキストを設定するときに使える方法です。
①WordPressの管理画面で、左側にある「メディア」を選択する
②メディアライブラリが表示されるので、代替テキストを設定したい画像を開く
③「添付ファイルの詳細」画面が開くので、右側にある代替テキストの欄に設定したいテキストを入力する
④右上の×ボタンで「添付ファイルの詳細」画面を閉じると代替テキストが設定される
【投稿から編集する方法】
この方法は、過去に投稿した記事の画像や、これから投稿する記事の画像の代替テキストを設定するときに使える方法です。
・クラシックエディターの場合
①投稿記事の画像を選択すると下側にメニューが表示されるので、右から2番目の鉛筆マークをクリックする
②「画像詳細」画面が開くので、代替テキストの欄に設定したいテキストを入力する
③右下の更新ボタンを押下する
・ブロックエディタ（Gutenberg）の場合
①投稿記事の画像を選択すると右側にメニューが表示されるので、代替テキストの欄に設定したいテキストを入力する
②右上の更新ボタンを押下する
【おまけ】SNS
最近では、SNSでも画像に代替テキストを設定できるものが増えています。
検索エンジンで「Twitter 代替テキスト」のように、サービス名と代替テキストというキーワードで検索をすると詳しい設定方法が出てきます。
ぜひ、利用中のSNSの代替テキスト設定方法を調べて、設定してみてください！
ここでは、一例としてTwitterの代替テキスト設定方法をご紹介します。
①ツイートに画像を挿入すると、画像の右下に編集ボタンが表示されるので押下
②下の代替テキストの欄に設定したいテキストを入力する
③右上の保存ボタンを押下
代替テキストが設定されると画像の左下に「ALT」というマークが表示され、それをクリックすると設定した代替テキストを確認することができます。
このあとは、普段通りツイート本文を入力してから「ツイートする」ボタンを押して、ツイートを送信すれば完了です！
お役立ち資料 ホームページ作成からマーケティングのことまでよく分かる
みんなが使いやすいホームページを作るために取り組んでいること
まとめ
今回は、HTMLやWordPressで代替テキストを設定する方法についてご紹介しました。
ウェブアクセシビリティを高めるうえで、代替テキストは必須です。
いきなり過去の投稿すべての画像に代替テキストを用意するのは大変ですが、今日投稿する分から設定するのは意外と簡単にできます。
今日から少しずつ、アクセシビリティ対応をしていきませんか？
また、代替テキストはただ設定するよりも、適切な内容で設定した方が効果的に活用する事ができます。
適切な設定内容については次のアクセシビリティブログでご紹介しますので、お楽しみに！
