ラベル（名前）

Silktide は、ボタンやリンクで訪問者に表示されるテキストと、支援技術が同じコントロールに使用する名前を比較します。両者が一致しない場合、音声でウェブサイトを操作する人は、画面に表示されているテキストを言ってもコントロールを実行できません。

重要である理由

音声認識を利用する人は画面を見て、表示されている内容を言います。「Send をクリック」。ソフトウェアは、その言葉を各コントロールの（が使用する名前）と照合します。aria-label などの属性はその名前を置き換えるため、「Send」と表示されていても aria-label="Submit" とラベル付けされたボタンは、「Submit をクリック」と言った場合にしか反応しません。表示されている単語は何の反応もなく無視され、ユーザーは本来言うべき隠れた名前を知る方法がありません。

この不一致は、を使い、視覚的に確認できる同僚と一緒に作業するユーザーも混乱させます。隣にいる人が見ている名前とは異なる名前を聞くことになるためです。

これは達成基準 2.5.3（ラベル（名前））であり、最も基本的な適合レベルの一部であるの要件です。

修正方法

何も追加していないによる上書きを削除します。表示テキストですでに何をするボタンか示されている場合、aria-label は必要ありません。
上書きによってコンテキストを追加する場合は、表示テキストで始めます。「Read more」リンクに aria-label="Read more about pricing" を指定すれば、音声コマンドが機能します。
aria-label で表示テキストと異なる内容を指定しないでください。

<!-- 問題: "Send" と表示されるが、"Submit" に反応する -->
<button aria-label="Submit">Send</button>

<!-- 修正: 表示テキストをアクセシブルな名前に含める -->
<button aria-label="Send message">Send</button>

<!-- 最も簡単な修正: 上書きしない -->
<button>Send</button>

Silktide によるテスト方法

各ページで、表示されているボタンとリンクを検出します。ARIA ロールが button または link の要素も含まれます。
aria-label または aria-labelledby で名前を上書きしているコントロールのみをテストします。上書きがなければ、表示テキストがアクセシブルな名前となるため、この達成基準は自動的に満たされます。
コントロールの表示ラベルを読み取ります。これには、そのコントロールのテキストコンテンツと、内部にある画像のが含まれます。2 文字未満のラベルはスキップします。また、アクセシブルな名前が空のコントロールもスキップします（これは他のチェックで扱う別の問題です）。
両方の文字列を正規化します。小文字化、空白の連続の統合、装飾的な句読点の除去を行ったうえで、表示ラベルがアクセシブルな名前に含まれていることを必須とします。
見出しと補足テキストを含むカード形式のリンクでは、代わりに見出しをラベルとして認めます。訪問者が自然に読み上げるテキストは見出しだからです。

トラブルシューティング

アクセシブルな名前が表示テキストより長い

表示テキストがその中に含まれていれば問題ありません。WCAG は、アクセシブルな名前を表示テキストで始めることを推奨していますが、このチェックではどの位置にあっても合格となります。

フォームフィールドがテストされない

テキスト入力などのフォームフィールドでは、表示ラベルはフィールド自体のテキストではなく <label> 要素から取得されます。そのため、このチェックではなく、別のラベル付けチェックで対象となります。