お問い合わせ

レシピを見ながら楽しく実装、フォームのアクセシビリティ！その2

UI開発者 宇賀

4月20日、2016年版のWCAG 2.0達成方法集の日本語訳が公開されました。

WCAG 2.0 達成方法集

前回はlabel要素を適切に用いることでフォームのアクセシビリティを向上させる方法をお伝えしました。

今回は、前回登場しなかったfieldset要素とlegend要素、2つの要素についてご紹介します。

※ この記事は、以前執筆したレシピを見ながら楽しく実装、フォームのアクセシビリティ！その1の続きです
※ この記事に設置されている入力欄に入力された情報が当社に送信されることはありません
※ 作成したページや、本記事の実装例をVoiceOver（macOS、iOS標準搭載）などのスクリーンリーダーで実際に聴いてみると、より直感的に理解が深まります

振り返り

前回登場したチェックボックスのマークアップ例を見てみましょう。

チェックボックス・ラジオボタンでlabel要素を使っている例
<ul>
<li><label><input type="checkbox"><span>選択A</span></label></li>
<li><label><input type="checkbox"><span>選択B</span></label></li>
<li><label><input type="checkbox"><span>選択C</span></label></li>
</ul>

<ul>
<li><label><input type="radio"><span>いずれかを選択</span></label></li>
<li><label><input type="radio"><span>いずれかを選択</span></label></li>
<li><label><input type="radio"><span>いずれかを選択</span></label></li>
</ul>

input要素とそのフォーム関連要素のキャプションになるテキストを、一緒にlabel要素でマークアップすることでラベリングを行っている例です。

このようにすることで、そのinput要素が何についての入力項目であるかが示せるとともに、テキストをクリック（あるいはタップ）してもチェックボックスやラジオボタンにチェックすることができるようになりました。

しかし、この実装例だと1つのinput要素に1つのラベルをつけることができましたが、関連する入力項目のまとまりを示し、そのまとまりが何のグループなのかを示すことができていません。

グループ化し、そのグループが何の塊なのかを示す必要がある具体的な状況は次のような場合です。

チェックボックスの実装例
<ul>
<li><label><input type="checkbox"><span>選択A</span></label></li>
<li><label><input type="checkbox"><span>選択B</span></label></li>
<li><label><input type="checkbox"><span>選択C</span></label></li>
</ul>

<ul>
<li><label><input type="radio"><span>いずれかを選択</span></label></li>
<li><label><input type="radio"><span>いずれかを選択</span></label></li>
<li><label><input type="radio"><span>いずれかを選択</span></label></li>
</ul>

同じキャプションを持つフォーム関連要素が複数存在していて、それぞれが何についての「かんぱち」で、何についての「えんがわ」なのかがわかりません。

こういう場合に、次の例のようなテキストで説明を明記したりすることがあります。

チェックボックスの実装例2

好きな寿司ネタを教えてください（複数回答）

嫌いな寿司ネタを教えてください（複数回答）

<p>好きな寿司ネタを教えてください（複数回答）</p>

<ul>
<li><label><input type="checkbox"><span>かんぱち</span></label></li>
<li><label><input type="checkbox"><span>えんがわ</span></label></li>
<li><label><input type="checkbox"><span>つぶ貝</span></label></li>
</ul>

<p>嫌いな寿司ネタを教えてください（複数回答）</p>

<ul>
<li><label><input type="checkbox"><span>かんぱち</span></label></li>
<li><label><input type="checkbox"><span>えんがわ</span></label></li>
<li><label><input type="checkbox"><span>つぶ貝</span></label></li>
</ul>

このようにすることで、レンダリング上（見た目上）何となくまとまりを示せていて、そのまとまりが何のための入力項目なのかを示せたように感じますね。

しかし、このマークアップだとユーザーエージェントに対してはフォーム関連要素のまとまりも示せておらず、まとまりが何のグループなのかも伝えることができていません。

なぜならば、チェックボックス直前のp要素にはlabel要素のようにその後に続くフォーム関連要素との関連性を示す仕様が存在しないからです。

このようにいくつかのフォーム関連要素をまとめてグループ化し、さらにそのグループのキャプションを明示する場合、そのため専用の要素を用いることができます。

それが、fieldset要素とlegend要素です。

fieldset要素とlegend要素も使ってみよう

共通した名前を持つ複数のフォーム関連要素をグループ化する際に用いることができるfieldset要素とlegend要素ですが、これらをうまく用いることで先述のチェックボックスやラジオボタンをまとめることができます。

チェックボックスをfieldset要素でグループ化している例
好きな寿司ネタを選択してください（複数回答） 
<fieldset>
<legend>好きな寿司ネタを選択してください（複数回答）</legend>

<ul>
<li><label><input type="checkbox"><span>かんぱち</span></label></li>
<li><label><input type="checkbox"><span>えんがわ</span></label></li>
<li><label><input type="checkbox"><span>つぶ貝</span></label></li>
</ul>
</fieldset>

上記のようにすることで、1つのフォーム関連要素のラベルが「かんぱち」であった場合、「何について」の選択項目「かんぱち」なのかを伝えることができます。

もちろんこれはラジオボタンにも有効です。1つの質問に対していくつかの解答の中からどれかを選択してほしい場合などはこのfieldset要素とlegend要素を組み合わせることが重要です。

ラジオボタンをfieldset要素でグループ化している例
好きな寿司ネタを選択してください（1つ） 
<fieldset>
<legend>好きな寿司ネタを選択してください（1つ）</legend>

<ul>
<li><label><input type="radio"><span>かんぱち</span></label></li>
<li><label><input type="radio"><span>えんがわ</span></label></li>
<li><label><input type="radio"><span>つぶ貝</span></label></li>
</ul>
</fieldset>

稀にヘディングコンテンツ（h1-h6要素）でlegend要素のような意味合いをもってマークアップしている例がありますが、このような場合は専用のセマンティクスを持つlegend要素を用いるべきです。

また、選択させたくない項目があった場合、そのフォーム関連要素にdisabled属性を付与することでユーザーからの操作を受け付けなくなりますが、グループすべての入力項目を非活性状態にしたい場合、fieldset要素を用いることでまとめて選択不可にすることもできます。

選択項目のうち1つが選択できない例
ご希望のノベルティを選択してください（1つ） 
<fieldset>
<legend>ご希望のノベルティを選択してください（1つ）</legend>

<ul>
<li><label><input type="radio"><span>ノート2冊セット</span></label></li>
<li><label><input type="radio"><span>ボールペン15本セット</span></label></li>
<li><label><input type="radio" disabled><span>ギフト券500円分（在庫切れ）</span></label></li>
</ul>
</fieldset>
選択項目のうちすべてが選択できない例
ご希望のノベルティを選択してください（1つ） 
<fieldset disabled>
<legend>ご希望のノベルティを選択してください（1つ）</legend>

<ul>
<li><label><input type="radio"><span>ノート2冊セット（在庫切れ）</span></label></li>
<li><label><input type="radio"><span>ボールペン15本セット（在庫切れ）</span></label></li>
<li><label><input type="radio"><span>ギフト券500円分（在庫切れ）</span></label></li>
</ul>
</fieldset>

以上のように、複数のチェックボックスやラジオボタンが登場する場合には、このfieldset要素とlegend要素を用いてマークアップできるとよいと思います。

また、必要に応じてfieldset要素は入れ子にすることができます。入れ子にしすぎるとユーザーを混乱させてしまうため、「必要に応じて」妥当なマークアップができるとよいですね。

参考リンク

2017年の記事一覧に戻る