トピックを検索
意味の説明がない専門用語や見慣れない言葉
レンタカーの予約画面が、保険の用語である「免責額」に何の説明も付けずに補償を勧めているため、何の金額なのか分からないまま選ぶことになってしまう
<p>免責額:1事故につき…</p> 問題
保険の用語としての免責額を知らない人には、1,000.00が何の金額か分からない
レンタカー会社のサイトで、予約の途中にオプションを選ぶ画面があります。「補償」という見出しの下に「免責額: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を返ってくる保証金だと思った人や、免責補償を付けなくても困らない追加料金だと思った人は、誤った理由で補償を断ります。申し込みや購入の手続きに出てくる業界の言葉なら、どれでも同じことが起きます。カード払いの「与信枠の確保」、保険の「保険金額」などです。
10グループ中2グループに影響
- 全盲 (影響なし)
- 弱視 (影響あり)
- 色覚 (影響なし)
- ろう (影響なし)
- 難聴 (影響なし)
- 発話 (影響なし)
- 手の操作 (影響なし)
- 筋力・可動域 (影響なし)
- 認知 (影響あり)
- 光過敏 (影響なし)
- 言語・認知・学習の能力が限られる 言語や学習に障害のある人、記憶に障害のある人は、言葉の普段の意味しか知らないことがよくあります。「免責」を文字どおり「責任を免れる」と読んで、1,000.00を払わなくてよい金額や預けるお金だと受け取り、ページにはそれを正すものが何もありません。
- 視覚が限られる 画面を拡大している人には、一度に数語しか見えません。言葉の意味を推し量る手がかりになる周りの文が見えず、言葉のすぐそば以外にある説明は視界の外です。
マークアップには何の誤りもないため、自動チェックでは見つかりません。axeをはじめ、診断に使われるルールセットには3.1.3のルールがなく、EaseWebの診断にもこの確認はありません。ある言葉が狭い意味で使われているかどうかは、分野、読む人、その一文によって決まり、コードからは判断できません。ページの確認を頼まれたAIアシスタントに見えるのは、段落とラベル付きのチェックボックスです。言葉づかいについて尋ねても、AIは免責額の意味を知っていることが多く、足りないものに気付かないことがあります。これは、書いた本人を含め、詳しい人なら誰もが陥る見落としです。読みやすさの指標でも見つかりません。「免責額:1事故につき1,000.00」は、短い一行だからです。
試してみる
ページの情報だけで、免責額の1,000.00が何の金額か確かめてみましょう
レンタカーを予約する途中の、オプションを選ぶステップです。予約画面の下で答えを選び、続けてそれぞれの修正を適用して、免責額の意味が書かれている場所を探してから、もう一度答えてください。
問題あり 修正できますか?
補償
免責額:1事故につき1,000.00
1,000.00は何の金額?
修正方法
専門用語の意味を、使っている場所で示す
<h2>補償</h2><p> 免責額:1事故につき1,000.00</p><label> <input type="checkbox" name="excess-cover"> 免責補償(1日12.00)</label>問題点2点
- 免責額は、保険では1事故ごとに借りた人が負担する損害の上限を指しますが、この意味は文字からは分かりません。
- ページにもサイトにも意味が書かれておらず、免責補償のオプションも、その意味が分からなければ選べません。
言葉を使う場所で説明する
<h2>補償</h2><p> 免責額:1事故につき1,000.00。車に損害が出たときに、お客様が負担する金額の上限です。残りは保険から支払われます。</p><label> <input type="checkbox" name="excess-cover"> 免責補償(1日12.00):損害の負担が0になります</label>修正の手順2ステップ
- 言葉のすぐ後に、同じ段落の中で、普段の言葉で意味を書きます。車に損害が出たときにお客様が負担する上限で、残りは保険が払う、という説明です。W3Cの達成方法G112(インラインの定義)に当たります。
- チェックボックスのラベルで、免責補償を付けると何が変わるか、つまり損害の負担が0になることを伝えます。ラベルはチェックボックスの名前になるため、スクリーンリーダーも意味を一緒に読みます。
これで修正前の例は直り、3.1.3を満たします。調べるべき言葉があると気付いていない人にも、言葉と一緒に意味が届きます。本文の一部なので、どのブラウザー、スクリーンリーダー、翻訳ツールにも伝わります。必要なのは、ページに1文を足すことだけです。
この方法を選ぶ理由:言葉の意味は、その言葉のそばで説明する
3つとも基準を満たします。文の中で説明してください。言葉が用語だと気付いていない人にも届く方法はこれだけで、1文を足すだけで済み、コードも要りません。説明が長い場合や、ページにこうした言葉が多く、すべての説明を書くと本来の手続きが埋もれてしまう場合は、開閉できる説明を使います。同じ言葉を多くのページで使う場合や、例外や例を含めて詳しく説明する必要がある場合は、用語集にリンクします。ページ上の選択がその言葉に左右されるなら、文の中にも短い説明を添えます。
手間がかかるのは、説明が要る言葉を見つけることです。そのページを使う中で最も経験の浅い利用者のつもりで読み、3種類の言葉を探します。業界の用語(免責額、与信枠)、普段の言葉をその分野で狭い意味に使っているもの、会社が作った言葉(プランや機能の名前など)です。解説書も、新しい言葉や作られた言葉を例外にしないと明記しています。
慣用句も、この問題によくある形です。「匙を投げる」「腹を割って話す」のような言い回しは、文字どおりに受け取る人には意味が伝わりません。できるだけ文字どおりの言葉に書き換え、説明の要るものを残さないようにします。キャッチコピーのように残す必要がある言い回しには、同じ3つの方法が使えます。
説明は、元の言葉より易しい言葉で書きます。「お客様が負担する金額の上限」のように書きます。「自己負担額」のような別の用語に置き換えるだけでは、説明になりません。その場面で読む人にとって何を意味するかを、ページにある金額を使って書きます。そして、同じものには、どこでも同じ言葉を使います。予約画面では免責額、確認メールでは自己負担額と書くサイトは、説明が要る言葉が2つになり、読む人は別々のものだと受け取ります。
説明を title 属性やホバーで開くツールチップだけに置かないでください。マウスを言葉に重ねたときにしか表示されず、タッチ画面やキーボードでは表示されません。同じ理由で失敗する例として、「ラベルやヒントがツールチップにしかない入力欄」も参照してください。言葉を dfn 要素で囲むと(達成方法H54)、そこが定義の場所だと示せますが、dfn 自体は説明ではありません。意味は、そのそばに書く必要があります。
CDW(Collision Damage Waiver)のような略語は別の問題です。「何の略なのかページのどこにも書かれていない略語」を参照してください。レンタル約款全体のように、一語ではなく文章全体が難しい場合は、「平易な要約がなく、法律の言い回しでしか読めない規約」を参照してください。
デザインの案
意味の示し方は一つではない
免責額の意味を示す方法をさらに3通りと、示しているように見えるだけの1通りです。マウスを重ね、タップし、Tabで移動してみてください。
デザインファイルで
- ページ上の業界の言葉すべてに印を付け、初めての利用者が使う言葉で意味を書く。
- 意味は、スマートフォンでも、言葉と同じ画面に置く。
- 意味を開くボタンは、閉じた状態と開いた状態、フォーカスの枠を描く。
- 同じものには、どのページでも、メールや契約書でも同じ言葉を使う。
合格
損害時のお客様負担の上限(免責額):1,000.00
平易な言葉を先に、用語は括弧に 読む人に必要なことを先に書き、業界の言葉は後ろに控えめな灰色(6.04:1)で残して、契約書で再び出会ったときに分かるようにします。基本原則:言葉の意味は、その言葉のそばで説明する
免責額:1,000.00
車に損害が出たときに、1事故ごとにお客様が負担する金額の上限です。残りは保険から支払われます。
吹き出しを開く情報ボタン 言葉の後の小さな丸い「i」を、クリック、タップ、EnterキーやSpaceキーで押すと、吹き出しに意味が開き、もう一度押すまで残ります。ホバーだけでは開かないため、スマートフォンでもマウスと同じように使えます。免責額:1,000.00
この画面の用語
- 免責額
- :損害のうち、お客様が負担する上限。
- 免責補償
- :1日12.00で、負担が0になる。
この画面の用語をまとめたカード 選択肢の横の淡いカードで、この画面に出てくる言葉を一度ずつ説明するため、行そのものは短いままです。こうした言葉がいくつもある画面に向き、選択と同じ画面に置きます。
不合格
免責額車に損害が出たときに、1事故ごとにお客様が負担する金額の上限です。残りは保険から支払われます。:1,000.00
ホバーで開く点線のツールチップWCAG 3.1.3 点線は意味があることを示しますが、開くのはマウスを言葉に重ねたときだけです。キーボードでは言葉にたどり着けず、タッチ画面ではツールチップが表示されません。title属性も同じ理由で失敗します。
修正の確認
4項目、マウス不要
確認方法: キーボード、タッチ、スクリーンリーダー
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。文面を変えた際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。例は予約画面の1つの言葉です。3.1.3はレベルAAAで、多くの方針が求めるAAを超える基準ですが、説明は1文で済み、予約や購入の画面では、何にお金を払うのかを利用者が分かるかどうかを左右します。どの言葉に説明が要るかは読む人によって変わり、専門家向けのページなら、一般の人向けのページより少なくて済みます。説明を付けても、難しい文章が易しくなるわけではありません。説明が助けるのは一つひとつの言葉で、説明だらけになるページは、用語集より書き直しが必要です。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
参考資料
- WCAG Understanding: unusual-words(新しいタブで開きます)
- WCAG Technique G101(新しいタブで開きます)
- WCAG Technique G112(新しいタブで開きます)
- WCAG Technique G55(新しいタブで開きます)
- WCAG Technique G62(新しいタブで開きます)
- WCAG Technique H40(新しいタブで開きます)
- w3.org: coga-usable(新しいタブで開きます)
- w3.org: coga-usable(新しいタブで開きます)
- developer.mozilla.org: details(新しいタブで開きます)
- html.spec.whatwg.org: dom(新しいタブで開きます)
EaseWebのサービス
修正した問題を、次のリリースで再発させない
このガイドのような修正方法を、コーディングエージェントが従うルールと、CIのチェックに組み込みます。あわせて定期的に、キーボードとスクリーンリーダーで手動の再テストを行います。