contents

パンくずリスト

HOME > Manage&Column >> アクセスアップ >>> アクセシビリィティ

メッセージエリア

アクセシビリィティ
ユーザービリティーがサイトの使い勝手に関することが視点であるのに対し
アクセシビリティーとは
全ての人がそのサイトにアクセスできるか、利用して操作することが可能かどうかが視点となります。

サイトには様々な環境の人が訪れます。
Windowsを使っている人がいればMacを使っている人もいます。
OperaやFirefox、あるいはPDAや携帯電話で閲覧する人もいるわけです。
更には小さい文字が読みづらい高齢者や目が不自由な人など様々です。

しかし、サイトを利用したくても操作が行えないといった現象が増えていて
こうした人達が利用できるサイト、誰しもが操作可能なサイトが
アクセシビリティーの高いサイトと評価されるわけです。

それでは以下のポイントをしっかり理解し活用してみてください。
  1. 画像に代替テキストを記述
  2. グラフや図表に代替テキストを記述
  3. サイトの配色
  4. ナビゲーションのスキップ
  5. 本文テキストや記号の使い方
  6. プラグイン
  7. スクリプト無効に対応
  8. ページタイトル
  9. キーボードのみでの操作
  10. フォームのアクセシブル
  11. テーブルのアクセシブル
  12. フレームのアクセシブル

ページTOP
ひとつ前のページに戻る

画像に代替テキストを記述

画像が読み込まれた場合、それが表示されない時の対処法のひとつでalt属性が用いられますが
これは画像が表示されなかった場合にテキストが表示されるのと同時に
音声読み上げソフトではaltの値が読み上げられるわけです。

これは視覚障害者が使う音声読み上げソフトに対する最も基本的な対処法ですので
ぜひ覚えておいて下さい。
これはイメージマップでも同様で、ホットスポットごとにalt属性をつける必要があります。
あまり長いと読み上げが長くなるので10文字程度に簡素にまとめて記述しましょう。

ページTOP
ひとつ前のページに戻る

グラフや図表に代替テキストを記述

グラフや図表の場合は、alt属性の値に「グラフ」や「図表」と記述しても
視覚障害者の人にはなんだかさっぱり内容がわかりません。

この場合はlongdesc属性を用いて、詳しい説明ページへのリンクをはります。
そうする事によって、音声読み上げソフトは詳しい説明ページに移動して
そこに記述されている内容を読み上げるわけです。
ただしlongdesc属性に対応している音声読み上げソフトは、まだ一部のものですので
できればグラフや図表の下に説明ページへのリンクを貼っておくのもよいでしょう。

ページTOP
ひとつ前のページに戻る

サイトの配色

色覚障害者や色盲、色弱の対象者は、全人口比で20人に1人くらいの割合で存在すると言われています。
視覚障害者は
赤の視感度がないか弱い「第一色盲、色弱」
緑の視感度がないか弱い「第二色盲、色弱」「第三色盲、色弱」
の三種に大別され、それぞれ特定の色の組み合わせによって見えにくくなることがあります。
色の見え方をシュミレーションする【カラーコントラストチェッカー】というものが
無償で配布されていますので、実際にチェックしてみてもよいでしょう。
そして、そのように見づらい色の組み合わせは避けるように心がけましょう。


ページTOP
ひとつ前のページに戻る

ナビゲーションのスキップ

ナビゲーションメニューを配置している場合
音声読み上げソフトを使っている場合、ページを読み込むたびにこのナビゲーションメニューを読み上げます。
また、キーボードだけで操作を行っている人は
ナビゲーションメニューをひとつづつTabキーを使って送っていかなくてはいけません。
非常に煩わしい作業となりますね。
そのために「スキップリンク」というものを付けておくとよいでしょう。

手法としては本文の先頭にアンカーをつけ、「本文にジャンプ」といった名称をつけてジャンプさせるか
メニューの先頭に隠し画像をつけ、alt属性の値に「本文にジャンプ」といった記述をし
音声読み込みソフトに読み上げさせるのもひとつの手法です。

しかし、隠し画像は目には見えないので
視覚障害者以外に対しての配慮としてはあまりお勧めできません。

ページTOP
ひとつ前のページに戻る

本文テキストや記号の使い方

例えばテキストを縦書きに表示したいがために、強制改行をいれる場合や
テキストの両端を揃えるために、文字と文字の間にスペースを入れたりするのが見受けられますが
これらは音声読み上げソフトでは、ひとつの単語として認識してくれませんので正しく読み上げられません。

また、日付の記述方法でも「2000/4/1」と記述すると
音声読み上げソフトでは「4ブンの2000、1」と読み上げてしまうそうです。
「2000年4月1日」と記述した方がよいという事ですね。

また、機種依存文字というものがあり
各メーカーが独自に定義し、特定のコンピューターやOSでのみ表示可能となるものです。
主な機種依存文字は
丸付き文字
ローマ字数字
単位記号
半角カタカナ
などです。
これらの文字は、異なる環境で閲覧すると全く違った文字が表示されてしまいます。
アクセシビリティーチェッカーの「LIFT」や「Webaccessibility Toolbar」では
機種依存文字と半角カナ文字の有無を調べることができます。


ページTOP
ひとつ前のページに戻る

プラグイン

プラグイン
ページTOP
ひとつ前のページに戻る

スクリプト無効に対応

スクリプト無効に対応

ページTOP
ひとつ前のページに戻る

ページタイトル

ページタイトル
ページTOP
ひとつ前のページに戻る

キーボードのみでの操作

キーボードのみでの操作

ページTOP
ひとつ前のページに戻る

フォームのアクセシブル

キーボードのみでの操作

ページTOP
ひとつ前のページに戻る


テーブルのアクセシブル

キーボードのみでの操作

ページTOP
ひとつ前のページに戻る


フレームのアクセシブル

キーボードのみでの操作

ページTOP
ひとつ前のページに戻る


アクセスアップへ戻る