# 意味の説明がない専門用語や見慣れない言葉

Source: https://easeweb.dev/learn/jargon
Topics: 言葉と読みやすさ > 専門用語や見慣れない言葉が説明されている (WCAG 3.1.3)
The fix: 言葉を使っている文の中で意味を説明するか、そのすぐ下に「免責額とは？」と読む人の疑問をそのまま書いた開閉できる説明を置くか、言葉から用語集の項目へリンクします。3つとも基準を満たしますが、尋ねなくても誰の目にも入るのは、文の中の説明だけです。
Test with: keyboard, touch, screen reader
References: https://www.w3.org/WAI/WCAG22/Understanding/unusual-words.html https://www.w3.org/WAI/WCAG22/Techniques/general/G101 https://www.w3.org/WAI/WCAG22/Techniques/general/G112 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/H40 https://www.w3.org/TR/coga-usable/#use-clear-words-pattern https://www.w3.org/TR/coga-usable/#use-literal-language-pattern https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute

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

## 場面

レンタカー会社のサイトで、予約の途中にオプションを選ぶ画面があります。「補償」という見出しの下に「免責額：1事故につき1,000.00」とあり、「免責補償（1日12.00）」のチェックボックスが並んでいます。保険に詳しい人には、これで話は通じます。車に損害が出たら、借りた人が1事故ごとに1,000.00までを負担し、残りは保険が払う。免責補償を付ければ、その負担がなくなる、という意味です。

初めてレンタカーを借りる人には、そう読めるとは限りません。「免責」は「責任を免れる」と書くため、1,000.00を払わなくてよい金額だと受け取る人もいれば、カードで預ける保証金や、保険が払ってくれる上限だと考える人もいます。どれが正しいのかは、このページにも、サイトのどこにも書かれていません。1日12.00を払うかどうかで、小さな傷一つの負担が0になるか1,000.00になるかが決まるのに、それを知らないまま選ぶことになります。

## 確認できる問題

達成基準3.1.3（一般的ではない用語）はレベルAAAです。慣用句や専門用語を含め、一般的ではない、または限定された用法で使われる語句について、その意味を特定する仕組みを求めています。WCAGは専門用語を、特定の分野の人が特定の意味で使う言葉と定義しています。免責額はまさにそれで、保険では、損害のうち利用者が負担する金額を指します。この意味は、漢字から推し量れるものではありません。解説書は、読む人が文脈から判断することや、専門家向けのページなら読み手がその分野の言葉を知っていることを前提にしてよいとしています。一方で、専門的な情報を専門家ではない人に向けて書く場合は、この基準を満たすことを勧めています。一般の人が使う予約画面は、こちらに当たります。

このページには説明がどこにもありません。文の中にも、すぐ下にも、リンクの先にも、サイトから探せる用語集にもありません。段落が伝えるのは書かれた言葉だけです。そのため、ブラウザーにもスクリーンリーダーにも、読みを助けるツールにも、伝えられる意味がありません。読む人の手元にあるのは、言葉と数字とチェックボックスだけで、保険での意味は自分で知っているしかありません。

## 利用者への影響

この言葉は、事故のときにいくら払うかを決める行に書かれています。読み違えると、一瞬迷うだけでは済まず、お金に響きます。1,000.00を返ってくる保証金だと思った人や、免責補償を付けなくても困らない追加料金だと思った人は、誤った理由で補償を断ります。申し込みや購入の手続きに出てくる業界の言葉なら、どれでも同じことが起きます。カード払いの「与信枠の確保」、保険の「保険金額」などです。

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

マークアップには何の誤りもないため、自動チェックでは見つかりません。axeをはじめ、診断に使われるルールセットには3.1.3のルールがなく、EaseWebの診断にもこの確認はありません。ある言葉が狭い意味で使われているかどうかは、分野、読む人、その一文によって決まり、コードからは判断できません。ページの確認を頼まれたAIアシスタントに見えるのは、段落とラベル付きのチェックボックスです。言葉づかいについて尋ねても、AIは免責額の意味を知っていることが多く、足りないものに気付かないことがあります。これは、書いた本人を含め、詳しい人なら誰もが陥る見落としです。読みやすさの指標でも見つかりません。「免責額：1事故につき1,000.00」は、短い一行だからです。

## 修正前：説明のない業界の用語

```html
<h2>補償</h2>
<p>
  免責額：1事故につき1,000.00
</p>
<label>
  <input type="checkbox" name="excess-cover">
  免責補償（1日12.00）
</label>
```

- 免責額は、保険では1事故ごとに借りた人が負担する損害の上限を指しますが、この意味は文字からは分かりません。
- ページにもサイトにも意味が書かれておらず、免責補償のオプションも、その意味が分からなければ選べません。

## 修正後：言葉を使う場所で説明する

```html
<h2>補償</h2>
<p>
  免責額：1事故につき1,000.00。車に損害が出たときに、お客様が負担する金額の上限です。残りは保険から支払われます。
</p>
<label>
  <input type="checkbox" name="excess-cover">
  免責補償（1日12.00）：損害の負担が0になります
</label>
```

1. 言葉のすぐ後に、同じ段落の中で、普段の言葉で意味を書きます。車に損害が出たときにお客様が負担する上限で、残りは保険が払う、という説明です。W3Cの達成方法G112（インラインの定義）に当たります。
2. チェックボックスのラベルで、免責補償を付けると何が変わるか、つまり損害の負担が0になることを伝えます。ラベルはチェックボックスの名前になるため、スクリーンリーダーも意味を一緒に読みます。

これで修正前の例は直り、3.1.3を満たします。調べるべき言葉があると気付いていない人にも、言葉と一緒に意味が届きます。本文の一部なので、どのブラウザー、スクリーンリーダー、翻訳ツールにも伝わります。必要なのは、ページに1文を足すことだけです。

## 修正後：言葉のすぐ下に開閉できる説明を置く

```html
<h2>補償</h2>
<p>
  免責額：1事故につき1,000.00
</p>
<details>
  <summary>免責額とは？</summary>
  <p>
    車に損害が出たときに、1事故ごとにお客様が負担する金額の上限です。残りは保険から支払われます。免責補償を付けると、負担はありません。
  </p>
</details>
<label>
  <input type="checkbox" name="excess-cover">
  免責補償（1日12.00）
</label>
```

1. 行のすぐ後に `details` 要素を置き、`summary` には読む人が抱く疑問をそのまま書きます。「免責額とは？」です。
2. 中に、普段の言葉で意味を書き、免責補償を付けると何が変わるかも添えます。クリック、タップ、summaryでのEnterキーやSpaceキーで開くまで、閉じたままです。

これで修正前の例は直り、3.1.3を満たします。説明は言葉のすぐそばのページ上にあり、どの操作方法でも開けます。ブラウザーはsummaryを開閉の状態を持つコントロールとして伝え、多くのスクリーンリーダーはその状態も一緒に読み上げます。開けば、中の説明も読みます。行は短いままですが、言葉を知っているつもりの人には、開く理由がありません。

## 修正後：言葉を用語集にリンクする

```html
<h2>補償</h2>
<p>
  <a href="#excess">免責額</a>：1事故につき1,000.00
</p>
<label>
  <input type="checkbox" name="excess-cover">
  免責補償（1日12.00）
</label>
<h2>用語集</h2>
<dl>
  <dt>保証金</dt>
  <dd>車を借りている間カードで預かり、返却したときにお返しするお金です。</dd>
  <dt id="excess">免責額</dt>
  <dd>車に損害が出たときに、1事故ごとにお客様が負担する金額の上限です。残りは保険から支払われます。免責補償を付けると、負担はありません。</dd>
</dl>
```

1. W3Cの達成方法G55のとおり、言葉そのものを、用語集にあるその項目へのリンクにします。リンクのテキストが言葉なので、何の説明へ移るのかが分かります。
2. 達成方法H40のとおり、用語集を説明リストで書き、言葉を `dt` に、意味をその後の `dd` に入れて、`dt` には `id` を付けます。`<dt id="excess">免責額</dt>` のようにすると、リンクから項目へ直接移れます。免責額の項目には、免責補償で何が変わるかも書きます。
3. 用語集は予約のステップの末尾に置きます。読む人は項目を読んだら、すぐ上の選択に戻れます。同じ言葉を多くのページで使うなら、用語集のページを一つ作って共通で使えます（`href="/help/words#excess"`）。その場合は同じタブで開き、戻ってきたときに予約の選択が残っているようにします。

これで修正前の例は直り、3.1.3を満たします。一つの用語集で、そのステップのすべての用語を説明できます。ただし、1つの項目を読むために行から離れることになり、開閉できる説明と同じく、説明が必要だと自覚している人にしか見つけてもらえません。

## どの方法を選ぶか

3つとも基準を満たします。文の中で説明してください。言葉が用語だと気付いていない人にも届く方法はこれだけで、1文を足すだけで済み、コードも要りません。説明が長い場合や、ページにこうした言葉が多く、すべての説明を書くと本来の手続きが埋もれてしまう場合は、開閉できる説明を使います。同じ言葉を多くのページで使う場合や、例外や例を含めて詳しく説明する必要がある場合は、用語集にリンクします。ページ上の選択がその言葉に左右されるなら、文の中にも短い説明を添えます。

## 実装の判断

手間がかかるのは、説明が要る言葉を見つけることです。そのページを使う中で最も経験の浅い利用者のつもりで読み、3種類の言葉を探します。業界の用語（免責額、与信枠）、普段の言葉をその分野で狭い意味に使っているもの、会社が作った言葉（プランや機能の名前など）です。解説書も、新しい言葉や作られた言葉を例外にしないと明記しています。

慣用句も、この問題によくある形です。「匙を投げる」「腹を割って話す」のような言い回しは、文字どおりに受け取る人には意味が伝わりません。できるだけ文字どおりの言葉に書き換え、説明の要るものを残さないようにします。キャッチコピーのように残す必要がある言い回しには、同じ3つの方法が使えます。

説明は、元の言葉より易しい言葉で書きます。「お客様が負担する金額の上限」のように書きます。「自己負担額」のような別の用語に置き換えるだけでは、説明になりません。その場面で読む人にとって何を意味するかを、ページにある金額を使って書きます。そして、同じものには、どこでも同じ言葉を使います。予約画面では免責額、確認メールでは自己負担額と書くサイトは、説明が要る言葉が2つになり、読む人は別々のものだと受け取ります。

説明を `title` 属性やホバーで開くツールチップだけに置かないでください。マウスを言葉に重ねたときにしか表示されず、タッチ画面やキーボードでは表示されません。同じ理由で失敗する例として、「[ラベルやヒントがツールチップにしかない入力欄](/ja/learn/title-tooltips)」も参照してください。言葉を `dfn` 要素で囲むと（達成方法H54）、そこが定義の場所だと示せますが、`dfn` 自体は説明ではありません。意味は、そのそばに書く必要があります。

CDW（Collision Damage Waiver）のような略語は別の問題です。「[何の略なのかページのどこにも書かれていない略語](/ja/learn/abbreviations)」を参照してください。レンタル約款全体のように、一語ではなく文章全体が難しい場合は、「[平易な要約がなく、法律の言い回しでしか読めない規約](/ja/learn/reading-level)」を参照してください。

## 修正の確認

1. その手続きを初めてする人のつもりで各ページを読む。普段とは違う意味で使われている言葉や、業界の人しか使わない言葉を、慣用句や会社が作った名前も含めて、すべて書き出す。
2. 書き出した言葉ごとに、使われている場所のすぐそばに説明があることを確認する。同じ文か次の文の中、そばの開閉できる説明、言葉そのものからのリンクのいずれかである。
3. それぞれの説明を読む。別の用語ではなく普段の言葉で書かれ、読む人にとって何を意味するかが分かる。
4. キーボードだけで、次にスマートフォンで、さらにスクリーンリーダーで、それぞれの言葉からその説明にたどり着き、読む。

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

## 制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。例は予約画面の1つの言葉です。3.1.3はレベルAAAで、多くの方針が求めるAAを超える基準ですが、説明は1文で済み、予約や購入の画面では、何にお金を払うのかを利用者が分かるかどうかを左右します。どの言葉に説明が要るかは読む人によって変わり、専門家向けのページなら、一般の人向けのページより少なくて済みます。説明を付けても、難しい文章が易しくなるわけではありません。説明が助けるのは一つひとつの言葉で、説明だらけになるページは、用語集より書き直しが必要です。

---

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