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



解説

HTML (XHTML)には、見出し、段落、リスト(箇条書き)などの、文書の論理構造を記述する要素があります。これらを正しく指定することは、視覚的な論理構造の理解向上のみならず、音声ブラウザユーザーに対しても文書内容を理解しやすく伝えることに役立ちます。
また、ほとんどの検索エンジンは、この要素で表された論理構造によって、ページのスコアリングを行います。これにより、ユーザが検索したいページを、検索結果の上位に表示させることができ、ユーザの利便性を高めることができます。


実例

  • 文書を見出し(h1〜h6要素)、段落(p要素)、リスト(ul,ol,li要素等)等を適切に用いてマークアップします。

見出しや段落を使った文書のイメージ。視覚的には見出しは赤い色で大きく表示されています。
「三井住友銀行の住宅ローン紹介」は見出し、「おすすめ住宅ローン」以下は箇条書き(リスト)であるべきですが、見栄えを指定するためのfont,b要素、箇条書き部分はtable(表組み)要素を使っています。


悪い例:

<font color="#FF3300"><b>■三井住友銀行の住宅ローン紹介</b></font>
<table border="0">
<tr>
<td>・</td><td>おすすめ住宅ローン</td>
</tr>
<tr>
<td>・</td><td>いろいろおトク</td>
</tr>
</tr> </table>

良い例:

<h4>三井住友銀行の住宅ローン紹介</h4><ul><li>おすすめ住宅ローン</li><li>いろいろおトク</li></ul>

参考:

音声ブラウザのメニュー選択のイメージ。メニューバーの「読み上げ」が選択され、その中の「見出し」が選択されています。音声ブラウザの中には、文章中の見出しのみを抽出して、ページ途中の論理的な区切りへのジャンプ機能を備えているものがあります。


当行における特記事項:

特に商品説明等の情報量の多いページについては構造を適切に指定することでアクセス性が向上する。



関連するJISの項目

5.2 a,b,c,d(必須)




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

このページの先頭へ戻る