：2012年06月15日　 ：ディレクターの仕事　 ：SEO対策　 ：この記事は15分程で読めます。

先日ユーザビリティに関する記事を書きましたので、アクセシビリティについてもまとめることにしました。先日の記事はこちら⇒【Webユーザビリティを改善するための5つのポイントと方法】
アクセシビリティはユーザビリティに比べるとあまり重要視されていない感を受けますが、業種問わずどんなWEBサイトであれ、最低限の対策は行うべきだと私は考えています。理由は多々あるんですが、1番大きな理由は障がい者の方達の多くが意外にもWEBサイトで情報収集をしているという事と、WEBサイトの発展に期待している事を知ったからです。
ちょっと長くなりそうなのでこの話は後程しますね。

まず、アクセシビリティ対策を行うことで得られる効果についてですが、アクセシビリティを改善することでアクセス数が増える(業界によっては大幅に増える)と言われています。これには基本的に2つの理由があり、1つは障がい者と認定されている人(総人口の5％と言われています)や、認定されてはいないが何らかの不自由がある人の獲得につながるからです。もう1つはアクセシビリティの改善がSEOの改善にも繋がっているからです。

アクセシビリティの改善がSEO改善に繋がる

アクセシビリティの改善を図ろうとするとき、以下にリストアップした対策を行うことがよくあります。見ていただければわかるかと思いますが、この対策はSEO対策にも繋がっています。

• 画像への代替テキストの付与(alt)
• 複数ブラウザでの表示適正化
• 正しい文法によるマークアップ
• CSSによるレイアウト・デザイン
• リンク文章の最適化

上記のすべてに関して、SEO対策その物のように感じるかと思いますが、実はアクセシビリティを改善させるためにも大切な要素になっています。
例えば1の対策を施すことで、音声ブラウザを利用するユーザーが、画像の内容を理解することができるようになります。2.3の対策を施せばマウスの利用が難しいユーザーがキーボードだけでページを移動しやすくなります。

このようにアクセシビリティ対策の一部は、SEO対策にも繋がっているんです。つまりきちんとSEO対策を行っているサイトは、それだけで最低限アクセシビリティ対策を行えているとも言えます(足りない点ももちろんありますが)。

アクセシビリティとは

アクセシビリティ対策がSEO対策にも繋がる部分があることを理解していただけたかと思いますが、そもそもアクセシビリティって何？と思われている方も多いんじゃないでしょうか。

アクセシビリティを一言で説明すると「近づきやすさ」と言えます。一般的にアクセシビリティは【高齢者や障がい者などの心身の機能に制約がある人だけでなく、どんな環境にある人であってもWEBサイトにアクセスし利用できること】と言われています。
もともとは建築物や交通機関でアクセシビリティが問題とされていたらしいんですが、現在では電子機器やWEBサイトなど、多くの業界でアクセシビリティについて考えられるようになっています。

アクセシビリティとユーザビリティーの違いって？

アクセシビリティとユーザビリティの違いがいまいち分からないという人もいるかと思いましたので、あくまでも一例に過ぎませんが、分かりやすくするために例を用意しました↓。※デザイン雑すぎてすみません。

1.は色のコントラストが大きく、文字サイズも大きいので読みやすくなっています。障がい者の方にも使いやすい工夫がされていいます。そのためアクセシビリティは良いと言えます。
また、レイアウトデザインも一般的でわかりやすく、リンクテキストは青で下線が引いてあったり、ロゴの位置が左上であったり、使いやすいサイト設計になっています。そのためユーザビリティも良いと言えます。

2.は色のコントラストが大きく、文字サイズも大きいので読みやすくなっています。障がい者の方にも使いやすい工夫がされていいます。そのためアクセシビリティーは良いと言えます。
ですが、レイアウトデザインが複雑で、ナビゲーションがどこにあるのか一目でわからなかったり、左上にロゴが無いので会社名がわかりにくく、非常に使いにくいサイト設計になっています。そのためユーザビリティは悪いと言えます。

3.は色のコントラストや文字サイズが小さく、弱視の方はこのサイトを利用できない場合があります。また色覚障がい者の中には赤と緑の区別できない人がいます。つまりこのサイトの有彩色を区別できず、誤った操作をする可能性が増えます。そのためアクセシビリティーは悪いと言えます。
ですが、レイアウトデザインは一般的でわかりやすく、リンクテキストは青で下線が引いてあったり、ロゴの位置が左上であったり、使いやすいサイト設計になっています。そのためユーザビリティは良いと言えます。※アクセシビリティが悪いので、1.に比べるてユーザビリティが劣ります。優れているとは言えません。

4.は色のコントラストや文字サイズが小さく、弱視の方はこのサイトを利用できない場合があります。また色覚障がい者の中には赤と緑の区別できない人がいます。つまりこのサイトの有彩色を区別できず、誤った操作をする可能性が増えます。そのためアクセシビリティーは悪いと言えます。
また、レイアウトデザインも複雑で、ナビゲーションがどこにあるのか一目でわからなかったり、左上にロゴが無いので会社名がわかりにくく、非常に使いにくいサイト設計になっています。そのためユーザビリティも悪いと言えます。

上記の例で、アクセシビリティとユーザビリティの違いを感覚的に理解していただけたんじゃないでしょうか。どちらも「使いやすさ」に関わる考え方なので、分かりにくいかと思いますが、ユーザビリティは「使える」状態を「使いやすい」状態にすることを言い、アクセシビリティは「使えない」状態を「使える」状態にすることを言います。このように区別していただければ大丈夫だと思います。

例えば、車椅子の人がデパートに訪れたとして、そこにエレベーターが無かったとしたら、それはユーザビリティが悪いのでしょうか？それともアクセシビリティが悪いのでしょうか？この場合はそもそも使えないんですから、アクセシビリティが悪いといったほうが自然です。
どんなにすばらしい情報やサービスでも、読めなかったり、操作ができなかったりしては、利用するユーザーにとって全く意味がありません。車椅子の人にとってエレベーターの無いデパートでは、2階にどんなに優れたすばらしい商品が並んでいても、まったく意味が無いという事です。2階に上れないんですから(スタッフが強引に階段を使って担ぎ上げるとかは無しです！)。

WEBを利用する障がい者の実態

冒頭で紹介した【障がい者の方達の多くが意外にもWEBサイトで情報収集をしている】【WEBサイトの発展に期待している】という事に関してですが、私は身内の多くが医療や福祉関係の仕事をしていることもあり、医療・福祉に関して興味を持ってます。そのため個人的に医療・福祉関連の話題を調べたりするんですが、以前ローカル地域新聞？のようなものに【視覚障がい者の人がどんな風にWEBサイトを利用するのか】について書かれていたのを読んだことがありました。

視覚障害のある男性のお話なんですが、彼は交通事故で失明をしてしまい、趣味の読書(1日何冊も読んでいたみたいです)をすることができなくなりました。目を失い趣味も失い、地獄のようだと感じるほど辛かったそうなんですが、事故から半年か1年たった頃、WEBサイトを利用して小説を読むことができること知りました。
読むというより、正確には音声ブラウザを利用して小説を【聞く】という事なんですが、それでも彼にとってそれは希望そのものだったようです。

事故後は母親に小説を読んでもらっていたそうなんですが、母親も仕事があるのでつきっきりになるわけにいかず、彼は一人の時間が不安で苦痛だったそうです。ですが音声ブラウザを利用して小説を読めるようになり、日が経つにつれネットサーフィンやEメールを利用できるようになりました。今ではネットショップを利用して買い物をしたりできるそうです。
まだ音声ブラウザに対応しきれていないサイトも多くあるようで、不便もあるそうなんですが、それでも彼にとってインターネットは欠かせないものにななったようです。彼はインタビューに対して「インターネットの発展を楽しみにしている」と答えていました。
また失明したことで、点字を読む練習もしたそうなんですが、ニュースなどの様々な情報の多くは、点字に変換されるまでに時間がかかるそうで、最新の情報をいち早く手に入れるには私達と同じように、WEBサイトを利用すると良いようです。点字化されるのを待つことなく欲しい時に情報を手に入れられますからね。

別の話になりますが、医療機関で働く知人は、障がい者だからこそWEBサイトを必要としている。と話していました。重症度によっては利用できないこともあるそうなんですが、四肢麻痺の患者さんでも今では技術が進み、瞬きでクリック操作をして、文字を入力することができるそうです(できない人もいます)。また手や頭にレーザーポインターのようなものを固定して、画面にそのポインタを当てると、クリックできたりする機械もあるようです。※なのでリンクエリアが広いほうがアクセシビリティは良いんですね。手や頭が震えてしまう人もいるから。

障がい者の方の中には、家や病院の外に出ることが困難な人も多いんですが、そういった方たちでもインターネットを使えば外出せずに、誰かとコミニケートができたりほしいものが買えたりします。
ネットの世界では、何かしらのアクションを起こしたいとき、マウスやキーボード1つで行動が起こせます。そのため多様な情報のやり取りを障がい者の方々も自力で行えるようになったんです。これは本当にうれしいことだと思います。何もかもお世話をしてもらえないと生きることが難しい人にとって、｢自分の力で何かできる｣という事は、はやり希望そのものなのかもしれません。そしてパソコン・WEBサイトというのは、今では本当に様々なことができます。自分で色々できることが自信や生きがいにも繋がると思います。

アクセシビリティは業界・業種・ターゲットユーザーによって極める必要があったり、無かったりすると思います(最低限の対策は必要だと思いますが)。余裕があるのであれば、利用者にどのようなユーザーがいるのか調べ、体に不自由な方も利用していただけているのであれば、そういった方たちに使いやすいWEBサイトにすることも必要かもしれません。もちろんビジネスですから、正直利益も考えなければならないんだと思いますが。

Webアクセシビリティ改善リスト

実際に何をどうしたらWebアクセシビリティが改善するのか。私が重要だと思う点を32個ピックアップしましたので、自社のWEBサイトと照らし合わせて、アクセシビリティ改善に役立てていただければ幸いです。基本的なことが多いんですが、特殊な環境で無い限り基本さえ抑えておけば十分だと思います。もちろん、医療・福祉・自治体のHPなどを作らなければならないときは、もっと深く考える必要があるかと思います。そんなときはJIS規格のX8341-3を確認するといいと思います。

また下記で紹介する改善リストだけでなく、先日の【競合サイト調査・分析に必要なチェック項目と役立つツール達！】の記事の中で紹介したHAREL(ハレル)というツールや、アクセシビリティ・アシスタンスというツールを使ってWEBアクセシビリティのチェック・改善をするのもいいんじゃないでしょうか。

Webアクセシビリティ改善リスト(視覚障がい者への配慮)

• 音声ブラウザでは「/」を｢分数｣で読み上げてしまうので、日付表記には使用しないほうが良い。日時表記は「月」や「日」の漢字を使用し、「2006年10月17日」などと記述すると良い。
• 期間や範囲を示す場合は、「-」ではなく「～」を使用すると良い。音声ブラウザは「-」を「から」と読んでくれないことがある。
• 見出しタグは重要。音声ブラウザでは、見出しタグはジャンプ(読み飛ばし機能)のための目印になるので、できるだけ基本的なSEOのルールに従って利用する。
• 単語内にスペースを使用しないほうが良い。音声ブラウザでは「日　本」は「ひ　ほん」と誤読される場合がある。
• 「①、Ⅰ、㍍、㎞、㍻」などの機種依存文字は使用しないほうが良い。文字化けを起こし、音声ブラウザが読んでくれないことがある。
• 注釈記号に「＊」「※」などは用いないほうが良い。音声ブラウザでは認識できないことがあり「注1」などと記述すると良い。
• 音声ブラウザでは、左上から読み上げるのでメニューは左側に置くと良い。
• メニュー項目の数が多すぎると、音声ブラウザ利用者はすべてを参照し終わるまでに時間がかかる。そのためグルーピングすると良い。
• 画像やテキストリンクは「戻る」だけではどこへ戻るのかがわかりにくい。そのため「トップページへ戻る」「前ページへ戻る」などと明示すると良い。
• ページ内で他の言語を使用する場合には、lang=”en”などと指定すると良い。こうすることで音声ブラウザは、指定言語に従った発音をする。
• タイトル名が不適切・不明瞭な場合は、本文の内容が把握しにくい。タイトル要素が未記入だとURLが表示されてしまい、音声ブラウザの利用者は内容を把握できない。
• 音声ブラウザでは、リンク部分だけを読みあげる機能がある。そのため、リンク文章は明確にすると良い。例えば「詳細」と書かれただけのリンクだと、リンク先の内容を把握しにくい。
• 視覚障がい者は、画像の代替情報がない場合、画像の内容を把握することができない。音声ブラウザは、alt属性の内容を読みあげるので、画像にはalt属性で画像の内容を記述する。
• 文字色と背景色はコントラストを大きくすると良い。弱視者や高齢者は、明度差が小さいほど読みにくくなる。
• フォントサイズは相対指定すると良い。弱視者や高齢者は、ブラウザの設定で文字が大きく表示されるように設定している場合が多いが、CSSなどで文字サイズを絶対指定してしまうと、文字サイズが大きくならず、文字を読み上げることができない。
• PCモニターのテキストは、閲覧範囲が狭く、印刷物より読むのに時間がかかり目が疲れやすい。そのため、高齢者や弱視の方の負担になりやすい。
• 右クリックを禁止しない。視覚障がい者は右クリックが禁止されていることを把握しにくい。
• 色覚障がい者は色の区別が困難である。色をはっきり区別させるために、色に名前をつけたり、ボーダー柄とストライプ柄などで区別させる。

Webアクセシビリティ改善リスト(聴覚・身体障がい者への配慮)

• 上下のスクロールが多すぎるページはユーザーに負担をかける場合がある。とくに上肢障がい者は、スクロール操作が困難な場合がある。
• 上肢障がい者は横スクロールが困難である。リキッドレイアウトにすれば横スクロールの必要がなくなる。
• 必要な場合には、日本語以外の言語のページも用意し、基本情報やその他の情報を提供すると良い。
• 「上矢印」「下矢印」キーによる画面スクロールを可能にすると良い。
• 「Tab」キーによるキーボードフォーカス(リンク移動)を可能にすると良い。
• 作業中の入力フォームの前画面にもどれすようにすると良い。エラーが生じたとき、[戻る]ボタンなどで、前画面に戻れるように設定し、入力済みのデータを消去せずにそのまま表示すると良い。障がい者の多くは入力作業が困難な場合が多い。
• フォームの入力時間制限は無いほうが良い初心者、高齢者、障がい者に配慮し、フォームの入力には時間制限は設けない。時間をかけなければ入力できない場合がある。
• 初心者、外国人、認知症の人にわかりにくいコンテンツを作る場合、図・動画・音声などを併設して、直感的に内容を把握できるようにすると良い。
• 音声情報にはテキスト情報も加えると良い。聴覚障がい者は音声だけで提供された情報を把握できない。
• 音声情報は自動的に音を再生しないほうが良い。聴覚障がい者は、音の再生を認識できない。
• 上肢障がい者は微妙なマウス操作が困難な場合が多い。リンクエリアはできるだけ範囲を広く取るようにすると良い。
• 初心者、障がい者は半角文字、全角文字などの入力文字種をまちがえることが多い。そのため、入力は自由にすると良い。
• W3Cが公開しているHTMLやCSSの仕様は、アクセシビリティを十分に考慮して作成されている。そのため、文法を守ることで一般ユーザーだけでなく、障がい者の方々もアクセスしやすくなる。
• WEBサイトのデザインをCSSで行なうと良い。文書構造(html)と表示に関する指定(CSS)を分けることで、HTMLを簡素にでき、「タグの誤用」を減らすことができる。例えばHTMLにおいて＜BLOCKQUOTE＞は引用、＜TABLE＞は表をマークするためのものだが、視覚効果のためにこれらの要素が使われることがある。音声ブラウザなどの特殊ブラウザがこのように誤用された要素をそのまま処理した場合、ユーザーが理解できない事態になる。

では、このへんで！