GTM-MML4VXJ
Skip to main content
  1. ホーム >
  2. 企業情報 >
  3. 事業方針 >
  4. 技術・研究開発・デザイン >
  5. デザイン >
  6. ユニバーサルデザイン >
  7. 7.1.1.1 非テキストコンテンツに関する達成基準:画像

7.1.1.1 非テキストコンテンツに関する達成基準:画像

利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たす代替テキストを提供しなければならない。ただし、次の場合は除く。

d) 感覚的
非テキストコンテンツが、特定の感覚的体験をつく(創)り出すことを主に意図しているとき、代替テキストは、少なくともその非テキストコンテンツを識別できる説明を提供している。

f) 装飾、整形及び非表示
非テキストコンテンツが、装飾だけを目的にしているとき、見た目の整形のためだけに用いられているとき、又は利用者に提供されるものではないとき、支援技術が無視できるように実装されている。

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

解説

非テキストコンテンツ」を使用する際には、「代替テキスト」を提供しなければなりません。

「非テキストコンテンツ」の代表的なものとして、HTMLのウェブページではimg要素を用いて提供される画像があります。「代替テキスト」は、画像を視覚的に知覚できないユーザーのために、alt属性などを用いてその画像が伝えている情報を提供するテキストのことを指します。

alt属性値として記述された「代替テキスト」は、例えば次のようにしてユーザーに提供されます。

  • 音声ブラウザやスクリーンリーダーが合成音声に変換して読み上げる
  • 点字ピンディスプレイが点字に変換する
  • テキストブラウザが画像の代わりに表示する

また、ブラウザが画像を読み込み終えるまでの間やユーザーがブラウザの設定を変更して画像を非表示にしているときにも、画像の代わりに「代替テキスト」が表示されます。そのほか、検索ロボットが「代替テキスト」から画像の伝えている情報を取得することもあります。その場合、代替テキストを記述することによって、画像で伝えている情報(文言)も検索の対象となり、SEO(検索エンジン最適化)との相乗効果も期待できます。

「代替テキスト」は、画像の伝えているのと同等な情報を記述するのが基本ですが、画像の種類によっては例外もあります。例えば、絵画のように視覚的な芸術作品の画像の場合、内容の分かるラベル(作品名など)と可能であれば補足説明のテキストを提供します。また、装飾を目的にした画像の場合には、「代替テキスト」は不要なので、alt属性値を空()にするか、またはCSSを用いて実装します。

その他、画像置換(HTMLのソースコードにあるテキストを、CSSで画像に置き換えて表示させる手法)とよばれる実装方法がありますが、本達成基準の不適合事例「F3: 達成基準 1.1.1 の不適合事例 - CSSを用いて、重要な情報を伝える画像を表示させている」に該当しますので、装飾を目的にした画像以外では使用してはいけません。

事例と実装

良い例 1:リンク画像

スクリーンショット:「2012年度 社会貢献活動報告書」という文字情報のあるリンク画像

リンク画像の場合には、画像にある文字情報をそのまま「代替テキスト」として記述する。

ソースコード例

< img src="report.jpg" width="184" height="138" alt="2012年度 社会貢献活動報告書" / >

良い例 2:グラフ画像

スクリーンショット:売上構成比のデータを提示している円グラフ画像

グラフ画像の場合には、そのグラフが提示しているデータをテキストに書き起こして「代替テキスト」として記述する。文字数があまりにも長くなってしまう場合には、alt属性値ではなく、グラフ画像のすぐ近くに同じデータを提示するデータテーブルを提供したり、本文のテキストで説明したりして、「代替テキスト」にはグラフのタイトルだけを記述するという方法もある。

ソースコード例

< img src="chart.jpg" width="200" height="200"
alt="円グラフ:売上構成比 IT機器 47.8%、通信サービス 20.8%、出版 16.0%、その他 15.4%" / >

参考情報

関連する達成基準

等級A
等級AAA