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



解説

HTML4.01及びそれ以降に策定されたHTML (XHTML) は、アクセシビリティを重視し、音声ブラウザなど様々な環境からの利用をサポートする機能(要素や属性)が備わっています。また、音声ブラウザなどの各種支援技術は、HTML4.01以降のHTML (XHTML)で策定されたアクセシビリティ関連機能を実装したものがあります。
これらの機能は、文書が仕様に正しく準拠していることを前提としているため、HTML4.01以降のHTML (XHTML)仕様に準拠した文書を作成することは、アクセシビリティを確保することにつながります。


実例

  • HTML4.01以降のバージョンで作成し、仕様に準拠して正しい文法に則って記述します。
  • HTML4.01で追加されたアクセシビリティ関連機能を正しく実装します。

table要素のsummary属性の例

tableが表示された画面イメージ。金利の一覧表。以後、このイメージのsummary要素について説明しています。

悪い例:

データのための表に構造が無く、HTML4.01で策定されたtableの要約(summary属性※)やcaption要素が指定されていません。

<table><tr><td></td>
<td><b>スーパー定期</b> (300万円未満の標準金利)</td>...</tr> 

良い例:

表の構造を指定し、tableの要約(summary属性)を記述しています。

<table  summary="定期預金の各商品毎、期間毎の金利の一覧表。
行毎に商品、行毎に期間を示しています。"><tr>
<caption>定期預金金利一覧表</caption>
<th abbr="スーパー定期">スーパー定期 (300万円未満の標準金利)</th> ...</tr>

※音声ブラウザには、table要素のsummary属性を読み上げるものがあります。


img要素のlongdesc属性の例

多くの情報が記載された画像の例。

悪い例:

画像と画像の代替テキストが等価ではありません。

<img src="imgfile.gif" alt="ご相談からご融資までの流れ">

良い例:

画像の等価な説明を別ファイルに用意してlongdesc属性で参照しています。

<img src="imgfile.gif" alt="ご相談からご融資までの流れ"  longdesc="yushiflow.html">

※yushiflow.html は、画像の詳細を説明したファイル。
longdesc属性をサポートする音声ブラウザは、指定されたURLの、画像を説明した文書を読み上げることができます。


当行における特記事項:

商品説明等の複雑な表、チャート図等の情報を表す画像。フォームを用いるページ等では、HTML4.0以降のアクセシビリティ関連技術を適切に使うことでアクセシビリティを高めることができる。



関連するJISの項目

5.1 a (必須)




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

このページの先頭へ戻る