# 何の略なのかページのどこにも書かれていない略語

Source: https://easeweb.dev/learn/abbreviations
Topics: 言葉と読みやすさ > 略語の正式名称が示されている (WCAG 3.1.4)
The fix: 略語が最初に出てくる箇所のそばに、「アクティブノイズキャンセリング（ANC）」のように正式名称を書きます。または、略語を、同じページか用語集にある説明へのリンクにします。abbr要素のtitleだけでは足りません。マウスポインターを重ねたときのツールチップにしか表示されず、ほとんどのスクリーンリーダーは読み上げないからです。
Test with: screen reader, keyboard, touch
References: https://www.w3.org/WAI/WCAG22/Understanding/abbreviations.html https://www.w3.org/WAI/WCAG22/Techniques/general/G102 https://www.w3.org/WAI/WCAG22/Techniques/general/G97 https://www.w3.org/WAI/WCAG22/Techniques/general/G55 https://www.w3.org/WAI/WCAG22/Techniques/general/G62 https://www.w3.org/WAI/WCAG22/Techniques/html/H28 https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-abbr-element https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute https://www.powermapper.com/tests/screen-readers/labelling/acronym-abbr-title/ https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/abbr https://soundcore.com/blogs/open-ear/anc-vs-enc https://www.slashgear.com/1988625/anc-vs-enc-noise-cancellation-pros-cons

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

## 場面

オンラインショップで、ワイヤレスイヤホンを売っています。商品名の下には特長がチップで並び、「ANC」「ENC」「ケース込みで30時間」とあります。ページを書いた人は、こうした略語を毎日使っていて、読んでいるオーディオ系のサイトでも当たり前に使われています。

電車で周りの騒音を静かにしたい人にとっては、2つのうちどちらがその機能なのかが肝心です。ANCはアクティブノイズキャンセリングの略で、マイクが周りの騒音を拾い、それを打ち消す音をイヤホンが鳴らします。ENCは環境ノイズキャンセリングの略で、通話のための機能です。マイクに入る周りの騒音を取り除き、通話相手に自分の声を聞き取りやすくしますが、自分に聞こえる音は何も変わりません。ページには、そのどちらも書かれていません。特長にENCとだけ書かれた安いイヤホンと比べている人には、差額で何が手に入るのかが分かりません。

## 確認できる問題

達成基準3.1.4（略語）はレベルAAAです。略語の正式名称または意味を特定する手段が利用できることを求めています。解説書では、レーザー（laser）のように、一般的な辞書に単語として載り、言語の一部になった略語や、IBMのようによく知られた名前は対象外としていますが、それ以外は、よく使われる略語や見慣れた略語でも対象外にはしていません。ANCもENCも、単語でも会社名でもないため正式名称が必要ですが、ページには何もありません。文字のそばに書かれておらず、リンクも用語集もありません。

W3Cの十分な達成方法は、正式名称を置く場所を示しています。最初に出てくる箇所の直前か直後の本文（G97）、略語からその説明へのリンク（G55）、用語集（G62）です。HTMLには、文字を自動で正式名称に展開する仕組みはありません。ブラウザーはANCを書かれたとおりに表示し、スクリーンリーダーも書かれたとおりに読むため、正式名称は、ページに書いて初めて利用者に届きます。

## 利用者への影響

略語は、すでに知っている人のための近道です。イヤホンを買うのはオーディオのレビューを読む人だけではありません。それなのに、通勤に大事な機能と通話に大事な機能が、ここでは1文字しか違いません。

## 自動チェックとAIの限界

axeには3.1.4のルールがありません。EaseWebの診断は、ANCのような文字が本文にあり、どの箇所のそばにも正式名称がなく、リンクにもなっておらず、`dt` や `dfn` でも定義されていないページに、確認候補 `ew:abbreviation-manual-check` を出します。正式名称が `abbr` のtitleにしかない略語も、別に挙げます。その文字が一つの単語になっているか、会社名かは人が判断することなので、確認候補にとどめています。ページの修正をAIアシスタントに頼むと、略語を `title` 付きの `abbr` で囲むことがあります。マークアップは正しく見え、コードレビューも通りますが、正式名称はマウスポインターを重ねたときのツールチップにしか表示されず、ほとんどのスクリーンリーダーは読み上げません（「実装の判断」を参照）。

## 修正前：正式名称のない略語

```html
<h1>Drift ワイヤレスイヤホン</h1>
<ul class="features">
  <li>ANC</li>
  <li>ENC</li>
  <li>ケース込みで30時間</li>
</ul>
…
```

- ANCとENCの正式名称は、文字のそばにも、ページのほかの場所にも書かれていません。
- 説明へのリンクも、用語集もありません。
- 2つは1文字しか違わず、どちらが電車の騒音を静かにするのか、買う人には分かりません。

## 修正後：最初に出てくる箇所のそばに正式名称を書く

```html
<h1>Drift ワイヤレスイヤホン</h1>
<ul class="features">
  <li>アクティブノイズキャンセリング（ANC）</li>
  <li>通話用の環境ノイズキャンセリング（ENC）</li>
  <li>ケース込みで30時間</li>
</ul>
…
```

1. W3Cの達成方法G97のとおり、各略語の正式名称を本文に書き、略語をその後ろの括弧に入れます。一覧を読めば、誰にでもANCとENCが何の略なのかが分かります。
2. 正式名称だけでは機能の中身が伝わらないときは、それを伝える言葉を添えます。「通話用の」と書けば、ENCが自分に聞こえる騒音ではなく、自分の声のための機能だと分かります。
3. 正式名称は、ページでその略語が最初に出てくる箇所に付けます。仕様欄の「ANCオン」のように、同じページで2回目以降に出てくる略語は、そのままでかまいません。

これで修正前の例は直り、3.1.4を満たします。正式名称が本文の一部になるため、どのブラウザー、スクリーンリーダー、翻訳ツールにも、どの端末にも届きます。その代わり、文が長くなります。3文字のチップが語句になり、チップの並びの行数が増えます。

## 修正後：略語をその説明へのリンクにする

```html
<h1>Drift ワイヤレスイヤホン</h1>
<ul class="features">
  <li>
    <a href="#spec-anc">ANC</a>
  </li>
  <li>
    <a href="#spec-enc">ENC</a>
  </li>
  <li>ケース込みで30時間</li>
</ul>
…
<h2>機能の説明</h2>
<dl>
  <dt id="spec-anc">ANC</dt>
  <dd>アクティブノイズキャンセリング。マイクが周りの騒音を拾い、それを打ち消す音をイヤホンが鳴らすため、電車の中が静かに聞こえます。</dd>
  <dt id="spec-enc">ENC</dt>
  <dd>環境ノイズキャンセリング。通話中に、マイクが自分の声から周りの騒音を取り除くため、通話相手に声がはっきり届きます。自分に聞こえる音は静かになりません。</dd>
</dl>
```

1. 用語集と同じように、ページに「機能の説明」の欄を設け、各略語を `dl` の用語に、その説明を後ろの `dd` に入れます（W3Cの達成方法G62）。
2. 説明は正式名称から始め、続けて、その機能が買う人に何をしてくれるのかを書きます。
3. 各用語に `id` を付け、特長の一覧の略語を、そこへのリンクにします（G55）。ショップのほかのリンクと同じように下線を付け、どこかへ移動できることが見て分かるようにします。クリック、タップ、Enterキーのどれでリンクをたどっても、説明が画面に表示されます。

これで修正前の例は直り、3.1.4を満たします。チップは短い見た目のままで、説明には正式名称より多くのことを書けます。その代わり、ひと手間かかります。略語がリンクだと気付き、たどって、元の場所に戻る必要があり、説明は読んでいた場所から離れたところにあります。

## どの方法を選ぶか

どちらも基準を満たします。アクティブノイズキャンセリングのように、正式名称で意味が十分に伝わるなら、略語のそばに書いてください。数語増えるだけで、読む人は何もしなくて済みます。ENCのように正式名称だけでは意味が伝わらない場合や、デザイン上、並びの中に長い名前を入れる余裕がない場合は、説明へリンクし、リンクだと分かる見た目にします。長い仕様表なら両方を使えます。最初に出てくる箇所で正式名称を書き、2回目以降は説明へリンクします。

## 実装の判断

`<abbr title="Active noise cancellation">ANC</abbr>` のような、`title` 付きの `abbr` 要素だけでは足りません。ブラウザーはこれに点線の下線を引き、マウスポインターを文字に重ねてしばらくするとtitleをツールチップで表示します。この要素はフォーカスを受け取れないため、キーボードではツールチップを出せず、タッチ画面では一度も表示されません。HTML標準も、こうした理由から、`title` 属性に頼ることは現時点では推奨しないとしています。PowerMapperのスクリーンリーダーのテスト（2025年12月更新）では、macOSとiOSのVoiceOverはtitleを読まず、NVDAは文章を読み進めるときには読まず、初期設定のJAWSが読んだのはChromeの場合だけでした。W3Cは、`abbr` を使う達成方法H28を、十分な達成方法ではなく参考の扱いにしています。`abbr` のtitleを使うなら、本文の正式名称に加えて使います。ラベルやヒントをtitleに入れた場合も同じ問題が起きます。「[ラベルやヒントがツールチップにしかない入力欄](/ja/learn/title-tooltips)」を参照してください。

この問題のもう一つの形が、titleのない `abbr` です。画面の見た目にも、読み上げにも、何も加わりません。HTML標準は、スモールキャピタルなどのスタイルを当てる目印としての使い方を認めていますが、正式名称を示すものではありません。

同じページの中で、同じ文字が場所によって別のものを指す場合、最初の箇所で一度正式名称を書いても、ほかの箇所では誤りになります。その場合のW3Cの十分な達成方法は、使われている箇所ごとに、それぞれの説明へリンクすることです（G55）。

日本語のページでは、正式名称を日本語で書き、括弧は全角にします。アクティブノイズキャンセリング（ANC）のように書きます。英字の略語は日本のショップでもよく使われ、「ANC搭載」のように語に続けて書かれることもよくあります。英語の正式名称を書いても、日本語で読む人には略語と同じくらいしか伝わりません。

単位も略語です。電池容量のmAhや、W3Cの達成方法H28の例にある重さのlbも、最初に出てくる仕様表の行見出しに「電池容量（ミリアンペア時、mAh）」のように書けます。

## 修正の確認

1. その分野に詳しくない人のつもりで各ページを読み、本文、見出し、チップ、ボタン、表にある略語をすべて書き出す。レーザー（laser）のように単語になったものと、会社名は除く。
2. それぞれ、ページで最初に出てくる箇所のそばに正式名称が書かれているか、正式名称を示す説明へリンクしていることを確認する。
3. スマートフォンで、続けてキーボードだけで、各略語の正式名称にたどり着く。正式名称は画面に出ているか、リンク1つ先にあり、ツールチップの中だけにはない。
4. スクリーンリーダーで特長の一覧を読み、説明へのリンクをそれぞれたどって、正式名称が読まれることを確認する。

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。文面を変えた際は、再度確認します。

## 制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。例は1つの商品ページにある2つの略語です。3.1.4はレベルAAAで、多くの方針が求めるAAを超える基準ですが、正式名称を書くのは数語の手間で、買う人には何にお金を払うのかが伝わります。この基準が求めるのは正式名称や意味を示すことで、読む人がそれを理解できることまでは求めていません。環境ノイズキャンセリングのように、正式名称そのものが読む人の知らない用語かもしれない場合は、「[意味の説明がない専門用語や見慣れない言葉](/ja/learn/jargon)」を参照してください。音声エンジンやスクリーンリーダーはリリースごとに変わるため、ここでは特定の読み上げ結果を報告していません。

---

このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）
