正しい文法でHTMLを書く

正しい文法でHTMLを書くことでアクセシビリティはかなり向上します。たとえば、見出しはフォントサイズや色などの違いで表現せず、見出し要素を用いて表現します。色や大きさはスタイルシートを使って指定した方がいいです。音声ブラウザには見出しだけを読み上げていく機能があります。要素が適切に使用されていれば、効率良くページを聞き取る手助けとなります。
また、HTMLのTABLE要素をレイアウトを整えるために用いると、ソースをその記述順に読み上げる音声ブラウザでは、正しい順番で読み上げないことがよくあります。作成したHTML文書が正しく書かれているかどうかをチェックできるサイトがあります。
HTML文法のチェックはこちらのページでできます。

タイトルをつける

各ページに適切なタイトルをつけることは、より多くの利用者にとってのアクセシビリティを向上させます。ページタイトルには、そのページの概要がわかるタイトルをつけます。音声ブラウザでは、最初にページタイトルを読み上げます。また、お気に入りやブックマークに登録した時なども、一般的にそのページタイトルの名称になります。ページタイトルをつけていないと、URLがそのまま登録されるので何のページかわからなくなって大変不便です。これらのことから、ページタイトルは、画面の上端に表示されるタイトルバー以上の役割を果たしています。

画像の代替説明を必要に応じてつける

画像に対しては ALT 属性によって代替テキストを提供します。特に画像にリンクがつけられている場合には、そのリンク先の内容を伝えるという意味で代替テキストが必須となります。しかし、全ての画像に対して代替テキストを書きこむと、読み上げが冗長になります。ALTが設定されていない画像は、音声ブラウザによっては画像のファイル名を読み上げることがありますので、ALT属性に半角スペースを設定します。

フレームは使用しない

音声ブラウザはフレームを別々のページとして読み上げます。そのため視覚障害者には,フレームがかえって使いにくい場合があります。例えば、フレーム1を読んでいる状態からフレーム2の内容を見たいときには、読み上げ対象のフレームを意図的に切り替えるという操作を行います。 たとえばページの左に常に表示されているメニュー(フレーム1)があって、そこでクリックしたページが右側のフレーム2に表示されるという構成になっているページがよくあります。これは、視覚障害者にとってはアクセス困難なページになります。フレームに分かれていることが認識されていない場合、リンクを開いて新しいページに移動したつもりが、そのまま同じフレーム1の内容を読み上げるので、視覚障害者はページを移動していないと誤解してしまいます。

本文をすぐに読むことができるようにする

音声ブラウザでホームページを聞くということは、ホームページの内容を先頭から順番に音声で読み上げるということです。本文がページの先頭から遠いと、本文に辿りつくまでに時間がかかってしまいます。次のようにしてページの本文に速くたどり着くことができる配慮を行います。

 1 本文をページの最初に記載する

最も手っ取り早い方法は、ページの先頭から本文を書き始めることです。サイト共通のリンク項目等を後ろに配置しても構わない場合には、この方法で対応できます。また、スタイルシートを使用することで、画面の上部(あるいは左側)に共通項目を配置することも可能です。

 2 ナビゲーション・スキップを設置する

サイト共通のリンク項目や、バナー広告などをページの先頭部分に配置する必要がある場合には、そのリンク集が現れる前に、本文にジャンプできるページ内リンクを付けます。このような本文にジャンプするリンクを「ナビゲーション・スキップ」と呼びます。

 3 スタイルシートで読み上げ順を変更する

本校のホームページで採用している方法です。画面表示上ではリンク項目(トップメニュー)は本文より前に配置されていますが、音声ブラウザでは本文より後に読み上げるように設定しています。これは音声ブラウザはHTMLファイルのテキストを記述順に読み上げる特性を利用して、HTMLファイルでは本文の後にトップメニューを記述し、ページデザインを規定するスタイルシート(cssファイル)ではトップメニューを本文の前に表示させるように設定しているのです。

わかりやすいリンク表現をする

リンク先がより明確に推測できるよう、リンクテキストやリンク画像に付加する ALT 属性で指定するテキストには一貫性を持たせます。「ここをクリック」と書いてあってもどのページへ移動するのわからないので、視覚障害者は不安を感じます。リンク画像に対する ALT テキストは、画像の説明ではなく、リンク先の内容がわかるものにすべきです。一般的には、リンクテキストや ALT テキストは、リンク先のページタイトルにするのが適当です。また、常に上部に表示されるナビゲーションメニューは、現在開いているページのところにはリンクを設定しない方がいいです。なぜなら、視覚障害者はリンクを開いたときに別のページに移動すると思いますが、同じページが開くので混乱しやすいからです。

わかりやすいサイト構造にする

サイトの構造がわかりやすいということは、視覚障害者に対してのアクセシビリティの観点のみならず、誰にとっても大切な配慮です。

 1 トップページへ戻りやすくする

トップページに戻るためのリンクは、ページの一番最初あるいはサイト内共通リンク項目の先頭または最後に配置します。

 2 現在位置がわかるようにする

サイト内の深い階層は、現在の画面がサイト構造のどこに位置しているか把握できるように、階層などの構造を示した情報を提供する事が望まれます。例えば、ページの先頭またはナビゲーション・リンクの後に、「トップ>Aページ>Bページ>Cページ」などと記載すれば、現在見ているCページがサイト構造上どこに位置し、どのような内容の枠組みで提供されているページなのかが容易に理解できます。

ページ内容を見やすくする

利用者の中には、いろいろな見え方のかたがおります。そのため、見栄えに関しては、できる限り利用者側で自分の好みに合わせて変更できる状態にしておくというのが基本的な考え方です。スタイルシートで書体、サイズ、色、行間、背景色などの指定を記述しておくと、利用者側も別のスタイルシートによって自分の見やすいデザインに変更することができます。

 1 文字サイズを変更できるようにする

文字フォントは必要に応じて利用者が変更できるようにしておいてください。OSの設定やブラウザの設定によって、文字の表示サイズを変更できる機能があります。この機能に対応することにより、利用者が読みやすいフォントサイズに調節することができます。ウェブブラウザで変更できる「em」、「%」を使用してスタイルシートで指定します。文字サイズをポイント数で設定すると、ウェブブラウザで変更できなくなってしまいます。

 2 コントラストをはっきりさせる

背景色と前景色とには十分なコントラストを取ります。弱視者や色覚障害のある方にとっては、背景色と前景色の間のコントラストがはっきりしていないと、その区別がしにくくなります。

 3 文字の間にスペースを入れない

意味のまとまりの文字列の間には、全角または半角のスペースをはさんではいけません。音声ブラウザを利用する場合、単語の間にスペースが入ると一つの単語として認識できず、読み方を間違えてしまう場合がよくあります。例えば、「経済」は「ケーザイ」と読みますが、「経 済」は「ケイ スミ」などと読んでしまいます。スタイルシートを使えば、文字の間隔を自由に調整することができます。

PDFデータのみの提供は避ける

各種の資料、特に印刷物になっているものをPDF形式のデータで提供しているページがよくあります。しかし、PDFデータを提供するときは、代替となるデータもあわせて提供しなければいけません。視覚障害者にとっては、ある一定以上のパソコン環境と一定以上のスキルを持った人以外はPDFファイルの内容を読むことができません。さらに、印刷物をスキャンして得ただけの画像データから構成されるPDFデータには全くアクセスできません。もっとも優れた代替情報は、PDFファイルと全く同じ内容のHTMLページを提供することです。それが無理なら、図表を除く文章の部分だけをテキストデータで提供するだけでもアクセシビリティに配慮したページとなります。