本文へ移動
easeweb
ご相談
トピックを検索

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

レンタカーの予約画面が、保険の用語である「免責額」に何の説明も付けずに補償を勧めているため、何の金額なのか分からないまま選ぶことになってしまう

WCAG 2.2
SC 3.1.3AAA
必須とする規格
Section 508、EN 301 549、JIS X 8341-3 では必須ではない
問題あり <p>免責額:1事故につき…</p>
アクセシビリティの問題を示した図: 認知:免責額って何?
01

問題

保険の用語としての免責額を知らない人には、1,000.00が何の金額か分からない

02

試してみる

ページの情報だけで、免責額の1,000.00が何の金額か確かめてみましょう

レンタカーを予約する途中の、オプションを選ぶステップです。予約画面の下で答えを選び、続けてそれぞれの修正を適用して、免責額の意味が書かれている場所を探してから、もう一度答えてください。

問題あり 修正できますか?

問題説明のない業界の用語
レンタカーの予約・ステップ2/3:オプション コンパクトカー、3日間

補償

免責額:1事故につき1,000.00

1,000.00は何の金額?

再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。

03

修正方法

専門用語の意味を、使っている場所で示す

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

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

04

デザインの案

意味の示し方は一つではない

免責額の意味を示す方法をさらに3通りと、示しているように見えるだけの1通りです。マウスを重ね、タップし、Tabで移動してみてください。

デザインファイルで

  • ページ上の業界の言葉すべてに印を付け、初めての利用者が使う言葉で意味を書く。
  • 意味は、スマートフォンでも、言葉と同じ画面に置く。
  • 意味を開くボタンは、閉じた状態と開いた状態、フォーカスの枠を描く。
  • 同じものには、どのページでも、メールや契約書でも同じ言葉を使う。

合格

  • 損害時のお客様負担の上限(免責額):1,000.00

    平易な言葉を先に、用語は括弧に 読む人に必要なことを先に書き、業界の言葉は後ろに控えめな灰色(6.04:1)で残して、契約書で再び出会ったときに分かるようにします。
  • 免責額:1,000.00

    吹き出しを開く情報ボタン 言葉の後の小さな丸い「i」を、クリック、タップ、EnterキーやSpaceキーで押すと、吹き出しに意味が開き、もう一度押すまで残ります。ホバーだけでは開かないため、スマートフォンでもマウスと同じように使えます。
  • 免責額:1,000.00

    この画面の用語

    免責額
    :損害のうち、お客様が負担する上限。
    免責補償
    :1日12.00で、負担が0になる。
    この画面の用語をまとめたカード 選択肢の横の淡いカードで、この画面に出てくる言葉を一度ずつ説明するため、行そのものは短いままです。こうした言葉がいくつもある画面に向き、選択と同じ画面に置きます。

不合格

  • 免責額車に損害が出たときに、1事故ごとにお客様が負担する金額の上限です。残りは保険から支払われます。:1,000.00

    ホバーで開く点線のツールチップWCAG 3.1.3 点線は意味があることを示しますが、開くのはマウスを言葉に重ねたときだけです。キーボードでは言葉にたどり着けず、タッチ画面ではツールチップが表示されません。title属性も同じ理由で失敗します。

    関連:ラベルやヒントがツールチップにしかない入力欄

05

修正の確認

4項目、マウス不要

確認方法: キーボード、タッチ、スクリーンリーダー

4件中0件を確認済み

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

制限

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

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

EaseWebのサービス

修正した問題を、次のリリースで再発させない

このガイドのような修正方法を、コーディングエージェントが従うルールと、CIのチェックに組み込みます。あわせて定期的に、キーボードとスクリーンリーダーで手動の再テストを行います。

サービス内容を見る