fieldsetおよびlegend要素を使用してHTMLフォームコントロールをグループ化する

fieldset要素とlegend要素を一緒に使用して、HTMLフォームの意味的に関連する入力フィールドの名前付きグループを作成する必要があります。 これにより、ユーザーは入力フィールドの関係を理解できます。



グループ化がどのようにユーザーに表示されるかは、主に目が見えるかどうかによって異なります。 ほとんどのグラフィカルブラウザーは、デフォルトでフィールドセット要素の周囲にフレームを描画し、このフレームの上部に凡例を表示しますが、読者は各フィールドセットの先頭またはその内部にある各コントロールの前にある凡例をテキストを読み取ります。 結果として、短くして、凡例とラベルのテキストが一緒に発音された場合にどのように結合されるかを考えた方がよいでしょう。

fieldsetを使用して無線をグループ化する例を次に示します。

1. < フィールドセット >
2. < 凡例 >好きな色< / / 凡例 >
3. < 入力 タイプ = 「無線」 名前 = 「fav-col」 id = 「fav-col-1」 値 = 「red」 >
4. < label for = "fav-col-1" >赤< / / label >
5. < 入力 タイプ = 「ラジオ」 名前 = 「fav-col」 id = 「fav-col-2」 値 = 「green」 >
6. < label for = "fav-col-2" >緑< / / label >
7. < 入力 タイプ = 「ラジオ」 名前 = 「fav-col」 id = 「fav-col-3」 値 = 「blue」 >
8. < label for = "fav-col-3" >青< / / label >
9. < / / フィールドセット >

一般に、ページのコンテンツをフレーム化する場合は、フィールドセットと凡例を使用しないでください（翻訳者から：非常に予期しない結論。だれが考えていたでしょうか？）。フォーム内のコントロールを論理的にグループ化するために使用する必要があります。凡例では簡潔にする必要があります。

追加資料：

• フィールドセット、凡例、リーダー（ フィールドセット、凡例、 スクリーンリーダー ）
• アクセシビリティで検索-FIELDSET LEGENDS（ アクセシビリティが多すぎる-FIELDSET LEGENDS ）
• WCAG 2.0、H71： フィールドセットおよび凡例要素を使用してフォームコントロールのグループの説明を提供します ）

この投稿はメモです。 背景： Web開発者およびWebデザイナー/レイアウトデザイナー向けのメモ 。

関連ノート

• CSSを使用したフォームコントロールのスタイル設定。 改訂版。 （ CSSによるフォームコントロールのスタイル設定、再訪 ）
• CSSでフォームコントロールをスタイリングすることが問題になるのはなぜですか。 （ CSSでフォームコントロールをスタイリングすることが問題になる理由 ）
• フォームコントロールに適切にラベルを付ける
• フォームフィールドのルックアンドフィールをカスタマイズしないでください

あとがき。

ウェブサイトのアクセシビリティのトピックに興味があります。 特に視覚障害またはその欠如のあるユーザー向け。 そのような人々が実際に使用している無料のスクリーンリーダー、それらと連携する機能を説明する記事、このトピックに関する情報を誰かが知っている場合は、私に書いてください。 そして、自分で情報を受け取るので、この問題を強調する記事を書きます。

翻訳者について。

私はカラスです。 そしてレイヴンは私です。 サイレントインプとして知られる場所。

私はフリーランスのタイプセッター、プログラマーです。

私は本当に高品質のレイアウトを作るのが好きです。

私は小さなウェブサイトも持っています 。

私はこれらの記事を自分で読んだので、翻訳を行っています。時々、周りの人々のために何か良いことをしたいのです。 この記事があなたに喜びを与え、さらにあなたに役立つことを願っています。



構文を強調するために、highlight.hohli.com /リソースが使用されました。