7.1.1.1非テキストコンテンツに関する達成基準 (等級A)
7.4.1.2プログラムが解釈可能な識別名,役割及び設定可能な値に関する達成基準 (等級A)
要注意
input要素(type="text")のtitle属性
キーボード操作でフォーカスを移動させた際には、title属性値がツールチップによって表示されないことに注意する必要がある。そのため、ラベルとなるテキストを付与できずにtitle属性を用いる場合には、利用者がコントロールの名前や意味を視覚的に判断できるようにフォーム・コントロールを配置しなければならない。また、必要不可欠な情報である場合には、本文などで提供すべきである。
フォーム・コントロールにはラベルとなるテキストを付与して、そのテキストをlabel要素を用いてマークアップするのが最もよい。
ラベルとなるテキストを付与できない場合には、title属性を用いることができる。
使用することによる悪影響はなく、キーボード操作時も画面にツールチップが表示されるように、ブラウザの今後の機能向上に期待する。
ユーザエージェント | 検証結果 | 操作手順 | 備考 |
---|---|---|---|
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キーを用いてエディットボックスに移動すると、「エディットオートコンプリート」と読まれる前に「検索キーワードを入力」と読み上げられた。 ■音声読み上げ 「検索キーワードを入力エディットオートコンプリート」 |
|
Firefox18.0.1 | △ | 1:マウスポインタを置いた際に、「検索キーワードを入力」がツールチップとして表示されていることを確認 2:Tabキーでフォーカスを移動させ、「検索キーワードを入力」がツールチップとして表示されていることを確認 |
1:○ 2:×:Tabキーでフォーカスを移動させたが、「検索キーワードを入力」がツールチップとして表示されなかった |
Google Chrome 25 | △ | 【1】マウスポインタをテキストフィールド上に置いた際に、title属性値「検索キーワードを入力」がツールチップとして表示されるかを確認する。 【2】Tabキーでテキストフィールドにフォーカスを移動させた際に、title属性値「検索キーワードを入力」がツールチップとして表示されるかを確認する。 |
【1】○ マウスポインタをテキストフィールド上に置いた際に、「検索キーワードを入力」がツールチップとして表示されることを確認した。 【2】× Tabキーでテキストフィールドにフォーカスを移動させた際に、ツールチップが何も表示されないことを確認した。 |
Safari 6.0.5 | △ | 1.はOK、2.はNG | |
NVDA 2012.3 | ○ | ■操作手順 Tabキーを用いてエディットボックスに移動すると、「エディットオートコンプリート」と読まれる前に「検索キーワードを入力」と読み上げられた。 ■音声読み上げ 「検索キーワードを入力エディットオートコンプリート」 |
|
PC-Talker 7 2.12 | ○ | ■操作手順 Ctrl+下矢印キーで行読み、Tabキーで移動、またはShiftキーで全文読み ■音声読み上げ 「検索キーワードを入力 のエディット 文字入力」 |
|
VoiceOver | ○ | ■操作手順 2本指フリック、1本指フリックともに、「テキストフィールド」と読まれる前に「検索キーワードを入力」と読み上げられた。 ■音声読み上げ 「検索キーワードを入力 テキストフィールド 検索 ボタン」 |