control-name-title-only

ボタンやリンクの名前は、titleだけから得ないことを推奨します

manual確度:medium重大度:minoroperable

アクセシブルな名前が、マウスでホバーしたときにだけ表示されるtitle属性だけであるボタンやリンクを検出し、手動レビューに回します。

適用範囲:アクセシビリティツリーに含まれ、空でないtitle属性を持つボタンとリンクです。<a href>、<area href>、<button>、typeがbutton、submit、reset、imageの<input>、そしてrole属性またはElementInternalsによってbuttonまたはlinkのロールを与えられた要素が該当します。

期待される結果:アクセシブルな名前の計算がtitleを名前として採用するのは、ほかに要素の名前となるものがない場合だけです。ほかのものとは、作成者による名前(aria-labelledby、aria-label)、画像ボタンのalt、inputのボタンのvalue、またはボタンとリンクではその内容です。

  • title以外のものがコントロールの名前になっている場合:pass。titleは説明、つまりツールチップです。
  • titleが唯一の名前である場合:cantTell(NAME_FROM_TITLE_ONLY)。

名前としては有効なので4.1.2は満たしていますが、titleが表示されるのはマウスでホバーしたときだけです。タッチスクリーンでは表示されず、コントロールがキーボードからフォーカスを受け取ったときにも表示されず、音声入力を使う人が読んで口にできるテキストにもなりません。コントロールに可視のテキストを与えられるか、アイコンだけを表示する場合はaria-labelを与えられるかを確認してください。titleは、必要であればツールチップとして残せます。

検出結果が報告する内容:

  • role:コントロールのロールで、buttonまたはlinkです。

これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。

例

pass
<button title="Save the draft">Save</button>

ボタンのテキストが名前になっています。titleはツールチップです。

can't tell
<button title="Close"><svg aria-hidden="true" width="12" height="12"></svg></button>

titleがボタンの唯一の名前で、マウスでホバーしたときにだけ表示されます。可視のテキスト、またはaria-labelを与えられるかを、人が確認します。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

NAME_FROM_TITLE_ONLY

  1. レポートに示されたボタンまたはリンクを、ホバーせずに確認してください。
  2. 表示されているもの(テキストまたはアイコン)で目的が明確にわかるか判断してください。
  3. キーボードのTabキーでそこに移動し、titleのツールチップが表示されないことを確認してください。

満たす場合:コントロールの目的は表示内容から明確であるか、表示テキストまたはaria-labelが付けられ、titleはツールチップとして残されています。

満たさない場合:目的が、キーボード、タッチ、音声入力の利用者には見えないtitleによってしか説明されていません(ベストプラクティス、accname 1.2)。

ソースコードを見る