トピックを検索
何の略なのかページのどこにも書かれていない略語
イヤホンの特長を「ANC」「ENC」とだけ書き、何の略かをどこにも示していないため、どちらが電車の騒音を静かにする機能なのか、買う人には分からない
<li>ENC</li> 問題
商品の略語を知らない人には、どんな機能があるのか、どれが何をする機能なのかが分からない
オンラインショップで、ワイヤレスイヤホンを売っています。商品名の下には特長がチップで並び、「ANC」「ENC」「ケース込みで30時間」とあります。ページを書いた人は、こうした略語を毎日使っていて、読んでいるオーディオ系のサイトでも当たり前に使われています。
電車で周りの騒音を静かにしたい人にとっては、2つのうちどちらがその機能なのかが肝心です。ANCはアクティブノイズキャンセリングの略で、マイクが周りの騒音を拾い、それを打ち消す音をイヤホンが鳴らします。ENCは環境ノイズキャンセリングの略で、通話のための機能です。マイクに入る周りの騒音を取り除き、通話相手に自分の声を聞き取りやすくしますが、自分に聞こえる音は何も変わりません。ページには、そのどちらも書かれていません。特長にENCとだけ書かれた安いイヤホンと比べている人には、差額で何が手に入るのかが分かりません。
達成基準3.1.4(略語)はレベルAAAです。略語の正式名称または意味を特定する手段が利用できることを求めています。解説書では、レーザー(laser)のように、一般的な辞書に単語として載り、言語の一部になった略語や、IBMのようによく知られた名前は対象外としていますが、それ以外は、よく使われる略語や見慣れた略語でも対象外にはしていません。ANCもENCも、単語でも会社名でもないため正式名称が必要ですが、ページには何もありません。文字のそばに書かれておらず、リンクも用語集もありません。
W3Cの十分な達成方法は、正式名称を置く場所を示しています。最初に出てくる箇所の直前か直後の本文(G97)、略語からその説明へのリンク(G55)、用語集(G62)です。HTMLには、文字を自動で正式名称に展開する仕組みはありません。ブラウザーはANCを書かれたとおりに表示し、スクリーンリーダーも書かれたとおりに読むため、正式名称は、ページに書いて初めて利用者に届きます。
略語は、すでに知っている人のための近道です。イヤホンを買うのはオーディオのレビューを読む人だけではありません。それなのに、通勤に大事な機能と通話に大事な機能が、ここでは1文字しか違いません。
10グループ中2グループに影響
- 全盲 (影響あり)
- 弱視 (影響なし)
- 色覚 (影響なし)
- ろう (影響なし)
- 難聴 (影響なし)
- 発話 (影響なし)
- 手の操作 (影響なし)
- 筋力・可動域 (影響なし)
- 認知 (影響あり)
- 光過敏 (影響なし)
- 言語・認知・学習の能力が限られる 読字障害のある人、記憶に困難のある人、母語ではない言語で読んでいる人には、3文字のアルファベットだけでは意味をつかむ手がかりがありません。ANCとENCは1文字しか違わないため、どちらかをうろ覚えの人は、もう一方と取り違えやすくなります。
- 視覚を使わない スクリーンリーダーは書かれた文字をそのまま読むだけで、音声によって、1文字ずつ読むか、造語のようにつなげて読むかが違う程度です。聞いている人はページを見渡して説明を探せないため、どこかに説明があることを期待して、1行ずつ読み進めるしかありません。
axeには3.1.4のルールがありません。EaseWebの診断は、ANCのような文字が本文にあり、どの箇所のそばにも正式名称がなく、リンクにもなっておらず、dt や dfn でも定義されていないページに、確認候補 ew:abbreviation-manual-check を出します。正式名称が abbr のtitleにしかない略語も、別に挙げます。その文字が一つの単語になっているか、会社名かは人が判断することなので、確認候補にとどめています。ページの修正をAIアシスタントに頼むと、略語を title 付きの abbr で囲むことがあります。マークアップは正しく見え、コードレビューも通りますが、正式名称はマウスポインターを重ねたときのツールチップにしか表示されず、ほとんどのスクリーンリーダーは読み上げません(「実装の判断」を参照)。
試してみる
商品ページで、ANCとENCが何の略なのか調べてみましょう
文字にマウスを重ねたり、Tabキーで移動したり、スマートフォンでタップしたりしてみてください。どちらが電車の騒音を静かにするのか、どこにも書かれていません。続けて、それぞれの修正を適用してください。
問題あり 修正できますか?
Drift ワイヤレスイヤホン
79.00
- ANC
- ENC
- ケース込みで30時間
修正方法
略語が何の略なのかを、使う場所で示す
<h1>Drift ワイヤレスイヤホン</h1><ul class="features"> <li>ANC</li> <li>ENC</li> <li>ケース込みで30時間</li></ul>…問題点3点
- ANCとENCの正式名称は、文字のそばにも、ページのほかの場所にも書かれていません。
- 説明へのリンクも、用語集もありません。
- 2つは1文字しか違わず、どちらが電車の騒音を静かにするのか、買う人には分かりません。
最初に出てくる箇所のそばに正式名称を書く
<h1>Drift ワイヤレスイヤホン</h1><ul class="features"> <li>アクティブノイズキャンセリング(ANC)</li> <li>通話用の環境ノイズキャンセリング(ENC)</li> <li>ケース込みで30時間</li></ul>…修正の手順3ステップ
- W3Cの達成方法G97のとおり、各略語の正式名称を本文に書き、略語をその後ろの括弧に入れます。一覧を読めば、誰にでもANCとENCが何の略なのかが分かります。
- 正式名称だけでは機能の中身が伝わらないときは、それを伝える言葉を添えます。「通話用の」と書けば、ENCが自分に聞こえる騒音ではなく、自分の声のための機能だと分かります。
- 正式名称は、ページでその略語が最初に出てくる箇所に付けます。仕様欄の「ANCオン」のように、同じページで2回目以降に出てくる略語は、そのままでかまいません。
これで修正前の例は直り、3.1.4を満たします。正式名称が本文の一部になるため、どのブラウザー、スクリーンリーダー、翻訳ツールにも、どの端末にも届きます。その代わり、文が長くなります。3文字のチップが語句になり、チップの並びの行数が増えます。
この方法を選ぶ理由:言葉の意味は、その言葉のそばで説明する
どちらも基準を満たします。アクティブノイズキャンセリングのように、正式名称で意味が十分に伝わるなら、略語のそばに書いてください。数語増えるだけで、読む人は何もしなくて済みます。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に入れた場合も同じ問題が起きます。「ラベルやヒントがツールチップにしかない入力欄」を参照してください。
この問題のもう一つの形が、titleのない abbr です。画面の見た目にも、読み上げにも、何も加わりません。HTML標準は、スモールキャピタルなどのスタイルを当てる目印としての使い方を認めていますが、正式名称を示すものではありません。
同じページの中で、同じ文字が場所によって別のものを指す場合、最初の箇所で一度正式名称を書いても、ほかの箇所では誤りになります。その場合のW3Cの十分な達成方法は、使われている箇所ごとに、それぞれの説明へリンクすることです(G55)。
日本語のページでは、正式名称を日本語で書き、括弧は全角にします。アクティブノイズキャンセリング(ANC)のように書きます。英字の略語は日本のショップでもよく使われ、「ANC搭載」のように語に続けて書かれることもよくあります。英語の正式名称を書いても、日本語で読む人には略語と同じくらいしか伝わりません。
単位も略語です。電池容量のmAhや、W3Cの達成方法H28の例にある重さのlbも、最初に出てくる仕様表の行見出しに「電池容量(ミリアンペア時、mAh)」のように書けます。
修正の確認
4項目、マウス不要
確認方法: スクリーンリーダー、キーボード、タッチ
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。文面を変えた際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。例は1つの商品ページにある2つの略語です。3.1.4はレベルAAAで、多くの方針が求めるAAを超える基準ですが、正式名称を書くのは数語の手間で、買う人には何にお金を払うのかが伝わります。この基準が求めるのは正式名称や意味を示すことで、読む人がそれを理解できることまでは求めていません。環境ノイズキャンセリングのように、正式名称そのものが読む人の知らない用語かもしれない場合は、「意味の説明がない専門用語や見慣れない言葉」を参照してください。音声エンジンやスクリーンリーダーはリリースごとに変わるため、ここでは特定の読み上げ結果を報告していません。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
参考資料
- WCAG Understanding: abbreviations(新しいタブで開きます)
- WCAG Technique G102(新しいタブで開きます)
- WCAG Technique G97(新しいタブで開きます)
- WCAG Technique G55(新しいタブで開きます)
- WCAG Technique G62(新しいタブで開きます)
- WCAG Technique H28(新しいタブで開きます)
- html.spec.whatwg.org: text-level-semantics(新しいタブで開きます)
- html.spec.whatwg.org: dom(新しいタブで開きます)
- powermapper.com: acronym-abbr-title(新しいタブで開きます)
- developer.mozilla.org: abbr(新しいタブで開きます)
- soundcore.com: anc-vs-enc(新しいタブで開きます)
- slashgear.com: anc-vs-enc-noise-cancellation-pros-cons(新しいタブで開きます)
EaseWebのサービス
修正した問題を、次のリリースで再発させない
このガイドのような修正方法を、コーディングエージェントが従うルールと、CIのチェックに組み込みます。あわせて定期的に、キーボードとスクリーンリーダーで手動の再テストを行います。