<abbr> 要素に title 属性は付けるべきかどうか
略語や頭字語を表す <abbr> 要素は title 属性でその完全表記を提供することができるのですが、これの設定は HTML 仕様的には任意です。一方、ベストプラクティスの観点から「基本的に付けるべき」や「title 属性のない <abbr> 要素は意味がない」といった意見が散見されます。これは本当なのでしょうか。HTML4 の時代は確かにそうだったのですが、現代ではむしろ逆ではないかとすら思う次第です。HTML 仕様とアクセシビリティの両面からその変遷を振り返ってみます。
HTML4（1998年）
<abbr> 要素は HTML4 で登場したものですが、当時はスペルチェックや読み上げ、翻訳などの機械可読性が期待されていました。
Marking up these constructs provides useful information to user agents and tools such as spell checkers, speech synthesizers, translation systems and search-engine indexers.
また BBC（ビー・ビー・シー）のようにアルファベットの綴りそのままに読まれるものと、NATO（ナトー）のように独自の読み方をするものの区別はスタイルシートで行うものとされていました。
Note that abbreviations and acronyms often have idiosyncratic pronunciations. For example, while "IRS" and "BBC" are typically pronounced letter by letter, "NATO" and "UNESCO" are pronounced phonetically. Still other abbreviated forms (e.g., "URI" and "SQL") are spelled out by some people and pronounced as words by other people. When necessary, authors should use style sheets to specify the pronunciation of an abbreviated form.
ここでいうスタイルシートとは、CSS2 で定義されていた聴覚スタイルシートを指していたものと思います。とすると BBC と NATO はスタイルシート側で区別する必要がありますから、どちらか片方の性質の略語しか登場しないことが確約されている文書でない限り、事実上 <abbr> 要素には class 属性が必須だったと言えます[1]。
さらに承知のように HTML4 では省略形を表す <abbr> 要素と、頭字語を表す <acronym> 要素の2つが存在していたので、その使い分けにも頭を悩ます必要があったのです。HTML 仕様に忠実に略語をマークアップしようとすると、かなり難しい状況でしたね。というか私自身もそうでしたが、略語は常に <abbr> 要素を使い、<acronym> 要素の存在は無視していた方も多かったのではないでしょうか。
初期の HTML5 Working Draft（2008年1月22日版）
HTML5 では <acronym> 要素が廃止されて <abbr> 要素に一本化されたのですが、初期案では title 属性がほぼ必須とされていた時期がありました。
The title attribute should be used to provide an expansion of the abbreviation.
ただし <dfn> 要素の中で使う場合に限っては省略可能とされていたのが興味深いところです。
The title attribute may be omitted if there is a dfn element in the document whose defining term is the abbreviation (the textContent of the abbr element).
しかしこれはすぐに撤回されることとなります。
HTML5（2008年6月10日版以降）
最初の HTML5 草案が2008年1月に公開された後、フィードバックを受けて次の更新では title 属性がふたたび任意に戻ります。当時の W3C メーリングリストに経緯が残されているのですが、エディターの一人であった Ian Hickson の発言によればその主な理由はスタイル付けの使用法が存在したことであったようです。
> All you're achieving here is annoying authors who use titleless <abbr>,
> maybe as a styling hook to achieve small-caps (e.g.
> http://www.autisticcuckoo.net/archive.php?id=2007/06/13/samurai-attack
> uses "<abbr>WCAG</abbr>").
That's a good point. Ok, I've allowed title="" to be omitted again.
lists.w3.org)
- 引用文中の URL はすでに閲覧できなくなっているうえにフィッシング警告が出る始末なのですが、Internet Archive に当時のアーカイブ(
web.archive.org)が残されているのでそちらで閲覧可能です。
これによって HTML5 Working Draft の2008年6月10日版では title 属性による略語の展開は任意となり、属性なしのコード例が掲載されるようになりました。
This paragraph marks up an abbreviation without giving an expansion, possibly as a hook to apply styles for abbreviations (e.g. smallcaps).
<p>Philip` and Dashiva both denied that they were going to
get the issue counts from past revisions of the specification to
backfill the <abbr>WHATWG</abbr> issue graph.</p>
また前記メーリングリストでの Ian Hickson の発言には他にも注目すべき点があります。同一文書内に United States of America の略としての USA と、United Space Alliance(en.wikipedia.org) の略としての USA との両方が存在し、文書内の最初の1回のみに title 属性で展開した用語を提示、その後の出現箇所には title 属性を付けなかった場合、果たしてその USA はどちらの略語なのか。それをユーザーエージェントが自動的に判断する可能性について I didn't expect any autoexpading at all
（自動展開はまったく期待していない）とし、さらにそのような動作・期待は迷惑であるとまで断言しています。HTML5 仕様の2009年2月12日版では以下の Note が追加されているのですが、このやりとりを意識して追加されたものなのでしょう。
Providing an expansion in a title attribute once will not necessarily cause other abbr elements in the same document with the same contents but without a title attribute to behave as if they had the same expansion. Every abbr element is independent.
これらは WHATWG の HTML Living Standard における2026年4月現在の最新版でも記述は変わっていません。
WCAG 2.2
達成基準 3.1.4（レベル AAA）にて略語に関する言及があります。Understanding SC 3.1.4では、以前は「Sufficient Techniques」の1つに H28: Providing definitions for abbreviations by using the abbr element があったのですが、2025年3月に「Advisory Techniques」へ格下げ
されてしまいました。
これは達成基準 2.1.1 Keyboard に失敗する可能性が高いための措置であり、H28 の冒頭では
G102
との文章が追加されています。以前から HTML 仕様書内の記述 と組み合わせて使用した場合に十分なテクニックを実現する
で広く知られているように、title 属性というものはキーボードやタッチ操作と相性が悪く、ツールチップを表示する目的でのみ使用することは推奨されていません。それが昨年になって WCAG の関連文書でも明示されたというわけです。達成基準 3.1.4 はレベル AAA ですから、WCAG 準拠という意味に限っていえば多くのサイトでは影響のないことではあるものの、Web 制作者としては title 属性を使用する際には以前にも増してアクセシビリティ面に注意を払う必要があるでしょう。
ARIA in HTML
<abbr> 要素の暗黙の ARIA セマンティクスは「No corresponding role」とされています。Using abbr Element with title Attribute(adrianroselli.com)の記事によると、実際のところはブラウザによって generic や abbr などの扱いとなり、多くの環境では title 属性値が要素の名前として公開されるようです。
ただしキーボードやタッチ操作でツールチップを表示したり、スクリーンリーダーで名前を読み上げることのできる環境はほとんど存在しません。前記の記事では唯一 Android 14 + Chrome 120 + TalkBack 14.1 の環境でのみ読み上げが行われるとあります[2]。
まとめ
HTML4 時代は略語には title 属性付きの <abbr> ないし <acronym> 要素を使うことで、機械可読性を高めることが期待されていました。
当時からキーボード操作ではツールチップにアクセスできないデメリットは知られていたものの、将来的に環境が改善されるはずと信じてそのようにマークアップが行われていました。さすがに企業サイトでは実例をほとんど見かけなかったものの、個人サイトを中心に比較的高頻度で目にしたものです。むしろ新しいおもちゃを与えられた子供のごとく、必然性もないのに（読者にとって自明であるにも関わらず）無駄に <abbr> 要素を使いまくるページもあったほどです。現代の感覚からすれば冷ややかな目で見られそうですが、当時はそういう空気感というかセマンティック Web に対する高揚感のある時代だったので、古い Web ページでそういう例を見かけても冷笑しないであげてください。私も多少はそういうことしていたかも(笑)。
しかし HTML5 では方向性が変わり、仕様で Abbreviations do not have to be marked up using this element
と言われてしまうなど、多くの場合は <abbr> 要素を使う必要性はなく、普通に括弧書きなどで表現すればよいとされています。
<!-- HTML4 時代によく行われた書き方 -->
<p><abbr title="North Atlantic Treaty Organization">NATO</abbr></p>
<!-- 現代の標準的な書き方 -->
<p>NATO (North Atlantic Treaty Organization)</p>
<!-- 現代の標準的な書き方（略語にスタイルを当てる場合） -->
<p><abbr>NATO</abbr> (North Atlantic Treaty Organization)</p>
<!-- 現代の標準的な書き方（展開にスタイルを当てる場合） -->
<p>NATO <span class="abbr-expansion">(North Atlantic Treaty Organization)</span></p>一方、Emmet(www.emmet.io) では abbr と打つと自動的に <abbr title=""></abbr> と展開されるなど、世間では未だ title 属性ありきの風潮が根強く残っています。
もちろん <abbr> 要素に title 属性を付けることは最新の HTML Living Standard でも有効ではあるものの、アクセシビリティの問題を解決して使用することは不可能です。ひとつの手法として以下のように CSS で属性値を表示させることは可能ではあるものの、「文字列が選択できない」「CSS 無効環境では表示されない」といった問題が依然残るからです。
abbr[title] {
text-decoration-line: none; /* reset style */
&::after {
content: '(' attr(title) ')';
}
}そのような現状から Don’t Use <abbr>(tarnoff.info) といった意見まで出てくる始末ですが、前述のとおり title 属性なしの <abbr> 要素をスタイル付けなどの理由で使うことは HTML5 以降可能になったので、要素そのものを忌諱する必要はありません。避けるべきは title 属性なのであって、<abbr> 要素ではないはずです。
いずれにせよ「略語は <abbr> 要素でマークアップしなければならない」などということはまったくないので、判断に迷うのであれば <span> 要素でもなんら問題はありません。もし <abbr> 要素を使うのなら現状をよく理解したうえで慎重に使うべきだと思います。