web-dev-qa-db-ja.com

aria-labelとaria-labelledbyの違い

aria-属性でゾーンをマークする2つの方法を見つけました。

最初の1つ：

<div class="main" role="main" aria-label="Search results">
    <a href="">Blah-blah</a>

二つ目：

<div class="main" role="main" aria-labelledby="res1">
    <h2 id="res1" class="a11y">Search results</h2>
    <a href="">Blah-blah</a>

JAWSはそれらをまったく同じように読み取ります。それで、違いは何ですか、そしてあなたは何を選びますか？

javascriptcssscreen-readersaccessibility
27
Varvara Stepanova

これサイトが答えの理由を示します：-

理論的には、テキストが視覚的に画面のどこかにあり、この形式が望ましい場合は、aria-labelledbyを使用する必要があります。画面にラベルを表示することができない場合にのみ、aria-labelを使用する必要があります。

ただし、現在のサポートでは、ラベルを非表示にする必要がある場合でも、常にaria-labelledbyを使用する必要があります。少なくともJAWS 12とVoiceOverは両方ともaria-labelを期待どおりに読み取りますが、aria-labelが使用されている場合、VoiceOverは階層を正しく読み取らないことがわかります。例えば：

<p id="group1">Outer group</p>
<p id="item1">First item</p>
<div role="group" aria-labelledby="group1">
<a href="javascript:" role="button" aria-labelledby="item1">Item Content</a>
</div>

ここではすべてaria-labelledbyを使用しており、VoiceOverはボタンを「最初の項目の外部グループボタン」として読み取ります。つまり、ボタンのラベル、グループのラベル、そしてオブジェクトのタイプです。

ただし、たとえばaria-labelを使用するように要素を変更すると、次のようになります。

<p id="item1">First item</p>
<div role="group" aria-label="Outer group">
<a href="javascript:" role="button" aria-labelledby="item1">Item Content</a>
</div>

VoiceOverはボタンを単純な「最初のアイテムボタン」として読み取ります。どのアイテムがaria-labelを使用するかは問題ではないようです。階層のどこかにある場合、ボタン自体のラベルのみが読み取られます。

[〜＃〜] mdn [〜＃〜] から：-

aria-labelledby属性は、オブジェクトのラベルである要素のIDを示すために使用されます。これは、ウィジェットまたはグループとそのラベルの間の関係を確立するために使用されます。スクリーンリーダーなどの支援技術のユーザーは、通常、画面の領域間をタブで移動してページを移動します。ラベルが入力要素、ウィジェット、またはグループに関連付けられていない場合、ラベルはスクリーンリーダーで読み取られません。

そして this ：-

aria-label属性は、現在の要素にラベルを付ける文字列を定義するために使用されます。画面にテキストラベルが表示されない場合に使用します。 （要素にラベルを付ける表示テキストがある場合は、代わりにaria-labelledbyを使用してください。）

29
Rahul Tripathi