title属性によるラベル付け

Silktideは、ページ上のボタンとリンクについて、何をするものかを説明するためにtitle属性に依存しているコントロールがないかチェックします。ブラウザーがtitleを表示するのは、マウスポインターを要素の上に置いたときに遅れて表示されるツールチップとしてのみです。そのため、ほとんどの人は目にすることがありません。

<!-- 問題：ツールチップだけがラベルになっている -->
<button title="Close"><svg>…</svg></button>

<!-- 修正：コントロールに実際のアクセシブルな名前を付ける -->
<button aria-label="Close"><svg>…</svg></button>

重要な理由

titleのツールチップは、マウスを使うユーザーにしか表示されず、しかも表示までに遅延があります。キーボードユーザー、タッチデバイスやモバイルのユーザー、そしてほとんどのユーザーには表示されません。そのため、titleだけでラベル付けされたコントロールは、訪問者の多くにとって謎のボタンになってしまいます。また、スクリーンリーダーによるtitleの扱いには一貫性がありません。読み上げるものもあれば無視するものもあるため、本来対象としているユーザーに対してさえ信頼できません。

コントロールにtitleと別のの両方がある場合、問題は一貫性です。マウスユーザーには一方の説明が一時的に表示される一方、支援技術のユーザーには別の説明が聞こえます。そして、ページの保守が続くにつれて、両者の差はさらに広がっていきます。

修正方法

コントロールに適切なラベルを付けます。可能な場合は表示テキストを使用し、アイコンのみのコントロールにはのaria-label（または既存のテキストを指すaria-labelledby）を使用します。
コントロールにtitleと、内容の異なるaria-labelの両方がある場合は、より有用な表現を選び、すべての箇所で使用します。通常、最もすっきりした修正方法はtitleを削除し、aria-labelに説明を担わせることです。
titleは、本当に補足的な詳細情報が必要な場合にのみ残します。コントロールの動作を知る唯一の手段にしてはいけません。

Silktideによるテスト方法

各ページにある表示上のボタン、リンク、開示コントロールを見つけます。role="button"やrole="link"を持つ要素も含まれます。
重要な内容を持つtitle属性がある各コントロールについて、他のラベル（表示テキスト、画像の、aria-label、aria-labelledby）があるかチェックします。
唯一のラベルがtitle属性になっているコントロールを報告します。
コントロールにtitleと明示的なaria-labelまたはaria-labelledbyの両方がある場合は、両者を比較し、内容が大きく異なるときに報告します。一方が単に他方を補足しているだけの場合（titleが「Search」で、名前が「Search now」の場合など）は報告しません。

<input>や<select>などのフォームフィールドは、このチェックの対象外です。これらのラベル付けについては、フォームコントロールのラベルで扱います。

トラブルシューティング

iframeではtitle属性が必須です

そのとおりです。<iframe>のtitleは、iframeに名前を付ける標準的な方法であり、このチェックではiframeをテストしません。テスト対象はボタンやリンクなどのインタラクティブなコントロールのみです。

ツールチップで役立つ追加情報を提供しています

コントロールに実際のラベルもある限り、それは正当な使用方法です。このチェックでは、titleが唯一のラベルになっているコントロール、またはアクセシブルな名前と矛盾しているコントロールのみを報告します。