アクセシビリティ・サポーテッド(AS)情報:H065-3

H065-3: label要素を用いることができないとき、title属性を用いてフォーム・コントロールを特定する

関連する達成基準の実装方法一覧

7.1.1.1非テキストコンテンツに関する達成基準 (等級A)

7.1.3.1情報及び関係性に関する達成基準 (等級A)

テストファイル

H065-3のテストファイル

見解

要注意

対象

input要素(type="text")のtitle属性

注意点

ラベルとなるテキストを付与できない場合には、title属性を用いることができる。
ただし、キーボード操作でフォーカスを移動させた際には、title属性値がツールチップによって表示されないことに注意する必要がある。そのため、ラベルとなるテキストを付与できずにtitle属性を用いる場合には、利用者がコントロールの名前や意味を視覚的に判断できるようにフォーム・コントロールを配置しなければならない。また、必要不可欠な情報である場合には、本文などで提供すべきである。

代替もしくは推奨する方法

フォーム・コントロールにはラベルとなるテキストを付与して、そのテキストをlabel要素を用いてマークアップするのが最もよい。

備考

使用することによる悪影響はなく、キーボード操作時も画面にツールチップが表示されるように、ブラウザの今後の機能向上に期待する。

テスト結果の詳細

ユーザエージェント 検証結果 操作手順 備考
Internet Explorer 6.0 テキストフィールドに対してマウスオーバーすると、title属性がツールチップで表示される。
しかし、テキストフィールドに対しTab,Shift+Tabキーでフォーカスをあてても、title属性がツールチップで表示されることはない。
キーボード操作の場合、テキストフィールド毎のツールチップは確認できない。
Internet Explorer 7.0 マウスポインタをテキストフィールド上に置くと、ツールチップは表示された。その後、キーボードでテキストボックス内に移動し、確認したが、ツールチップは表示されなかった。 Tabキーで各テキストフィールドにフォーカスを移動させたが、title属性はツールチップとしての表示がなかったため、一部サポートとした。
Internet Explorer 8.0 1.マウスポインタをテキストフィールド上に置いたとき、title属性値「検索キーワードを入力」がツールチップとして表示されることを確認
2.Tabキーでテキストフィールドに移動させるが、ツールチップは表示されない。
1:○
2.:×
Internet Explorer 9 1:マウスポインタを置いた際に、「検索キーワードを入力」がツールチップとして表示されていることを確認
2:Tabキーでフォーカスを移動させ、「検索キーワードを入力」がツールチップとして表示されていることを確認
1:○ 
2:×:Tabキーでフォーカスを移動させたが、「検索キーワードを入力」がツールチップとして表示されなかった
Firefox 3.5 マウスポインタをテキストフィールド上に置くと、ツールチップは表示された。その後、キーボードでテキストボックス内に移動し、確認したが、ツールチップは表示されなかった。 Tabキーで各テキストフィールドにフォーカスを移動させたが、title属性はツールチップとしての表示がなかったため、一部サポートとした。
Firefox 4.0 1:マウスポインタを置いた際に、「検索キーワードを入力」がツールチップとして表示されていることを確認
2:Tabキーでフォーカスを移動させ、「検索キーワードを入力」がツールチップとして表示されていることを確認
1:○ 
2:×:Tabキーでフォーカスを移動させたが、「検索キーワードを入力」がツールチップとして表示されなかった
Firefox 9.0 1:マウスポインタを置いた際に、「検索キーワードを入力」がツールチップとして表示されていることを確認
2:Tabキーでフォーカスを移動させ、「検索キーワードを入力」がツールチップとして表示されていることを確認
1:○ 
2:×:Tabキーでフォーカスを移動させたが、「検索キーワードを入力」がツールチップとして表示されなかった
Safari 3.2 マウスでカーソルを置いたとき(クリックではない)「検索キーワードの入力」が表示されるが、キーボードでのタブ操作では表示がでない。 キーボード操作に非対応
Safari 5.0.3 マウスポインタをテキストフィールド上に置いた際に、title属性値「検索キーワードを入力」がツールチップとして表示されたが、キーボードででテキストフィールドにフォーカスを移動させた際に、title属性値「検索キーワードを入力」がツールチップとして表示されない。 1:○
2:×
JAWS for Windows 9.0 ■操作手順
「検索キーワード入力」「検索ボタン」と読み上げた。
■音声読み上げ
「検索キーワード入力 エディット」
ホームページ・リーダー 3.04 ■操作手順
Tabキー、Shift+Tabキーで移動させるとそれぞれのtitle属性値「検索キーワードを入力」を読み上げてから、テキストフィールドの内容を読み上げた。
■音声読み上げ
☆tabキーの場合
「 検索キーワードを入力 [テキスト。]   [検索: 実行ボタン。] 」
PC-Talker XP 3.06 ■操作手順
「検索キーワードを入力の文字入力」と読み上げる。画面上にも表示される
■音声読み上げ
「検索キーワードを入力のエディット 文字入力、検索 ボタンのプッシュボタン確認」
PC-Talker XP 3.06 + NetReader 1.18 ■操作手順
Tabキーでテキストフィールドにフォーカスを移動させた際に、title属性値「検索キーワードを入力」をテキストフィールドと一緒に読み上げた。
■音声読み上げ
「検索キーワードを 入力 文字入力 エンター で 入力」
FocusTalk V3 ■操作手順
Tabキーでテキストボックスにフォーカスが移動すると、「検索キーワードを入力のエディット」と読み上げられた。
■音声読み上げ
「検索キーワードを入力のエディット」
NVDA 2010.1j ■操作手順
Eキーを用いてエディットボックスに移動すると、「エディットオートコンプリート付」と読まれる前に「検索キーワードを入力」と読み上げられた。
■音声読み上げ
「検索キーワードを入力エディットオートコンプリート付」
NVDA 2011.1 ■操作手順
Tabキーを用いてエディットボックスに移動すると、「エディットオートコンプリート」と読まれる前に「検索キーワードを入力」と読み上げられた。
■音声読み上げ
「検索キーワードを入力エディットオートコンプリート」