GTM-MML4VXJ
Skip to main content
  1. ホーム >
  2. 企業情報 >
  3. 事業方針 >
  4. 技術・研究開発・デザイン >
  5. デザイン >
  6. ユニバーサルデザイン >
  7. 7.1.1.1 非テキストコンテンツに関する達成基準:フォーム・コントロール

7.1.1.1 非テキストコンテンツに関する達成基準:フォーム・コントロール

利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たす代替テキストを提供しなければならない。ただし、次の場合は除く。

a) コントロール、入力
非テキストコンテンツが、コントロール又は利用者の入力を受け付けるものであるとき、その目的を説明する識別名を提供している。

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

解説

非テキストコンテンツ」を使用する際には、「代替テキスト」を提供しなければなりません。

テキストフィールドやラジオボタン、チェックボックスなどのフォーム・コントロールも、画像と同じように「非テキストコンテンツ」です。しかし、フォーム・コントロールの場合は、「代替テキスト」ではなく、「識別名」を提供します。「識別名」は、「名前」、「住所」などのように、フォーム・コントロールのラベルとなるテキストのことを指します。

「識別名」を提供する必要があるHTMLのフォーム・コントロールは次の通りです。

  • テキストフィールド(input type="text")
  • チェックボックス(input type="checkbox")
  • ラジオボタン(input type="radio")
  • ファイル参照(input type="file")
  • パスワード入力(input type="password")
  • テキストエリア(textarea)
  • セレクトメニュー(select)

これらのフォーム・コントロールそれぞれに対してラベルとなるテキストを提供し、それが「識別名」であることをソースコードで明確に示す必要があります。『WCAG 2.0 実装方法集』によれば、フォーム・コントロールに「識別名」を提供する方法には、次の二つがあります。

なお、送信及びリセットボタン(input type="submit"又はinput type="reset")、 画像ボタン(input type="image")、隠しフィールド(input type="hidden")汎用ボタン(button要素又はinput type="button")については、value属性(送信ボタン及びリセットボタン)やalt属性(画像ボタン)、または要素のコンテンツ(汎用ボタン)を介して「識別名」が提供されるため、label要素やtitle属性を用いる必要はありません。

事例と実装

良い例 1:ラベルとなるテキストがある

スクリーンショット:「サイト内検索」というラベルがあるテキストフィールド

フォーム・コントロールのラベルとなるテキストがある場合には、label要素を用いてマークアップする。

ソースコード例

< label for="search" >サイト内検索:< /label >
< input type="text" name="search" id="search" / >
< input type="image" src="search.gif" alt="検索" id="btn" value="Search" / >

良い例 2:ラベルとなるテキストがない

スクリーンショット:ラベルがないテキストフィールド

フォーム・コントロールのラベルとなるテキストがなく、追加することもできない場合には、title属性を用いてラベルとなるテキストを記述する。

ソースコード例

< input type="text" name="search" id="search" title="サイト内検索" / >
< input type="image" src="search.gif" alt="検索" id="btn" value="Search" / >

参考情報

関連する達成基準

等級A