GTM-MML4VXJ
Skip to main content
  1. ホーム >
  2. 企業情報 >
  3. 事業方針 >
  4. 技術・研究開発・デザイン >
  5. デザイン >
  6. ユニバーサルデザイン >
  7. 7.2.4.6 見出し及びラベルに関する達成基準

7.2.4.6 見出し及びラベルに関する達成基準

見出し及びラベルは、主題又は目的を説明していなければならない。

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

解説

各セクションの見出しおよびフォーム・コントロールの「ラベル」は、それぞれの主題や目的を説明したものである必要があります。

まず、見出しについては、等級Aの「7.1.3.1 情報及び関係性に関する達成基準」では、見出しがあればh1~h6要素を用いてマークアップすることを求めています。そして、等級AAの本達成基準では、ユーザーがそのセクションにどのような情報があるのかを理解しやすいように見出しの文言を記述することを求めています。

ユーザーは、目的のコンテンツがあるかどうかを探すときに、まずウェブページにある見出しを確認します。これは、スクリーンリーダーを使用しているユーザーの場合も同じで、例えばHキーを押すと見出しだけを拾い読みしていく機能のあるスクリーンリーダーがあります。ユーザーがそのウェブページで目的のコンテンツがあるかどうかを判断しやすくするために、見出しはそのセクションの内容を示す文言にしなければなりません。

次に、フォーム・コントロールについては、等級Aの「7.1.3.1 情報及び関係性に関する達成基準」では、「ラベル」となるテキストをlabel要素またはtitle属性を用いて特定することを求めています。そして、等級AAの本達成基準では、ユーザーがそのフォーム・コントロールを識別できるように「ラベル」の文言を記述することを求めています。

例えば、テキストフィールドであれば、ユーザーがそこに何を入力すればよいのかを理解できるように「ラベル」を記述します。また、そのテキストフィールドへの入力が必須であれば、それが分かるように記述する必要があります。

事例と実装

良い例 1:見出し

スクリーンショット:段落の見出し「達成基準と等級」

段落の見出しに「達成基準と等級」と記述されており、その段落にあるコンテンツの主題を説明している。

良い例 2:テキストフィールドのラベル

スクリーンショット:テキストフィールドのラベル「氏名[必須]」

テキストフィールドのラベルに「氏名[必須]」と記述されており、氏名を入力するテキストフィールドであることと必須項目であることを説明している。

参考情報

関連する達成基準

等級A
等級AAA