ページ制作のアクセシビリティ指針
優先度1



解説

音声ブラウザ等の画像を表示・理解できない環境では、画像に代替テキストが指定されていないと情報にアクセスすることができません。
代替テキストが指定されていても、その内容が適切でないために、かえってユーザーの理解を妨げることがあります。
画像を表示・理解できない状態・環境でも情報を理解しやすくするために、前後の文脈やビジュアルの意味・役割(ボタン等の場合)に考慮した上で画像の代替テキストを指定します。


実例

  • 画像(img要素、area要素、type="button"であるinput要素)の場合、alt属性値に代替テキストを指定します。
  • alt属性値は簡潔にし、長くなる場合にはlongdesc属性で詳細の解説へとリンクさせます。

文章情報を補完する画像の場合

文章情報を補完する画像の例。据え置き期間の説明のために、テキストの説明に加え、ビジュアルで分かりやすく説明しています。

悪い例:

alt="据置期間の解説"

良い例:

alt="例。5月15日にお預け入れの場合、6月14日からお引き出し可能です。"

装飾のための画像の場合

装飾のための画像の例。ウェブ通帳をイメージさせるために、説明文の横にノートパソコンのイラストが載せられています。

悪い例:

alt="ノートパソコン"

良い例:

alt=""

※装飾のための画像であればalt属性値は""(空)とします。 ビジュアルに何らかの意味がある場合は、その意味を表す文章を補完します。例:「Web通帳は、パソコンや携帯電話でアクセスする通帳です。」


alt属性値が長くなる画像の場合

alt属性値が長くなる画像の例。元本、利息の計算例を分かりやすく表現するためにビジュアルを使用しており、テキストで説明すると長くなります。

悪い例:

alt="中途換金例の解説"

良い例:

alt="2年1ヵ月後に中途換金した場合" longdesc="syousai.html"(※)

※ syousai.htmlは画像の詳細を解説したhtmlファイル


当行における特記事項:

動的に生成する画像で情報を提供するサービス(株価や為替情報)では、テキスト情報もあわせて提供するよう努めること。 チャート図等、文書での説明時に構造化が必要になるものについては、テキストページによる情報提供の併用についても検討すること。



関連するJISの項目

5.4 a (必須)




アクセシビリティガイドライン トップ

このページの先頭へ戻る