Webのユニバーサルデザイン「Webアクセシビリティ」（後編）

1. 高齢による視力低下
   →ブラウザの文字のサイズを「最大」にしている人が多い
2. 視覚障害（全盲・弱視・色覚）
   →全盲の場合は読み上げソフト（スクリーンリーダー）
   →弱視の場合は画面の一部を虫眼鏡のように拡大するソフト
   →色覚障害の場合は画面の色を反転したりできるソフト
   などを使用
3. 聴覚障害
   →音声で情報を伝える動画の閲覧以外は健常者と同じ
4. 肢体不自由
   →口で操作できるツール等、障害箇所によって様々な環境が考えられる

では、具体的に制作の際のポイントですが、実はこれを細かく語り出したら、本が1冊書けてしまうくらい、いろいろとあります。
ご興味のある方は、本文の下にある参考書籍を読んでみてください。
ここでは「アクセシビリティ」対策として、特に重要なものに絞って、お話します。

■ポイント１－ページタイトルを固有にする

ページのタイトルには、利用者がページの内容を識別できる名称を付けなければなりません。
複数のページで同じタイトルを付けてはいけません。
これはスクリーンリーダー対策であると同時に、検索エンジン対策としても必須です。
（もうこのブログの読者には“耳タコ”ですね）

■ポイント２－画像には代替テキストを必ず記述する

スクリーンリーダーを使用している人には、画像に表示されているテキストの内容は分かりません。検索エンジンも同様ですね。
画像には、alt属性を必ず記載します。

例
<img src=”graph.gif” alt=”ウェブアクセシビリティの普及度”>

■ポイント３－文字のサイズを相対指定にする

高齢化社会に向けて、企業にとっては必須の対策になります。
私のお客さんにも、各世代の方々がいて、お客さんの年齢が上になればなるほど、「もっと文字を大きくして欲しい」という要望が大きくなります。
じゃぁ、ただ闇雲に文字を大きくすれば良いのか、と言えば、そうではありません。なぜならその人の視力によって、読みやすい文字の大きさや行間が違うからです。

対策としては、文字のサイズをブラウザで調整できるようするというものになります。
具体的には、
{font-size:14px}
というような、文字の大きさを絶対指定にするのではなく、
{font-size:large}とか{font-size:100%}
のような相対指定にします。
（ただブラウザによって大きさの解釈が違うのが難点）

■ポイント４－リンクはリンク先が分かるテキストにする

これはどういうことかというと、例えば、トップページから人材募集のページにリンクを張る場合、

＞詳しくはこちら

ではなくて、

＞スタッフ募集要項はこちら

とした方が良いということです。スクリーンリーダーを使用している人には、リンク先にどんな情報があるのかを把握しやすくなるからです（実は検索エンジン対策としても同じことが言えます）。

■ポイント５－正しい文法でHTMLコーディングする

文章構造、例えば「見出し」「リスト」「強調」などをきちんとマークアップするということです。
厳密には、12/12号でお伝えしたように、文書構造をHTML、デザインをCSSで制御する「Web標準」でコーディングするのがベストです。

ただ現状あるページをいきなり移行するのは、結構な手間とコストがかかります。
まずは、以下のような、できるところから手を付けてみてはいかがでしょうか？

1. tableタグは使ってもいいが、読み上げ順序に考慮する
   特にレイアウトにtableタグを使っている場合は注意
2. 見出しはh要素、リストはulやli要素、強調箇所はstrong要素でマークアップする

以上、大まかなポイントを挙げましたが、これを全て必ず実現しなければならない、ということではありません。
何を優先するかは、人それぞれです。

例えば、対象として健常者が中心で、マーケティング的な視点から動画でプレゼンテーションした方が効果的な場合、これらのポイントに反する部分が出てくる場合もあります。

現実的には、そういった自社の状況に合わせて柔軟に対処していく必要があります。

【参考書籍】
『ここから始めるWebアクセシビリティ』
『WebアクセシビリティJIS規格完全ガイド』