トピックを検索
ラベルやヒントがツールチップにしかない入力欄
ギフトカードの欄の名前や桁数がtitle属性にしかなく、ブラウザーはマウスポインターを欄に重ねている間しか表示しません。
title="ギフトカード番号" 問題
キーボードやタッチ操作の利用者には空の欄しか見えず、どれが何の欄か、何桁入れるのかを示す言葉がない
ショップの購入手続きに「ギフトカード」の欄があります。空の入力欄が二つ横に並び、その横に「適用」ボタンがあります。デザインにラベルを置く場所がないため、各欄の名前はtitle属性に入れてあります。一つ目の欄にマウスポインターを重ねると「ギフトカード番号」、二つ目に重ねると「PIN」と小さなツールチップが出ます。スクリーンリーダーの利用者がTabキーを押すと「ギフトカード番号、編集テキスト」と聞こえます。目で見ている人がTabキーを押すと、フォーカスは空の欄に移るだけで、ほかには何も表示されません。スマートフォンにはポインターがないため、ツールチップはまったく出ません。どちらが16桁のカード番号で、どちらが4桁のPINなのかは、推測するしかありません。ラベルは表示したものの、形式はtitleに残したままのフォームもよくあります。「16桁」「4桁」はマウスポインターを重ねたときにしか出ないため、キーボードやタッチ操作の利用者には一度も見えません。
3.3.2「ラベル又は説明」は、入力が必要な箇所に、ラベルや説明を求めています。その解説は、正しい入力に特定の決まりがあるときは特に、欄が求める形式もラベルや説明で示せるとしています。titleは補足のテキストで、パソコンのブラウザーはマウスポインターが要素の上にある間だけ、ツールチップとして表示します。Tabキーで欄に移っても、タップしても何も出ません。HTML標準自体も、titleに頼るとキーボードだけやタッチだけで操作する人が取り残される、と注意しています。一つ目のフォームでは、二つの欄を見分ける言葉はtitleにしかありません。マウスを使わない人にとっては、ラベルがまったくないのと同じです。W3Cの達成方法H65はtitleで欄に名前を付ける方法ですが、検索ボタンの隣の検索欄のように、画面から目的が分かる欄のためのものです。この例では、画面上に欄を見分ける手がかりがありません。
アクセシビリティツリーを見ても、欠けているものはありません。labelもaria-labelもaria-labelledbyもない欄は、titleからアクセシブル名を取ります。そのため各欄には名前があり、4.1.2「名前（name）・役割（role）及び値（value）」は満たしています。足りないのは、画面に見える言葉のほうです。二つ目のフォームではラベルが画面にあり、titleは名前ではなく欄の説明になります。スクリーンリーダーは名前の後に「16桁」と読みます。しかしショップはその桁数しか受け付けないため、桁数は入力する前に知る必要のある説明です。それなのに画面には、マウスを使う人にしか表示されません。HTML標準は、pattern属性を使う欄には、そのパターンを説明するtitleを付けるよう求めています。そのため、形式がtitleにだけ書かれることもあります。
スマートフォンやタブレットでは、誰もポインターを欄に重ねられません。タッチで操作する人には、障害の有無にかかわらず、ラベルも形式も見えません。
10グループ中3グループに影響
- 全盲 （影響なし）
- 弱視 （影響あり）
- 色覚 （影響なし）
- ろう （影響なし）
- 難聴 （影響なし）
- 発話 （影響なし）
- 手の操作 （影響あり）
- 筋力・可動域 （影響なし）
- 認知 （影響あり）
- 光過敏 （影響なし）
- 手の操作が限られる キーボードの利用者がTabキーで各欄に移ってもツールチップは出ず、フォームは空の欄二つと「適用」ボタンにしか見えません。
- 視覚が限られる ページを拡大したり拡大鏡を使ったりしていると、欄に言葉が見えません。ラベルを知るには、ポインターを欄に重ねてツールチップを待ち、ブラウザーが表示した位置で読む必要があります。
- 言語・認知・学習の能力が限られる フォームに苦手意識のある人は、どれが何の欄かを自分で考え、ポインターを動かすと消えるツールチップの形式を覚えておく必要があります。
一つ目のフォームは、スクリーンリーダーで確かめても合格します。どの欄も名前付きで読まれるからです。axeのlabelルールもtitleを名前と数えるため、欄を合格にします。axeのlabel-title-onlyルールはtitleだけで名前の付いた欄を検出しますが、ベストプラクティスのルールでWCAGの達成基準のタグが付いていないため、WCAGのタグに絞ったスキャンでは実行されません。EaseWebの診断では、確認用の手がかりとして実行します。ラベルのある欄のtitleに、画面にない説明が入っているかを判定する自動ルールはありません。診断はそうしたtitleを手がかりとして挙げ、その言葉が必要かどうかは人が判断します。AIに「ラベルを付けて」と頼むと、同じ言葉のaria-labelを足すことがあります。欄に名前が二重に付くだけで、画面には相変わらず何も表示されません。
試してみる
Tabキーで各欄に移り、何を入力するか分かるか確かめてから、マウスを重ねてみましょう
問題1： 画面には欄の名前がありません。フォームの下で、スクリーンリーダーに聞こえる言葉と、目に見える言葉を比べてください。スマートフォンでは欄をタップしてください。
問題2： ラベルは表示されましたが、各欄の桁数はツールチップにしかありません。
修正を適用します。 もう一度Tabキーで移動してください。スクリーンリーダーが読む言葉は、すべて画面にありますか？
問題あり 修正できますか？
スクリーンリーダーの読み上げ：
（Tabで欄へ移動）
修正方法
ラベルと形式を画面に表示する。label要素か、aria-describedbyで結び付けたヒントを使う
- 1どの欄も、ラベルをtitleだけでなく画面に表示する。
- 2欄に必要な形式や指示も、ラベルの中かその横に表示する。
- 3画面に表示しない言葉をtitleに残さない。
Titleだけのラベル
<form class="gift-card"> <h2>ギフトカード</h2> <input name="card" inputmode="numeric" title="ギフトカード番号"> <input name="pin" inputmode="numeric" title="PIN"> <button type="submit">適用</button></form>ラベルと、その下のヒント
<form class="gift-card"> <h2>ギフトカード</h2> <label for="card">ギフトカード番号</label> <p id="card-hint" class="hint">16桁</p> <input id="card" name="card" inputmode="numeric" aria-describedby="card-hint"> <label for="pin">PIN</label> <p id="pin-hint" class="hint">4桁</p> <input id="pin" name="pin" inputmode="numeric" aria-describedby="pin-hint"> <button type="submit">適用</button></form>どれが何の欄かを示すものが、画面にありません。名前はtitleにあるため、マウスポインターを重ねたときにしか出ません。スクリーンリーダーは欄の名前として読みますが、フォームを目で見る人には一度も見えません。
各欄にforとidで結び付けたlabelがあり、形式はラベルの下の短い行に書いて、aria-describedbyで欄に結び付けています。誰にでも同じ言葉が届きます。言葉は画面に表示され、スクリーンリーダーはラベルを欄の名前、ヒントを説明として読み、ラベルをクリックすると欄にカーソルが入ります。titleは削除したので、ツールチップにしかない言葉は残っていません。
どちらも欄に必要な言葉をすべて表示し、3.3.2を満たします。ラベルの下のヒントは、短い言葉に収まらない説明に向いています。ラベルが短いままなので、ラベルを声に出して欄に移る音声操作の利用者や、欄に移るたびに名前を聞くスクリーンリーダーの利用者の負担が増えません。ヒントだけ控えめな見た目にもできます。説明をすぐ読むか、少し間を置いて読むかは、スクリーンリーダーによって異なります。ラベルの中に書く方法はARIAが要らず、名前の一部としてどのスクリーンリーダーにも届きます。この例のように形式が短い言葉で済むなら、こちらを選んでください。
titleは削除します。 ラベルと同じ言葉のtitleは、すでに画面にある言葉をツールチップで繰り返すだけです。それ以上のことを書けば、また隠れたメッセージになります。例外はpattern属性です。HTML標準はパターンを説明するtitleを求めており、ブラウザーは「指定されている形式で入力してください」というメッセージに、titleの内容を使うことがあります。そのtitleは表示したヒントとまったく同じ言葉にするか、ブラウザーのメッセージの代わりに、欄に結び付けた独自のエラーを出します。直し方がわからないフォームエラーを参照してください。
フォーカスしたときに出る説明。 W3Cの達成基準3.3.2の解説は、欄にフォーカスがある間だけ表示される説明を認めています。ラベル自体が常に画面にあるなら、ヒントは必要なときだけ表示してもかまいません。ポインターを重ねたときだけでなくフォーカスしたときにも表示し、フォーカスが離れるまで残し、Escapeキーで閉じられるようにします。このようなポップアップに必要なことは、近づくと消え、閉じられないツールチップで扱っています。ブラウザーはtitleをフォーカスでは表示しないため、titleではこれができません。
入力された値を受け付けます。 カードには番号が4桁ずつ区切って印刷されているので、「スペースなし」とヒントに書き足すのではなく、スペースのまま受け付けて取り除きます。入力をはじかず、こちらで変換するを参照してください。
titleが出てくるほかの場面。 次のものは別のガイドで扱っています。
- アイコンだけのボタンにtitleを付けると名前は付きますが、目で見ているキーボードやタッチの利用者には、アイコンしか見えません。こうしたボタンの名前は、名前がないアイコンだけのボタンで扱っています。
iframeにはtitleが必要です。スクリーンリーダーにフレームの名前を伝えるもので、目で見る必要はありません。タイトルがない、または中身の分からないiframeを参照してください。- プレースホルダーをラベル代わりにするのも、ラベルが画面から消えるよくある形です。ラベルがない・表示と食い違うフォームの入力欄で扱っています。
コンポーネント。 共通の入力欄コンポーネントでは、ラベルを必須のプロパティにします。ヒントのプロパティは、見えるテキストを表示すると同時に、そのidとaria-describedbyを設定するように作ります。titleはプロパティに含めず、ヒントがツールチップに入らないようにします。
デザインの案
形式の置き場所は自由。ただし入力する前から見えるように
ギフトカード番号が16桁であることを、4通りで示しました。Tabキーで各欄に移って数字をいくつか入力し、スマートフォンでも同じように試してみてください。2つは入力前から形式が見え、2つはポインターを重ねるか間違えるまで見えません。
デザインファイルで
- 各欄を3通り：空、入力途中、入力済み。どれでも形式が画面に見えるように。
- 形式は欄の中かすぐ横に置く。アイコンの裏だけに隠さない。
- ヒントの色の横にコントラスト比を書く。この大きさの文字なら4.5:1以上。
- 入力前に見せる形式と、エラーメッセージで同じ言葉を使う。
合格
- 欄の中に形式を示すピル 欄の端の淡いピルに「16桁」と書きます。#f1ede9の地に#4a4541で8.13:1です。何もしていないときから表示され、入力中も入力後も残り、欄の下に行を足す必要もありません。
- 入力に合わせて増える桁数 欄の右下に「16桁中0桁」を#5c5650（7.24:1）で表示し、入力に合わせて数が増えます。入力前から形式が見え、残りの桁数も分かります。読み上げは欄に移ったときで、キーを押すたびではありません。
不合格
- ポインターを重ねると形式が出るⓘアイコンWCAG 3.3.2 ラベルの後の小さなⓘ（#5c5650、7.24:1）にポインターを重ねている間だけ、「16桁」と書いた濃い色のカードが開きます。Tabキーではアイコンに移れないため、キーボードで操作すると欄にはラベルしかありません。
- 間違えた後にだけ出る形式WCAG 3.3.2 何もしていないときは、桁数について何も書かれていません。16桁に満たない数字を入れて欄を離れると、赤い「16桁すべて入力してください」（#b3261e、6.54:1）が出ます。決まりは最初からあるのに、画面に出るのは誰かが破った後です。
修正の確認
4項目、マウス不要
確認方法： キーボード、タッチ、スクリーンリーダー、拡大表示
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。共通の入力欄コンポーネントを変更した際は、再度確認します。
スクリーンリーダーでの aria-describedby、title (no label)、title (with a label)の読まれ方
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。扱うのは、欄に入力するために必要なラベルと説明です。カードのどの番号がPINかのように、どこで情報を見つけるかを教えるヘルプは、レベルAAAの別のトピック「フォームで、説明が必要な入力欄のそばにヘルプがある」で扱いますが、まだガイドはありません。決済用のiframe、外部ウィジェット、コンテンツ編集者が追加した欄も、同じように確認してください。実際に使用する支援技術で、操作全体を確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。