web系に関わる情報を 専門家が毎日発信!

アクセシビリティの良い例と悪い例【webデザインの基本】

 

先日こんなツイートをしましたが今回は、アクセシビリティの良い例と悪い例を解説します。アクセシビリティとは、ユーザが欲しい情報を見つけやすい、したいことがしやすい、そういう文脈で使われます。webデザインの基本でもあります。

 

この記事を書いている僕は、webデザイン分野で5年ほど経験がありまして、アクセシビリティもウェブアクセシビリティと元々の語源であるアクセシビリティに分かれるのですが、前者に関しては知見が深いので信頼性は高いかなと思います。

 

アクセシビリティとは

 

まずアクセシビリティとは何かを解説したいと思います。wikipediaでは下記のように解説されていますね。

 

近づきやすさやアクセスのしやすさのことであり、利用しやすさ、交通の便などの意味を含む
IT分野では、使いやすさや利用しやすさを意味するユーザビリティに近い意味として使われることが多い。この場合、技術に依存せずさまざまな情報端末やソフトウェアから利用できることを目指している
引用:アクセシビリティ(wikipedia)

 

このようにアクセシビリティとは、言葉そのままでいうとアクセスのしやすさなんですが、webやITの分野では使いやすさなどのような文脈で使われるので、ユーザビリティという言葉に近い意味を持っています。しかし、ユーザビリティとの違いでいうと、個人の見解としては、ユーザビリティは操作性にフォーカスしていて、アクセシビリティとは、視認性など見た目にフォーカスしている側面が強いということですね。

 

では、アクセシビリティをもう少し掘り下げます。アクセシビリティはPCやインターネットが普及する前からあった言葉なので須賀、今で先ほどのwikipediaにもあるようにウェブアクセシビリティと本来的なアクセシビリティという2つがあります。根本は一緒です。

 

ウェブアクセシビリティ

ウェブアクセシビリティは何かと言うと、ネットで検索して見ている画面においてユーザが欲しい情報を見つけやすいとかそういう文脈で使われます。例えば、Googleの検索結果一覧では一度押下したリンクは青文字になりますが、これは数多の色からGoogleがこの青色が最もCTRが高いと判断し、適用されていたりします。

 

こういったユーザが視認性高く見つけたい情報を見つけられることを、ウェブアクセシビリティが高いというわけですね。webデザインの基本は、ユーザが欲しい情報を見つけられる、があるのでwebデザイナーやwebディレクターはアクセシビリティはおろそかにできません。

 

元々のアクセシビリティ

一方でウェブが普及する前から、アクセシビリティという言葉はあって、階段の上り下りとかそういった人間が日常でしている行動などの際に、しやすいかしにくいかという文脈でアクセシビリティという言葉は使われますね。

 

 

ウェブアクセシビリティの良い例と悪い例

 

では、ウェブアクセシビリティの良い例と悪い例を簡単に紹介したいと思います。それぞれの例を見ることで、アクセシビリティとは何なのかを理解できると思います。ちなみに、アクセシビリティはCVRなどwebサイトのKPIに直結するほど重要です。

 

良い例

まず良い例ですが、コントラストや文字の色で評価されることが多いです。例えば、下記の説明文を見てください。

 

weblife-forjobはwebやITで働く、働きたい人を応援しています。HPこちら

 

これは通常よく見るリンクが青色になっている例ですね。良い例というより普通の例ですけど。これなら見つけやすいと思います。

 

悪い例

一方でウェブアクセシビリティが悪い例というのはこういった例を指しますね。かなり見づらいかと思います。

 

weblife-forjobはwebやITで働く、働きたい人を応援しています。HPこちら

 

こちらが黄色の文字に背景色が灰色にしています。端的に見づらいですよね。これが仮に重要な情報だとするとユーザにとって探しづらくて大変です。これは悪いウェブアクセシビリティの例です。極端ですが、昔のwebサイトだと乱暴にいうとこういったデザインもあったわけです。

 

アクセシビリティとwebデザイン

 

最後にアクセシビリティとwebデザインの関係性について考えたいと思います。アクセシビリティは、webデザイン理論でいうと、コントラストや色使いでその良し悪しが左右されますね。先ほども解説した通りで、アクセシビリティが悪いwebデザインだと、ユーザが不満に感じてすぐに離脱してしまいます。

 

そのため、売り上げも上がりませんし、今でいうとGoogleのSEOにも悪影響が出る可能性もありますね。直帰されるので。そのため、こういったwebデザイン理論も全然バカにできないので、webデザイナーさんやwebディレクターはアクセシビリティを意識してwebデザインを行うことが求められますね。

 

アクセシビリティは悪いがUXデザインとしては目的達成されて良い例

 

ちなみにですが、結構有名な話ではありますが、アクセシビリティは悪いが目的が達成されているのでUXデザインとしてはよくUXデザインの話としてあげられる好例があります。何かと言うと、公園などでよく見かけるベンチにある出っ張ったものです。

 

あれは、肘掛としても中途半端ですし邪魔だったりしますが、あれは公園内でホームレスが居座ることを防ぐためのUXデザインということで有名です。アクセシビリティは悪い=横になれない=ホームレスが寝れない、という構造になるのでアクセシビリティは悪いけど、UXデザインとしては目的達成できている好例です。

 

まとめ

 

ということでアクセシビリティについて良い例と悪い例を解説しました。アクセシビリティはまだまだ奥が深いのでおって更新したいと思います。

最新情報をチェックしよう!