アクセシビリティ を意識したら UX の向上や SEO 対策にもなるんだよ
ほとんど家にいるのに日焼けが進んで行くので、蛍光灯でも65W以上あれば日焼けすると思うことにした、どうも しばおです。
この日焼けのせいで、だいぶチャラく見られがちですが・・・。
さて、僕はサロンメンバーに対しても、 アクセシビリティ に関することを、チクチク、そしてチクチク言ったり、添削しているのですが、 今日は、なぜ僕が アクセシビリティ に対してうるさく言うのか的なことを書いてみます。
また、 アクセシビリティ って割りとコーダーやマークアップエンジニアが意識するものでデザイナーには関係ないって思われがちなのですが、いやいやアクセシビリティ は立派なデザインだよというのも知ってもらえればなーと思います。
ということで、 アクセシビリティ を意識する事で、どんな効果があるのかについて書いてみたいと思います。
アクセシビリティ ってなんなの？
そもそも アクセシビリティ ってなんなの？って話なんですが、
“Accessibility” とは 「近づきやすさ」や「アクセスのしやすさ」という意味です。
例えば、車椅子の方が、階段の先ある施設を利用したいと思っても、そこに階段しかなければ、そもそもアクセスする事ができません。
その施設がどんなに素晴らしいサービスを提供していても、そもそもアクセスできなかったら意味ないじゃん！ってやつです。
そこで、スロープやエレベーターなどを設置するなどして、誰もが利用できるように配慮すること、それが アクセシビリティ です。
つまり、Webにおいても、どれだけ素晴らしいサービスのサイトを作っても、そもそも使えなければ意味がないという事です。
僕の環境じゃ、使われへんやんけー！
ちゃんちゃん。
Webを作ったティム・バーナーズ・リーさんもこう言っています。
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
Tim Berners-Lee, W3C Director and inventor of the World Wide Web
これは、「Webが持つパワーは、その普遍性にある。障害の有無に関係なく、誰もが使えることが、その本質である。」という意味です。
そもそもWebは他のメディアと比べて、圧倒的にアクセシブルなんですよ。
だって、Webには、音声ソフトや、点字ディスプレイなど、様々な支援装置があるのですから！w
つまり、それらを利用する事で、目で情報を得ることに加えて、耳で情報を得たり、指で情報を得たりと、どんなユーザーにも情報を伝達する事が出来るポテンシャルを持ってるんです。
これは、テレビやラジオ、印刷物では難しい事です。
あとは、僕達Web制作者が、こういった支援装置にも、内容を理解しやすいようにWebサイトを作ることで、そのポテンシャルを最大限に活かせるんですよね。
その、多くはHTMLをちゃんと書く事で 対応する事ができるので、今後そういった記事も書いて行こうかと思います。
で、 アクセシビリティ を意識していいことあるの？
じゃあ、 アクセシビリティ に対応したらどんな恩恵があるか説明しておきますね。
僕は、 アクセシビリティ を意識する事で、大きく3つのいいことがあると思ってるんです。
1. アクセシビリティが高まれば、サイトのコンバージョン率が向上する
先ほど書いたように、 アクセシビリティ をちゃんと対応しているサイトと、そうでないサイトでは、そりゃ アクセシビリティ をちゃんとしているサイトの方が、利用できるユーザーが増えるんですよ。
じゃあ、なんでサイトを利用できるユーザーが増えれば、コンバージョン率が上がるのかって話ですよね。
- コンバージョン率
- アクセス数に対して、サイトに与えられた目的を達成した数(コンバージョン)の割合
そもそも、Webサイトって、何のために作ってるんだっけ？
多くのWebサイトは、集客だったり、売上だったり、登録だったりと、何かしらの目的があって作られているわけですよね。
こういった目的のコンバージョンは、一般的に アクセス数 × コンバージョン で求められます。
で、ここでポイントなのは、そのアクセス数には、サイトをちゃんと利用してない人も含まれてるって事です。
つまり、アクセスはしたが、サイトが利用できなくて直帰してるユーザーも含まれています。
例えば、最新のCSSを使ってレイアウトしたり、JavaScriptを使って情報を表示しているサイトがあったとします。
そうすると、古いブラウザやマニアックなブラウザを使ってるユーザーがアクセスしたら、レイアウトが崩れてたりするし、ブラウザの設定でJavaScriptをOffにしていたら、そもそも情報が表示されなかったり、機能してなかったりするので、
レイアウト崩れまくってるやんけ！
おいおい！動いてへんやん！
「見にくーーい！」、「使えなーい！」ってなるわけです。
そうなると、アクセス数は増えるが、そのユーザーがそのサイトを利用せずに直帰する可能性は高いです。
つまり、同じアクセス数でも、ちゃんと利用しているユーザーと、そもそも利用していないユーザーがいるという事です。
だったら、例え古いブラウザやマニアックなブラウザだったり、JavaScriptが無効の環境で閲覧したとしても、ちゃんと見やすく、使える状態にしてあげれば、そのサイトを利用してくれる可能性は上がりますよね？
コンバージョンは、サイトを利用してもらわないと、達成することはないので、利用できるユーザーが多ければ多いほど、コンバージョン率が上がる可能性が高いのです。
そして、コンバージョン率が上がれば、サイトの効果も増えるというわけです。
Aサイトのレイアウト崩れてるから、
Bサイトでポチってやったぜぇ
どうです？
いいでしょ？w
1人でも多くのユーザーが、サイトを利用できるように作ることで、サイトの効果も大きくなる可能性が高いのです。
なので、例えシェアが少ないブラウザだったとしても、普通にサイトを利用する分には問題ない程度には対応しておくことで、1人でも多くの人がサイトを利用できるようになり、コンバージョン率の向上に繋がります。
つまり、プログレッシブエンハンスメント ですね。
現在でも IE8やIE9を使ってるユーザーは 0 ではありません。
確か2つ合わせて 1% くらいですかね。
JavaScriptが無効な環境も 1% くらいらしいです。
この 1% をどう捉えるかですね。
例えば 月に 10万ユーザーくらいアクセスがある サイトなら 1000ユーザーくらいは 古いIE8やIE9ってことです。
僕は、1人でも多くのユーザーが使える方が効果に繋がると考えているので、未だに、 Flexbox を使わなかったりします。
もちろん使い方を知らないわけじゃないですよw
IE8やIE9のこととかを考えてですw
便利なのも十分知ってます。ですが、サロンメンバーにも紹介したんですが、Flexboxのほとんどのことは、とくに開発コストが増えることもなく display: inline-blockで代用できるんです。
なので、たったそれだけで、IE8やIE9でもフレキシブルなレイアウトが出来るので、Flexboxじゃないと出来ないことがある時以外はあんまり使ってないんですよね。
あ、別にみんなに 「Flexbox 使わないほうがいいよー 」 って言ってるわけじゃないので、勘違いしないで下さいねw
そこんとこ、お願いします！
あと、なにもブラウザだけではなく、音声ソフトや、点字ディスプレイなどの支援装置で、Webサイトを閲覧しているユーザーでもちゃんと内容が伝わるようにしたり、キーボードの操作のみでサイトを利用できるようにすることも、サイトを利用できるユーザーを増やす事になりますよ。
じゃないと、マウスが壊れた時困るでしょ？
あれ？マウスが動かへん！
僕らは効果を出すために、Webサイトを作っているのに、僕らのせいで利用できないユーザーを作り、効果を減らしてしまうのは、もったいないなぁなんて思ってます。
ま、かといって僕も「完璧に対応できてるのか！？」と聞かれれば完璧には対応できてませんが・・・。
服屋で例えると、S、M、Lしかサイズがなかったら、XLサイズの人がお店に入って来ても、試着できる服がなかったりで、そのお店を利用できない可能性が高いけど、ちゃんと大きサイズや、キッズサイズを用意することで、利用できる人が増えるよねーって話です。
そしたら、購入してもらえる人も増えるでしょ？
サイズが豊富でありがたいわ。
そう考えると、UNIQLOってアクセシビリティ高いですね！w
多くの人が利用できる服屋にするか、うちの服を着たかったら、痩せてから来い！って言うかは、あなた次第です。
※注意 実際の服屋さんはこんな挑発的ではありません。
服屋さんの場合は様々なサイズを用意したくてもコストの問題や不要在庫のリスクなどがあるので、なかなか用意したくてもできないのです。
2. アクセシビリティ 対策は SEO 対策になる
みなさんはSEO対策と聞くとどんな対策イメージを持ちますか？
僕が、SEO に大切だと思ってることが、以下の2つになります。
- 質の高いコンテンツを作る
- そのコンテンツの内容を正しく検索エンジンに伝える
まぁ、そもそも質の高いコンテンツが無いのに、テクニックで SEO 対策頑張ったとしても、ひょっとしたらSEOによってアクセス数が上がるかもしれないが、そこにユーザーが満足するコンテンツがないんだったら、意味ないですからね。
むしろ、満足するコンテンツが無いせいで、
え！？こんだけ？
全然欲しい情報書いてないやん。
何やねんこのサイト！
って、かえってマイナスイメージになることもありますからね。
なので、質の高いコンテンツを作ることは大前提として、後は、その内容を正しく検索エンジンに伝えることで、検索エンジンがちゃんとサイトを評価できるようになって、それが順位として反映されるんです。
じゃあ、どうやって正しく検索エンジンにコンテンツの伝えるのかって言うと、ちゃんと アクセシビリティ 向上させることになります。
つまり、アクセシビリティ を向上させることは、SEO の対策になるのです。
実際に、Goolge が提供している「検索エンジンスターターガイド」に掲載されている内容の多くは、アクセシビリティ を向上させる対策と重複しています。
そういえば、昔のこのページの PDF版があったんですが、もうダウンロードできないんですかね？
それはさておきw
アクセシビリティ を対策したからSEOが万全になるわけじゃないし、SEOの対策をしたから アクセシビリティ が万全になるわけじゃないですが、アクセシビリティ を高めることで、検索エンジンが サイトをクロール、インデックスしやすくなります。
3. アクセシビリティ が高まれば、UX も向上する
さて、最後は UX の話です。
- UX （User eXperience）
- 「人がモノやサービスの利用を通して得られる経験」のことで、「ユーザー経験」や「ユーザー体験」となどと言われている。
「ん？UXってデザインの話じゃないの？
「アクセシビリティとどう関係があるのさ」
「どやさ、どやさ」
って思われるかもしれませんが、先にも説明してきたとおり、アクセシビリティ が向上すると 利用できるユーザーが増えます。
これは言い換えると、利用できない人が減るということですよね。
「利用できない」って、ユーザーの体験からしたら不満足でしか無いので、まず、そんな状況を避ける事ができます。
そして、アクセシビリティ を高めるということは、ちゃんとサイトのコンテンツを正確に伝えるということになるので、情報がわかりずらいとか、使いづらいという状況も回避しやすくなるのです。
つまりそれは、サイトのユーザービリティを向上させることに繋がって行くんです。
実は、アクセシビリティとユーザービリティって絡み合ってる関係で、アクセシビリティの範囲って、ユーザービリティの範囲と重複してたりするんです。
例えば、
「行間が詰まりすぎてる文字は、読みにくいし、場合によっては文字が識別しにくくなるので、行間をあけましょう」
って対策は、アクセシビリティの対策であると同時に、ユーザービリティの対策にもなっているわけです。
他にも、ブラウザの文字サイズ変更機能を妨げないようにするのもそうです。
なので、アクセシビリティ を対策するということは、ユーザービリティの向上にも繋がるのです。
そして、ユーザービリティが高いサイトは UX も高くなるというわけです。
もちろんこれも、アクセシビリティ を向上させたら、ユーザービリティやUXが万全というわけではありません。
が、それらを向上させる要因になるということです。
ただ、例えば「ブラウザの文字サイズ変更機能」を普段から使ってない方
ブラウザの文字サイズ変更機能？
そんなの使ってねーよ。
からすると、あまり恩恵がないので、これらの対策によってのUX を実感することもないかもしれませんね。
でもね、例えばみなさんのマウスが壊れた時ってどうですか？
あれ？マウスが動かへん！
そんな時に、キーボードだけでちゃんと リンクやフォームなどが操作できると、ちょっと恩恵感じません？
でも、例えばみなさんが、ラジオボタンをCSSでスタイルするために、
input[type="radio"],
input[type="checkbox"] {
display: none;
}的なコードを書いてたら、キーボードだけでフォームを選択できなかったり、テキストフィールドの青い境界線がいらないからと、
a,
input,
textarea,
button {
outline: none;
}なんてコードを書いてたら、現在どのリンクにフォーカスが当たってるかわからなかったりするんです。
そしたらどうです？
ホワァァァァァァァァァァ！
「ん、っもう！」
ってなりますよね？
はい、UXが下がりましたね？
ほら、アクセシビリティって大事でしょ？
って言っても、こういうアクセシビリティのことって、なかなかHTMLやCSSの本でも書いてなかったりもするし、意外とスクールとかでもなかったりするので、抜けちゃう部分なんですよね。
なので、僕もサロンでアクセシビリティついて結構チクチク言ってますｗ
まぁそれでもまだ内容的に足りてないので、もっとサロンで実践的なアクセシビリティのことをやって行こうと考えてます。
もしアクセシビリティ を チクチク されたい方はサロンにどうぞw
もうすぐ 5期生を 20名 募集します。一旦 この募集で ストップするつもりなので、詳細知りたい方は twitterで DM下さい。
まとめ
アクセシビリティ を向上させることは、機械を含む多くのユーザーが利用できるサイトになることで、直帰ユーザーを減らし、たり SEO対策になったり、UXの向上にも繋がります。
多くのことは HTML や CSS のマークアップちゃんとセマンティクにコーディングすることで対策できますので、このようなことを意識して、デザインしたりコーディングして頂ければと思います。
ぜひ、優しさあふるるサイトを作りましょう！
日焼けでチャラく見える僕が、チャラくないことを語ってすいませんw
では。