「代替テキストは記入する必要がある？」
「クライアントから代替テキストはわかりやすく適切な内容を記述するようにといわれたが何を書けばいいか悩む」
このように代替（だいたい）テキストの制作、実装のフローについて悩まれている方も多いので、今回は代替テキストに関わる内容をテーマに記事にしたいと思います。
さて、代替テキストは画像の代わりとなるもので、何らかの原因でWEB上の画像が表示されない場合に代わりに表示されたり、音声で読み上げるブラウザなどで画像部分に差し掛かったときその画像を説明するために読み上げたりします。
ソースコードではalt（オルト）で表示されています。
つまり、画像が見えなくてもどんな画像がそこにあるのかわかるよう、説明的なテキスト書くことが求められています。
ちなみに音声読み上げブラウザは、視覚障害者の方々や高齢で目が不自由になってしまった方がホームページの内容を理解するために使うことが多いツールです。行政など公的な役割のあるWEBサイトではその利用も考慮したWEBサイト制作が進められます。特に近年はWEBアクセシビリティ（＝そのWEBサイトへのアクセスのしやすさ）の点で、制作時は注意すべき項目といわれるようになりました。
○代替テキストにはSEO対策の側面も
一方で、代替テキストは検索エンジンに評価されるためSEOの面からも設定するメリットがあります。
・WEBサイトに関連ある画像が表示されている
・誰にでも利用しやすい利便性の高いサイトである
以上のように判断してもらえます。
さらに画像検索では直接的な効果があり、適切なキーワードでヒットしやすくなるので訪問者が増える可能性があります。
高品質なWEBサイトであると検索エンジンに伝えられますので、SEOの側面からも、ユーザー様の利便性の側面からも、代替テキスト（alt属性）はしっかり書いていきたいですね。
では、ここから一般的な代替テキストの書き方と、テキストをスピーディーにつくっていくコツ、抜け漏れチェックに使えるツール紹介をしていきます。
１．代替テキストの書き方
その画像が見えなくても何が書いてあるのかわかることが求められているので、その画像に書いてあるままを説明する文章にします。分かりづらいので複数の事例をご紹介します。
○Googleのサービス案内ページの場合
↓
代替テキスト：パスワードの保存機能ダイアログが表示されたChromeブラウザウィンドウ
○熊本県の場合
↓
代替テキスト：県政情報／観光・おすすめ情報／くまモンオフィシャル
○厚生労働省の場合
↓
代替テキスト：開く
※リンクを押すとメニューが展開するので、クリックで開くと次のページがあることをわかりやすくしています
画像の代わりになる言葉を入れるといっても色々なパターンがあることがわかります。
・画像バナーのときはバナーに載っている文字をそのまま記入する
・画像に機能があるときは「開く」など動作の説明をする
・ただの背景画像など説明不要の場合は空欄
このような代替テキストの作成ルールに則って、どんな方にも使いやすく検索エンジンにも理解してもらいやすいWEBサイトを作っていきたいですね。
２．代替テキストのスピーディーな書き方
WEBサイトの制作フローの中で代替テキストを入れるタイミングは、コーディングの段階がほとんどだと思います。
コーディング担当者が入れるか、WordPressなどCMSを使っていれば画像の管理画面からサイト管理担当者が一気に追加することが多いのではないでしょうか。
どちらにしても、大きな規模のWEBサイトほど、代替テキストの数が多くなりますのでスピーディーに仕上げることが肝心です。いくつかルールを決めておくと簡単に仕上がりスピードが早くなりますので、ここで5つの定例パターンを挙げておきます。ご参考になれば幸いです。
①文字が載っている画像はその文字列をそのまま代替テキストとして入力する
参考：https://www.city.kumamoto.jp/
②アイキャッチ画像などページ理解に不必要な画像は空欄にする
参考：https://japan.googleblog.com/2021/03/a-heartfelt-thank-you-and-commitment-to-the-future.html
③FacebookやTwitterなどSNSのシェア用ボタンは”〜にシェアする”
参考：https://japan.googleblog.com/2021/03/a-heartfelt-thank-you-and-commitment-to-the-future.html
④ボタン、マーク、アイコン画像はその画像が指す意味を説明する
参考：https://www.mhlw.go.jp/stf/seisakunitsuite/bunya/0000164708_00001.html
⑤QRコードやリンク用画像は移動先の内容を含めて「アプリダウンロード用2次元コード」などと入力する（NG：QRコード、外部リンク）
参考：https://www.bousai.metro.tokyo.lg.jp/1005744/index.html
ここまで5つのよく利用する画像について代替テキストの書き方を解説してみました。ご参考になれば幸いです。
３．代替テキストの抜け漏れチェックツール
WEBサイトに使われる画像は膨大なので、代替テキスト（alt属性）が各画像に設定されているか、また反映されているかどうかを確認できるツールをご紹介します。
ツールを利用しない場合は、ソースコードを「alt」で検索すると上から順番にチェック可能です。ただ、scriptタグの中の「alt」の文字に反応するなど、少し面倒な部分もありますので、ツール利用がオススメです。
さて、さまざまなチェック方法がある中で、いちばんのオススメツールは、Google Chrome拡張機能の「見え〜るALT」です。
https://chrome.google.com/webstore/detail/%E8%A6%8B%E3%81%88%E3%80%9C%E3%82%8Balt/gkpbonkmpkgkjdaffjecchbephmjmekj/related?hl=ja
見え〜るALTをインストールすると、Chromeブラウザの右上に「黄色い虫眼鏡アイコン」が表示されます。クリックすると、そのページの画像の上に代替テキスト（alt属性）が表示されます。
これで一目瞭然となり、ソースコードを一つひとつチェックする必要がなくなります。時短ワザとして使ってみてください。
まとめ
代替テキストはWEB制作時の流れの中に制作する段階が入っていないことも多く、抜けてしまいがちです。また、コーディング担当者に記述内容を一任している場合もあるかと思いますが、内容が適切かどうか、抜け漏れがないかどうかなど、複数人の目で確認するとより最適なものになります。
以前は代替テキストとしてキーワードを詰め込む、無関係なワードを入れてページ内でのワード出現頻度を上げるなどのテクニックのようなものが使われた時期もありますが、今はそのようなことは検索エンジンからクオリティが低いサイトだと判断される原因になり、逆効果です。画像に無関係のキーワードをaltに当てはめると、悪質と判断されスパム判定を受けることもありますのでご注意ください。コーディング担当者がそのような入力をしていないか、確認することも大切だと思います。
現状で最適とされる方法を用いて、どなたにでもわかりやすく理解しやすいWEBサイトを目指していきたいですね。