WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

G167: 隣接するボタンを用いて、テキスト・フィールドの目的をラベル付けする

適用(対象)

フォームをサポートするウェブコンテンツ技術すべて

これは、次の達成基準に関連する実装方法である:

解説

テキストフィールド上である機能を実行するボタンがあり、ボタンは明確にラベル付けされていて、テキストフィールドと隣り合って表示される場合、ボタンはテキストフィールドに対するラベルとしての役割も果たす。このラベルは、ページ上に新たな反復的なテキストを追加することなく、利用者がこのテキストフィールドの目的を理解するのを助ける。一つのテキストフィールドをラベル付けするボタンは通常はテキストフィールドの後に置かれる。

注記: 達成基準4.1.2を満たすため、このボタンはプログラムで解釈可能な識別名(name)を持っていなければならない。

事例

事例 1: 検索機能

あるウェブページには、利用者が検索文字列を入力するためのテキストフィールドと、検索を実行するための「検索」とラベル付けされたボタンがある。ボタンはテキストフィールドの直後に配置されているため、このテキストフィールドが検索のための文字列を入力するためのものであることが利用者にとって明らかである。

画面イメージ:フィールドのラベルを提供するボタンが右側にあるテキストフィールド

事例 2: フォームの選択

あるフォームではアメリカ合衆国の利用者に記入を求めている。州によって法律や要求が異なるので、利用者は自分が居住する州に対応したバージョンのフォームを選択しなければならない。ドロップダウンリストから利用者が州を選択するようになっている。隣接するボタンには「この州のフォームを開く」とラベル付けされている。ボタンを押すと、選択した州のためのフォームを表示するウェブページに移動する。

検証

チェックポイント

この実装方法を用いているテキストフィールドとボタンに対して:

  1. テキストフィールドとボタンが、プログラムで解釈可能な読み上げ順序において、互いに隣接している。

  2. テキストフィールドとボタンが互いに隣接して表示されている。

判定基準

注意: この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。