HTML abbrタグ：略語の説明とtitle属性の使い方

HTML <abbr> は略語や頭字語を識別します。そのオプションのtitle属性で正式名称を提供できますが、重要な説明はマウスを使わなくても読者が理解できるよう、表示テキストにも含める必要があります。

略語をマークし、正式名称を説明する

技術用語が最初に登場する場合、略語と並べて正式名称を書くことで読者が理解しやすくなります。abbr要素はテキストを略語として識別しますが、正式名称を自動で検索したり翻訳したりすることはありません。読者がすでに知っている略語すべてをこの要素で囲む必要はありません。

次の文書をabbreviation.htmlとして保存し、ブラウザで開いてください。最初の文は説明を表示したままにし、2番目の文はtitle属性を示しています。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>略語と正式名称</title>
</head>
<body>
  <p>ウェブ文書は HyperText Markup Language
    (<abbr>HTML</abbr>)で構造を記述します。</p>
  <p>別の略語: <abbr title="World Wide Web">WWW</abbr></p>
</body>
</html>

最初の文では、HTMLの横に正式名称が表示されます。ブラウザによっては、2番目の文中のWWWに点線の下線が表示されることがあり、カーソルを合わせるとツールチップにWorld Wide Webが表示される場合があります。下線やツールチップのデフォルトの表示はブラウザが決定するため、一貫した視覚的結果を保証するデザイン機能ではありません。

title属性には何を入れるべきですか？

abbrのtitle属性はオプションです。使用する場合は、その略語が表す正式名称を含めてください。宣伝文や関連のない説明は含めないでください。あるabbr要素のtitle値は、同じ記事内の他のabbr要素には自動的に適用されません。例からtitleを削除しても、表示される略語WWWはそのまま残ります。

グローバルな title 属性と文書の title 要素を混同しないでください。abbr の title 属性はその略語に関する補足情報を提供します。一方、文書の head 内の title 要素はページのタイトルを提供します。

ツールチップだけに頼らないでください

タッチスクリーンではマウスオーバーができず、title 情報へのアクセスはキーボード操作や支援技術によっても異なります。略語を理解するのに説明が必要な場合、例の最初の文のようにテキスト内で表示してください。ツールチップを表示するためだけに abbr を不要なタブストップやボタンにするのではなく、コンテンツ自体を読みやすくしてください。

説明が長い場合は、最初に登場する箇所の近くで説明するか、用語の定義にリンクします。同じ段落ですでに正式名称を説明している場合は、title属性で繰り返す必要があるか、読みやすさを考慮してください。使用条件とアクセシビリティについては、MDNのabbr要素リファレンスを参照できます。