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

本達成基準では、ウェブページで文字の視覚的な見た目を変えて情報を伝達している際には、テキストでその情報を明確に提示することが求められています。フォントの書体、サイズ、下線、取り消し線および色などを変えることによって、文字に視覚的なバリエーションをもたせることができます。このようなバリエーションの変化を用いて情報を伝達している場合、その変化を知覚できないユーザーも理解できるように、同じ情報をテキストで補足しなければなりません。ただし、a要素のリンク(通常は、青字で下線付きのテキスト)は除きます。

例えば、音声ブラウザやスクリーンリーダーがコンテンツを読み上げる際には、文字が太字であることや赤字であることなどは読み上げられません。そのため、文字の見た目が他とは異なっていることによって何らかの情報が伝えられている際には、テキストで補足して音声で読み上げてもその情報が理解できるようにする必要があります。もし強調するために文字の見た目を変えているのであれば、さらにem要素やstrong要素でマークアップします。

文字の見た目を他とは異なるものにすることで、多くのユーザーはその違いからコンテンツをより理解しやすくなったり、必要な情報を見つけやすくなったりします。あわせて、その違いが分からないユーザーには、テキストで補足したりマークアップしたりすることによって、その違いによって伝えている情報が理解できるようにします。

なお、色の違いを用いて情報を伝えている際には、「7.1.4.1 色の使用に関する達成基準」も参照してください。

事例と実装

良い例 1:太字

スクリーンショット:太字だけでなく「(必須)」と記述した必須項目

説明文に「太字は必須項目です。」とあり、必須である項目名のテキストが太字になっているほか、「名前(必須)」と必須項目であることがテキストで明記されています。ユーザーは、文字の見た目の違いが分からなくても、この項目が必須項目であることが分かります。さらに、必須項目であることを強調するために、strong要素でマークアップされています。

ソースコード例

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

悪い例 1:太字

スクリーンショット:太字だけで示した必須項目

説明文に「太字は必須項目です。」とあるのは同じですが、必須である項目名の「名前」というテキストが太字になっているだけです。見た目の違いが分からないユーザーには、この項目が必須項目であることが分かりません。

良い例 2:赤字

スクリーンショット:赤字だけでなく「(必須)」と記述した必須項目

説明文に「赤字は必須項目です。」とあり、必須である項目名のテキストが赤字になっているほか、「名前(必須)」と必須項目であることがテキストで明記されています。ユーザーは、文字の色の違いが分からなくても、この項目が必須項目であることが分かります。さらに、必須項目であることを強調するために、strong要素でマークアップされています。

ソースコード例

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

悪い例 2:赤字

スクリーンショット:赤字だけで示した必須項目

説明文に「赤字は必須項目です。」とあるのは同じですが、必須である項目名の「名前」というテキストが赤字になっているだけです。色の違いが分からないユーザーには、この項目が必須項目であることが分かりません。

参考情報

関連する達成基準

等級A