web-dev-qa-db-ja.com

コンテンツから意味を導き出せないリンクにアクセス可能なラベルを提供する必要がありますか？

たとえば、テキスト自体ではその意味を説明するのに十分ではないリンクがあるとします。

<div>To complete your transaction, please click <a href="#">here<a>.</div>

を使用しているユーザーが、支援ナレーションインターフェイスとTabボタンを使用してページを移動するとします。

議論のために、提案された解決策 アンカー要素自体の中に意味のあるテキストを置く を無視しましょう。

次善の解決策は何ですか？意味のあるテキストを含むaria-labelを追加しますか？例えば：

<div>To complete your transaction, please click <a aria-label="To complete your transaction, please click here">here<a></div>

これはユーザーにとって冗長ですか？より良い代替案はありますか？

seoaccessibilityanchor-textwcag
1
Dirk Diggler

まず、<a>タグが必要であることを確認します。リンクが別のページに移動しない場合は、<button>タグを使用する必要があります。

はい、説明したようにaria-labelを使用できます。また、すべてのスクリーンリーダーがaria-labelがない場合に使用するため、代わりに通常の<a href="#" **title=""**>タイトルタグを使用することもできます。鬼ごっこ。

ただし、あなたの例では、強調しようとしているラベルテキストが既にページ上にあるため、属性aria-labelledby = ""を使用する必要があるため、より堅牢で受け入れられた方法があります。代わりに。

これは、正確なシナリオ例の正しい解決策です（関連するテキストが既にページ上にあるため）。

<div id="your-id">To complete your transaction, please click <a aria-labelledby="your-id">here<a></div>

Aria-label = ""は、目的のテキストがページに見つからない場合にのみ使用してください。

そのテキストがページのどこかにある場合でも、aria-labelledby = ""を使用できます。たとえば、次のようにそのテキストをspanタグでラップするだけです。

<span id="your-id">To complete your transaction...</span>
1
Richard