情報及び関係性

解説

ある利用者にとって、なんらかの情報の役割が理解できるとき、そのほかの利用者にも、その情報の役割を理解できるようにしてください。晴眼者であれば、大きい文字を見たら、「これは見出しだ」と理解できますが、スクリーンリーダを利用している視覚障害者には、「文字の大きさ」という情報が与えられないため、何が見出しなのかわからなくなってしまいます。

たとえば見出し(<h*><th>など)でマークアップすることで、機械可読性が確保され、様々な利用者に対応できるようになります。

また、「<p>の文字を大きくして見出しとする」、「文字を小さくするために<h6>を使う」などの実装はプログラムによる解釈を阻害するものなので不適合になります。

プログラムによる解釈を担保した実装をするのが難しい文書の場合、「行頭のアスタリスクは見出しのレベルを表します」「括弧内にお名前を入力してください」といった、テキストによる説明を明示することで達成できますが、原則、HTMLの意味のあるマークアップを優先してください。

HTML 4.01 及び XHTML 1.x を含むマークアップ言語の場合、b要素およびi要素は、強調目的の場合はstrong/em要素に置き換えてください。HTML5では、本チェッカーでは、警告を出しません。

strike要素、basefont要素、center要素、font要素は、代わりにCSSを用いて構造と表現を分離するようにしてください。sやstrikeの場合はdel要素に置き換えても良いでしょう。

見出しはh1〜h6が、順序良く降順になっているべきです。h1が大見出し、h2が中見出し、h3が小見出しだとすると、h1のつぎにh3が現れるのは不自然です。

formを使う時には、labelを使うことで、formのアクセシビリティが向上します。labelは実はHTML4.01では、複数のラベル可能要素を内包しても文法違反ではありませんが、アクセシビリティ・サポーテッドがあまり確かでないので、特に理由がなければ1対1対応にしておいたほうが安全です。

多くのスクリーンリーダが、input要素等のtitle属性値をラベルとして読み上げますが、labelもtitleも書いている場合は、これを一致させておいたほうが安全です(現時点ではほとんどの場合、titleが優先して読み上げられるようです)。その観点からツールチップ表示を期待したtitle属性に関しては、注意してください。また、ツールチップ表示を期待している場合は、hoverでしか表示しないことが多く、focusでは表示されないことが多いようです。この点にも注意を払っておいてください。

formを用いる際、placeholder属性値をlabelとして用いることはできません。placeholder属性は入力されると、見えなくなくなるので、使いづらく、また読み上げ対象にならない環境もあります。

WAI-ARIA属性のaria-labelとaria-labelledbyの普及も進んでいますが、現時点では、スクリーンリーダのことを考えるとlabel(あるいはtitle)があるほうが安全です。

form類は、checkboxやradioなどは、labelでマークアップして、関連付けをしてください。こうすることで、スクリーンリーダでは、それぞれの項目がわかりやすくなり、マウスなどのポインティング・デバイスを使いづらい利用者にとっては、クリックしやすくなります。

原則 知覚可能 情報及びユーザインタフェース コンポーネントは、利用者が知覚できる方法で利用者に提示可能でなければならない。
ガイドライン 適応可能 情報、及び構造を損なうことなく、様々な方法 (例えば、よりシンプルなレイアウト) で提供できるようにコンテンツを制作すること。
達成基準 情報及び関係性
(1.3.1 A)
何らかの形で提示されている情報、 構造、及び関係性は、プログラムによる解釈が可能である、又はテキストで提供されている。

達成方法集のURL