Mastodon で画像を投稿するときに Alt テキストを設定すると便利

2023-10-22 雑記

Mastodon で画像を投稿するとき、Alt テキストを設定するとアクセシビリティが向上するだけじゃなくて使い勝手も上がって便利だよ！ていう記事です。

Alt テキストとは？

Alt テキストとは、平たく言えば「その画像が表示できないとき、代わりに表示するための文章」のことです。HTML では alt 属性と呼ばれる項目で設定できることから、Alt テキスト（Alternative Text、代替文章）とも呼ばれます。

Alt テキストは元々「ネットワークの不調」や「ソフトウェアの不具合」などで画像が表示できなかったときに「本来、そこにどんな画像が表示されるのか」を表示するための機能でした。

しかし、画像を見ることができなくても内容が把握できることから現在ではアクセシビリティの機能のひとつとしても扱われています。

まず「目が見えない人でも、何の画像なのか分かること」は分かりやすく大きなメリットです。

現代の SNS は誰しもが情報収集や情報発信のために使っています。当然、その利用者には目が不自由な人も含まれます。

もちろん文章だけで画像の特徴を完全に説明することは難しいですが、できる限りの語彙を使って説明することで画像を見ることが困難な人の手助けをすることができます。

次に「検索に引っかかりやすくなること」です。Elasticsearch を導入している Mastodon で使える検索機能は、Alt テキストも含めて検索することができます。

そもそも、Mastodon（や Twitter、Misskey などの短文ブログ・マイクロブログ）はブログと違って短文で気軽に投稿・閲覧できることからブログより普及してきました。そんなサービスで、説明のために文章が長くなるのはあまり望ましいこととは言えません。

そういったサービスでも、画像の説明として情報を付与することで後で検索をするときに過去の投稿を探しやすくなります。また、Mastodon v4.2 以降を使っていて検索を許可していれば他の人が投稿を見つける手助けをすることもできます。

3つ目は「補足情報を書けること」です。誤解されないようにはっきり書くと、ここでいう補足情報とは「その画像が加わることで文章に補足される情報」のことです。

例えば、ラーメンの写真を乗せたときに「太肉と呼ばれる豚バラ肉の角煮・キャベツ・茎わかめなどが乗せてあるラーメンの写真」と書けば「この写真には太肉が乗っているんだ」「太肉っていうのは豚バラ肉の角煮のとこなんだ」ということが伝わります。

もちろん、文中に「太肉と呼ばれる豚バラ肉の角煮」と書くこともできますが、ただ「ラーメンを食べたよ」っていうだけの投稿が長くなってしまうのはあまり好ましいことではありません。そういうときに、そういう補足情報を Alt テキストで加えることで情報量を増やすことができます。

まず、長すぎず短かすぎない必要な情報を簡潔に書くことが重要です。

例えば、お昼ごはんの写真を投稿したときに「お昼ごはん」とだけ書くのは情報が少なすぎて不適切です。逆に「朝一番に収穫した○○県産の野菜を大量に使ったサンドウィッチ」などと書くのはその画像の情報としては多すぎて不適切です。

そのため「野菜が挟まっているサンドウィッチの写真」などのように「普通にその画像を見ることができる人が得られる情報と同等の情報」を意識することが大切です。

Alt テキストはその画像が何なのかを示すための情報なので、客観的な情報を書くことが重要です。

例えば、アニメやゲームのイラストを投稿したときに「○○くんかわいい〜〜〜〜〜〜〜〜〜！！！！！！！！！！」みたいな Alt テキストを設定するのは主観的な要素が強すぎて不適切です。

自分がどういう経緯でその画像を貼ったのかなどは投稿の文中で示すのが適切で、Alt テキストは隠し要素や長文の投稿に使うべきではありません。

Alt テキストの情報をよりよくするために、「何を伝えたくて」その画像を貼ったのか意識することも大切です。

例えば安売りをしていたお惣菜を買ってきてそれを投稿したいときに、そのお惣菜の説明をすると投稿のピントがズレてしまい伝えたいことが伝えにくくなってしまいます。

そういった場合「玉ねぎと豚肉の煮物の写真。色が濃く付いていることから長く煮込まれていたと推測できる。」という Alt テキストより「玉ねぎと豚肉の煮物の写真。賞味期限が短いことから割引シールが貼ってある。」のように割引されていることに焦点をあてたほうがより適切です。

Alt テキストを設定するとアクセシビリティの向上に繋がるだけでなく、自分自身でも便利なのでぜひ設定しましょう。