2

下の画像の 2 行目のようなフォームの 3 列をレイアウトしようとしています。

ここに画像の説明を入力

ラベル テキストとフォーム要素はサイズとタイプが異なる可能性があるため、必要に応じてクロス ブラウザーで機能するように配置するのは難しいことがわかっています。いくつかの解決策を試していますが、1 つの可能性は、ラベル用に別の行を、入力要素用に別の行を用意することです。次に、ラベルを下に垂直方向に揃え、入力要素を上に揃えます。

ラベルと入力要素がソース内で隣り合っていなくても、ラベルに必要な 'for' および 'aria' 属性を入力要素に関連付けるために含めた場合、スクリーン リーダーにとって十分でしょうか? アクセシビリティは、私たちが考慮しなければならないものです。

アドバイスありがとうございます。下のフィドル

http://jsfiddle.net/wYdZr/5/

    <div class="container_12" style="background:green;">
    <div class="grid_4 lbl"   >
          <label for="firstName">TR 1 TD 1</label>
    </div>
    <div class="grid_4 lbl">
            <label for="lastName" >Bonorum Fermentum Tortor Adipiscing Pharetra</label>
    </div>
    <div class="grid_4 lbl">
            <label>Bonorum Fermentum Tortor Adipiscing Pharetra Bonorum Fermentum Tortor Adipiscing Pharetra</label>

    </div>
    <div class="clear"></div> 
</div>
<div class="container_12" style="background:yellow;">
    <div class="grid_4">
          <input type="text" id="firstName"/>
    </div>
    <div class="grid_4"><textarea id="lastName"></textarea>
    </div>
    <div class="grid_4">
            <input type="text" id="phone" />
    </div>
</div>
4

2 に答える 2

4

ラベルと入力要素がソース内で隣り合っていなくても、ラベルに必要な 'for' および 'aria' 属性を入力要素に関連付けるために含めた場合、スクリーン リーダーにとっては十分でしょうか?

はい、それがそもそもfor属性がある理由です。

もちろん、一部のスクリーン リーダー (バージョン) が をサポートしていない可能性は常にありますforが、それは少数派であり、エラーは明らかに彼らの側にあります。

このfor方法は、WCAG 2.0 テクニックH44: Using label elements to associated text labels with form controlsにも記載されています。この特定の手法のテストでは、ラベルの位置がチェックされることに注意してください。

  • label 前 input( text, file, password), textarea,select
  • label input( checkbox, radio)の後

ただし、これはこの特定の手法の要件にすぎないため、関連する成功基準を満たす他の手法や方法があるため、必ずしもこれに従う必要はありません。

于 2013-10-10T08:39:01.733 に答える
0

div なしで、HTML テーブルを簡単に使用できます。

<table>
<tr>
<td></td>
</tr>
</table>

これを確認してください：http://jsfiddle.net/wYdZr/7/

それがあなたを助けることを願っています!

于 2013-10-09T14:51:12.003 に答える