Webアクセシビリティ

1 正しい文法でHTMLを書く

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

2 タイトルをつける

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

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

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

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

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

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

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

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

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

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

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

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

(1)スタイルシートでサイズや色などを指定する

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

(2)文字サイズを変更できるようにする

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

(3)コントラストをはっきりさせる

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

(4)文字の間にスペースを入れない

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

Comments are closed.

Powered by WordPress, WP Theme designed by WSC Project. ログイン