web-dev-qa-db-ja.com

aria-labelとlabelの両方が読み取られない

次のマークアップを検討してください。

<label for="i1" class="inforLabel">This is a label</label>
<input id="i1" type="text" class="inforTextbox" aria-label="Title, not label" />

私にとって、このマークアップは、カスタムツールチップコントロールの後に生成されるものです。 IEのJAWSで見られる問題は、「ラベルではなくタイトル」しか読み取れないことですが、他のスクリーンリーダーでは、たとえば、ラベルとテキストボックスの両方にナレーションがありますaria-labelが読み取られます。私はそれが両方を読むべきだと思います。

これは設定ですか、それともバグですか？それとも誰かがお勧めできるものは他にありますか？

accessibilitywai-ariascreen-readersjaws-screen-reader
12
Tim

すでにDOMに説明的なラベル要素がある要素の場合、aria-labelledbyの代わりにaria-label属性を使用するのが最善です。

https://www.w3.org/TR/wai-aria/#aria-labelledby

ドキュメントから：

Aria-labelledbyの目的は、aria-labelの目的と同じです。これは、ユーザーにオブジェクトの認識可能な名前を提供します。

ラベルテキストが画面に表示されている場合、作成者はaria-labelledbyを使用する必要があり、aria-labelを使用しないでください。 aria-labelは、画面にラベルを表示できないようなインターフェイスの場合にのみ使用してください。

WAI-ARIA仕様は自由に解釈できるため、標準の推奨事項に従わない場合、個々のスクリーンリーダーとブラウザの組み合わせで一貫性のない結果が生じる可能性があります。

一般に、複数のラベルをアクセス可能な要素に関連付けることはお勧めできません。ラベルは簡潔にする必要があります。説明を追加したい場合は、aria-describedbyを使用することもできます。

https://www.w3.org/TR/wai-aria/#aria-definedby

どちらの場合も、ラベルにidを付ける必要があります。

<label id="label1" for="input1" class="inforLabel">This is a label</label>
<input id="input1" type="text" class="inforTextbox" aria-labelledby="label1" />

オプションで、複数の要素が必要な場合は、1つの要素を画面外に置いて、それらをdivに配置することができます。

<div id="accessible-label1">
  <label for="input1" class="inforLabel">This is a label</label>
  <span class="offscreen">Supplementary text</span>
</div>
<input id="input1" type="text" class="inforTextbox" aria-labelledby="accessible-label1" />

オフスクリーンクラス要素を画面外に配置するための適切なCSSを使用して、これはaccessible-label1の子のテキストコンテンツを組み合わせてaria-labelとして使用する必要があります。繰り返しますが、aria-describedbyの使用を検討してください。

12
Nick