GTM-MML4VXJ
Skip to main content
  1. ホーム >
  2. 企業情報 >
  3. 事業方針 >
  4. 技術・研究開発・デザイン >
  5. デザイン >
  6. ユニバーサルデザイン >
  7. 7.1.3.1 情報及び関係性に関する達成基準:フォーム・コントロール

7.1.3.1 情報及び関係性に関する達成基準:フォーム・コントロール

表現を通じて伝達されている情報、構造及び関係性は、プログラムが解釈可能でなければならない。プログラムが解釈可能にすることができないウェブコンテンツ技術を用いる場合は、それらはテキストで提供されていなければならない。

引用元:JIS X 8341-3:2010「高齢者・障害者等配慮設計指針-情報通信における機器、ソフトウェア及びサービス-第3部:ウェブコンテンツ」

解説

HTMLでは、「表現を通じて伝達されている情報、構造及び関係性」を適切な要素や属性を用いてマークアップして、「プログラムが解釈可能」にしなければなりません。

「プログラムが解釈可能」というのは、ブラウザや支援技術(例:スクリーンリーダー)が、ソースコードからコンテンツの「情報、構造及び関係性」を解釈できることを指します。HTMLの場合には、仕様で定められている要素や属性を用いてマークアップすることによって、見た目などの表現に関係なく、ブラウザや支援技術(例:スクリーンリーダー)がコンテンツの「情報、構造及び関係性」を解釈することが可能になります。

本達成基準では、ウェブページにフォーム・コントロールがある場合には、その見た目だけでなく、ソースコードで次のような「情報、構造及び関係性」をマークアップすることが求められています。

  • フォーム・コントロールとそのラベルとなるテキスト:label要素またはtitle属性
  • フォーム・コントロールのグループとラベル:fieldset要素とlegend要素、optgroup要素とlabel属性

まず、フォーム・コントロールとそのラベルとなるテキストは、見た目に隣接した位置にレイアウトするだけでなく、ソースコードでもその「関係性」を「プログラムが解釈」できるようにマークアップします。具体的には、ラベルとなるテキストがある場合には、label要素を用いてラベルとなるテキストをマークアップします。また、ラベルとなるテキストがない場合には、フォーム・コントロールの要素のtitle属性にラベルとなるテキストを記述します。これによって、フォーム・コントロールのラベルを特定できるようになります。

次に、グループ化できるフォーム・コントロールの例としては、同じname属性値を持つtype="radio"またはtype="checkbox"のinput要素のグループが挙げられます。また、例えば住所を入力するテキストフィールドがいくつかに分かれている場合なども同様です。フォーム・コントロールのグループはfieldset要素でマークアップし、そのラベルをlegend要素を用いて提供します。

また、セレクトメニューのselect要素で選択肢を提示するoption要素の数が多く、複数のグループに分けることができる場合には、optgroup要素を用いてoption要素の選択肢をグループ化することが可能です。グループのラベルは、optgroup要素のlabel属性を用いて提供します。

このように、「表現を通じて伝達されている情報、構造及び関係性」を「プログラムが解釈可能」にすることによって、次のような場合でもユーザーがコンテンツの「情報、構造及び関係性」を知覚することができるようになります。

  • コンテンツが、音声ブラウザやスクリーンリーダーによって読み上げられたとき
  • スタイルシートが、ユーザー・スタイルシートに置き換えられたとき

つまり、見た目の表現だけではなく、HTMLのソースコードでもコンテンツの「情報、構造及び関係性」が分かるように、適切な要素や属性を用いてマークアップすることによって、ユーザーの様々な利用環境や多様化する閲覧デバイスに対応することが可能となります。

事例と実装

良い例 1:フォーム・コントロールのラベル

sc7131-5

「名前[必須]」というラベルのテキストをlabel要素でマークアップすることによって、テキストフィールドと関連付ける。

ソースコード例

< label for="name" >名前[必須]:< /label >
< input type="text" size="50" name="username" id="name" / >

良い例 2:フォーム・コントロールのグループ化

sc7131-6

同じname属性値をもつラジオボタン一式をfieldset要素によってグループ化する。多くのブラウザのデフォルト表示では、fieldset要素によってグループ化したフォーム・コントロール一式が枠で囲まれる。そして、legend要素を用いて、「年齢」というグループのラベルを提供する。

ソースコード例

< fieldset >
< legend >年齢< /legend >
< input name="age" type="radio" id="r1" / >< label for="r1" >10代< /label >
< input name="age" type="radio" id="r2" / >< label for="r2" >20代< /label >
< input name="age" type="radio" id="r3" / >< label for="r3" >30代< /label >
< input name="age" type="radio" id="r4" / >< label for="r4" >40代< /label >
< input name="age" type="radio" id="r5" / >< label for="r5" >50代以上< /label >
< /fieldset >

良い例 3:セレクトメニューの選択肢のグループ化

sc7131-7

select要素内のoption要素で提供している選択肢をoptgroup要素を用いてグループ化する。

ソースコード例

< label for="pref" >都道府県< /label >
< select id="pref" name="pref" >
< option value="" selected="selected" >選択してください< /option >
< optgroup label="北海道・東北" >
< option value="1" >北海道< /option >
< option value="2" >青森県< /option >
< option value="3" >秋田県< /option >
< option value="4" >岩手県< /option >
< option value="5" >山形県< /option >
< option value="6" >宮城県< /option >
< option value="7" >福島県< /option >
< /optgroup >
< optgroup label="関東" >
< option value="8" >茨城県< /option >
< option value="9" >栃木県< /option >
・・・

参考情報

関連する達成基準

等級A