5

私の Web アプリケーションでは、以下の例のようにレイアウトされたフォームを使用しています...

First Name      [____________]
Last Name       [____________]
Gender          () Male  () Female

私が使用するマークアップは次のようなものです...

<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<label>Gender</label>
<fieldset>
  <legend>Gender</legend>
  <input type="radio" name="sex" id="sex-m" value="m">
  <label for="sex-m">Male</label>
  <input type="radio" name="sex" id="sex-f" value="f">
  <label for="sex-f">Female</label>
</fieldset>

次のような問題があり、解決方法がわかりません...

  1. ラジオ ボタンのグループ全体に他のフィールドと同じようにラベルを付けたいのですが (上の図のように)、ラベルをリンクするものはありません (つまり、グループ内の各ラジオには個々のラジオ ボタンの値のためだけの独自のラベル) "for" 属性のないラベルは、アクセシビリティ コンプライアンスに合格しません。

  2. フィールドセットの <legend> 要素は、ラベルの機能を複製しているようです。これは本当に必要ですか？

<legend> タグをラベルのようにスタイリングし、ラジオ ボタン グループのラベルを完全に省略することを考えていましたが、それは少しハックに思えますし、コードの他の場所でも複雑さを導入します (これは<label> 要素に依存して、気の利いた検証メッセージのマークアップやその他のさまざまなことを行います)

前もって感謝します。

4

2 に答える 2

8

Ssollingerの答えの最初の部分は正しいです：

コードは次のようになります。

<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<fieldset>
  <legend>Gender</legend>
  <input type="radio" name="sex" id="sex-m" value="m">
  <label for="sex-m">Male</label>
  <input type="radio" name="sex" id="sex-f" value="f">
  <label for="sex-f">Female</label>
</fieldset>

支援技術が男性のラジオボタンを押すと、ほとんどの場合、「性別：男性のラジオボタン1/2が選択されていません」と表示されます。

次に、、、ラベル、およびにfieldsetCSSを使用できます。メモリが正しく機能する場合、フィールドセットはスタイルに負担をかける可能性があるため、最終的にはそれに追加する可能性があります。legendinputs<div>

<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<fieldset>
  <legend>Gender</legend>
  <div>
  <input type="radio" name="sex" id="sex-m" value="m">
  <label for="sex-m">Male</label>
  <input type="radio" name="sex" id="sex-f" value="f">
  <label for="sex-f">Female</label>
  </div>
</fieldset>

これを追加し<div>ても、アクセシビリティに影響はありません。

ssollingerの回答のコメントのように、fieldsetとlegendアプローチをダンプすることはできますが、アクセス可能にするためにすべてをビルドする必要があります。これは、ビルドアウトの例です。

于 2012-10-26T15:16:55.370 に答える
1

タグをラベルのようにスタイリング<legend>し、ラジオ ボタン グループのラベルを完全に省くことを考えていました...</p>

これが正しい方法です。「性別」はラベルではなく、ラジオ ボックスのラベルは「男性」と「女性」です。「性別」は、ラジオ ボタンをグループ化するフィールドセットの凡例です。このフォームを実装する正しい方法は、"Gender" ラベルを削除し、フィールドセットをlegend"Gender" のままにすることです。

<div>技術的には、おそらくラジオボタンの周りに を追加してfor=、「性別」ラベルの をそれに向けることができますが、これはアクセシビリティの問題を引き起こすと確信しています (ただし、スクリーンリーダーで試したことはありません)。 「性別」のラベルを取り除くことを強くお勧めします。

于 2012-10-26T12:55:09.077 に答える