web-dev-qa-db-ja.com

すでにラベル付けされた入力要素で「aria-labelledby」を使用する目的は？

多くのARIAデモWebサイトでは、次のようなコードを使用しています。

<label for="name" id="label-name">Your Name</label>
<input id="name" aria-labelledby="label-name" type="text">


しかし、この場合、aria-labelledby属性を使用する目的は何ですか？ input要素は、label属性を使用しているfor要素によって既にラベル付けされていますよね？

htmllabelaccessibilitywai-aria
76
Ian Y.

Mozilla開発者ページ に使用例がいくつかあります。おそらくそれらの例の中で最も良いのは、ポップアップメニューを親メニュー項目に関連付けるために使用される場合です。これは、ページの例7です。

<div role="menubar">  
    <div role="menuitem" aria-haspopup="true" id="fileMenu">File</div>  
    <div role="menu" aria-labelledby="fileMenu">  
        <div role="menuitem">Open</div>  
        <div role="menuitem">Save</div>  
       <div role="menuitem">Save as ...</div>  
       ...  
    </div>  
    ...

ARIA属性は、アクセシブルリッチインターネットアプリケーションの構築に最も役立つ傾向があります：標準のセマンティックHTMLに固執している限り-標準ラベル付きのフォームを使用-まったく必要ないはずです。したがって、LABEL/INPUTペアで使用する理由はありません。しかし、「リッチUI」をゼロから構築する場合（DIVおよびjavascriptが対話性を追加する他の低レベル要素）、スクリーンリーダーに高レベルの意図を知らせるために不可欠です。

63
BrendanMcK

新しいものには常にUAサポートの問題があるため、開発者はプログレッシブ拡張を検討しています。このARIA手法は、「for」属性を廃止する機能を提供し、他の要素がリッチフォームの一部になることを可能にします。これらの手法は一般的な慣例になります。

4
user2323922