87

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

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


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

4

2 に答える 2

71

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 を追加して対話機能を追加する場合)、スクリーン リーダーに上位レベルの意図が何であるかを知らせるために不可欠です。

于 2012-06-22T20:13:55.197 に答える
3

新しいものには常に UA サポートの問題があるため、開発者はプログレッシブ エンハンスメントに目を向けます。この ARIA テクニックは、「for」属性をなくす機能を提供し、他の要素をリッチ フォームの一部にすることができます。これらの手法は一般的な方法になります。

于 2013-06-13T15:40:36.983 に答える