altとは?意味とWebやXでの使われ方を整理してみた

こんにちは。「alt」って調べると、意外といろんな説明が出てきて戸惑いませんか?

『ゴイノワ』のナギです。実はわたしも最初、altという言葉を見たとき、どの分野の話をしているのか分からず、一度手が止まりました。

Web制作の話なのか、Xの投稿画面の話なのか、それだけで説明の中身がまるで変わってきます。今日はそのあたりを、順番にほどいて整理していきますね。

目次

altの基本の意味

altは英語のAlternate(オルタネート)を略した言葉です。読み方は「アルト」ではなく「オルト」が正解なので、ここは一度覚えておくと後で迷いません。

HTMLの世界では、画像を表示できないときに代わりに読み込まれるテキストのことを指します。これをalt属性と呼びます。

画像が壊れて表示されなかったり、音声で読み上げるスクリーンリーダーを使っていたりする場面で、この代替テキストが内容を伝える役目を持っています。「代わりに何を伝えるか」を決める部分なので、地味に大事な設定なんですよね。

Web制作でのalt属性の使われ方

ブログやサイトのimgタグに書くalt属性は、画像の内容を短い文章で説明するためのものです。写真そのものを言葉に置き換える作業だと考えると分かりやすいと思います。

ここはわたしが記事を書くときにも毎回一度立ち止まる部分です。画像そのままを説明すればいいのか、記事の文脈に合わせて書くべきなのか、地味に迷うポイントなんですよね。

SEOに直接効くとまでは断定できませんが、アクセシビリティの観点で設定しておく意味は大きいと言われています。見えない人にも伝わる文章を書く、という気持ちで向き合うのが自然だと思います。

title属性との違い

alt属性とよく混同される言葉に「title属性」があります。似ているようで役割が違うので、先に分けて理解しておきたいところです。

title属性はマウスを乗せたときに出るツールチップの説明文で、画像以外の要素にも使える点がaltとは異なります。

alt属性は画像専用で、画像が表示できない状況を補うためのもの。どちらを設定すべきかは目的で分けると考えると、判断がしやすくなります。

X(旧ツイッター)でのALTとは

SNSの文脈で「alt」を調べる人も多いと思います。Xでは、投稿する画像に代替テキストを付ける機能として使われています。

画像の左下に「ALT」というバッジが表示され、これをタップすると投稿者が書いた説明文が読めるしくみです。知らずに見過ごしている人も、案外多いんじゃないかなと思います。

ナギ

その使い方、ちょっと待って!

「詳細はALTにて」という書き方を見かけたことがある人もいるかもしれません。ただこれは、本来の使い方から少し外れた運用だと指摘されています。

本来の目的を忘れないこと

ALT機能はもともと、視覚障害のある人や画像が読み込めない環境の人に向けたものです。ここが一番の土台になる部分です。

ここを勢いで「隠しメッセージ欄」みたいに使ってしまうのは、わたしはちょっと避けたいなと思う場面です。用途を知った上で使うのと、知らずに使うのとでは、後から見え方がまるで変わってくるので。

分野で意味が変わるaltの言葉たち

実はaltという言葉は、Web以外の分野でも別の意味を持つことがあります。ここでまとめて確認しておきましょう。

音楽用語のalt

合唱などで使われる声域「アルト」を指す場合がある

音楽の場面では「alt」はアルトの声域を意味し、Webのalt属性とは全く別の言葉として存在しています。同じつづりでも指すものが全然違うので、少し面白いですよね。

健康診断でよく見る「AST・ALT」は、肝機能の状態を示す数値の略語です。こちらも医療分野の言葉で、Webやキーボードのaltとは意味がつながっていません。

同じ「alt」という文字でも、Web、SNS、音楽、健康診断とジャンルによって指すものが変わります。文脈を先に確認するくせをつけておくと、意味を取り違えにくくなります。

altの使いどころを見極めよう

altは一つの単語ですが、Web制作、SNS、音楽、健康診断とジャンルによって意味も使い方も変わる言葉だと分かりました。

ブログやサイトを触る人ならalt属性、Xを使う人ならALT機能。まずはどちらの場面で出てきた言葉かを確認するところから始めると、迷いにくいと思います。

次に画像を1枚投稿するとき、alt欄に何を書くか一度手を止めて考えてみてください。それだけで、この言葉の意味がぐっと身近になるはずです。

情報は更新時点のものです。最新情報は公式サイトもあわせてご確認ください。

この記事を書いた人

「ゴイノワ」ナギ

『くらしごと』では、暮らしの中で気になることや、動く前にちょっと確認しておきたいことをわかりやすくまとめています。

注目記事

よかったらシェアしてね!
  • URLをコピーしました!
目次