GTM-MML4VXJ
Skip to main content
  1. ホーム >
  2. 企業情報 >
  3. 事業方針 >
  4. 技術・研究開発・デザイン >
  5. デザイン >
  6. ユニバーサルデザイン >
  7. 7.3.3.2 ラベル又は説明文に関する達成基準

7.3.3.2 ラベル又は説明文に関する達成基準

コンテンツが利用者の入力を要求する場合は、入力箇所のラベル又は入力方法についての説明文を提供していなければならない。

引用元:JIS X 8341-3:2010「高齢者・障害者等配慮設計指針-情報通信における機器、ソフトウェア及びサービス-第3部:ウェブコンテンツ」

解説

ユーザーに入力を要求するフォーム項目では、そのフォーム・コントロールのラベル(項目名のテキスト)と必要に応じて入力方法についての説明文を提供しなければなりません。

入力方法等についての説明を提供する必要があるのは、次のような場合です。

  • 入力可能なデータ書式に制限がある場合
  • 所定の入力方法がある場合
  • 必須項目である場合

つまり、ユーザーの入力内容によっては入力エラーを引き起こす可能性がある項目に対して、入力エラーを事前に回避するためにラベル部分に入力例や入力方法等を提示します。

入力例や入力方法を提示したり、必須項目であることを明示したりする際には、ラベルとなるテキストと一緒にlabel要素の中に入れるようにします。そうすることによって、例えばスクリーンリーダーで操作していると、テキストフィールドを読み上げる際に、ラベルとなるテキストとあわせて入力例や入力方法などを読み上げてくれるため、より確実にユーザーに伝えることができます。

また、入力項目数が少ないフォームや入力方法の項目が複数ある場合などは、入力フォームの先頭部分で入力例や入力方法等を提示したほうがよい場合もあります。入力項目ごとに説明するか、またはフォームの先頭にまとめるかについては、そのフォームの項目数や内容・構成等によります。どちらがユーザーの入力エラーを回避しやすいかという観点で判断してください。

事例と実装

良い例:入力例

スクリーンショット:ラベルに入力例が明示されたテキストフィールド

テキストフィールドの項目名となるラベルのテキストに、「日付[入力例]2012/10/01」と入力例が明示されていて、入力例もあわせてlabel要素でマークアップされている。

ソースコード例

< label for="date" >日付([入力例]2012/10/01)< /label >
< input type="text" name="date" id="date" / >

参考情報

関連する達成基準

等級A
等級AA
等級AAA