ワンクリックに命がけのWEB・ホームページ制作会社「エムハンド」

インバウンドサイトを作るときに知っておきたいこと

アクセシビリティの観点から考える。困ったページ、トホホなページあるある

  • WEBデザイン

数えきれないくらい多種多様なスマートデバイスに加え、ウェアラブル端末も登場。閲覧環境は、ますます複雑化してきました。そして、高齢化や国際化などによって、閲覧者も様々に…。このような背景から、誰でも、どのような環境や状況下でも、見やすく使いやすいWEBサイトを作ることが、以前にも増して求められるようになっています。そこで、あらためて注目が集まってきているのが「アクセシビリティ」です。

とはいえ、ひと口に「アクセシビリティ」と言っても、なかなかとらえどころがないテーマですよね。そこで今回は、WEBサイトで日頃よく見かけるわかりやすい事例や、身近な事例をとりあげ、アクセシビリティについて考えるきっかけにしてみたいと思います。

そもそもアクセシビリティとは?

ところで、アクセシビリティとは?と、あらためて質問されたら、あなたはどう説明しますか?よく似た言葉にユーザビリティがありますが、それとの違いは何でしょうか?それぞれの定義を調べてみると、次のようになっていました。

●ユーザビリティ
特定の目的を達成するために、特定の利用者が、特定の利用状況で、有効性、効率性、そして満足とともにある製品を利用することができる度合い(ISO 9241-11)。

●アクセシビリティ
様々な能力をもつ最も幅広い層の人々に対する製品、サービス、環境又は施設(のインタラクティブシステム)のユーザビリティ(ISO 9241-20/JIS X 8341-1:2010)。

”特定”の利用者や状況を想定した範囲での利用のしやすさが問われるユーザビリティに対して、“最も幅広い層”を対象とするのがアクセシビリティ。簡単に言えば、「誰でも、どんな状況下でも使いやすくすること」という感じでしょうか。WEBアクセシビリティというと、「高齢者や障がい者への対応」ととらえられがちですが、そういう特定の対象者だけではなく、それらの人も含めたすべての人が対象だということになります。

また、WEB周辺でアクセシビリティがあらためて論議されるようになった大きな理由として、パソコン以外にスマートフォンやタブレット、スマートウォッチなど、様々なデバイスからアクセスする人が増えてきたこともあります。これについても、単なる端末による表示のされ方の違いというだけでなく、それらを利用する環境や利用シーン、デバイスをまたいだ利用までをも考えたアクセシビリティが問われるようになりつつあります。

よくあるアクセシビリティ上、困ったページ

この夏、国内でもアクセシビリティに関して本格的に取り組んだ書籍「デザイニングWebアクセシビリティ・アクセシブルな設計やコンテンツ制作のアプローチ」が出版され、あるセミナーでその執筆者がいくつかの問題例を取り上げているのを聞く機会がありました。ここからは、そこで共感したものを含め、身近によくあるアクセシビリティ観点での問題事例をいくつかピックアップしてみたいと思います。

通常の考え方に沿わないフォームボタン

0904_img1_2

いまだに、配置がまぎらわしいこんなフォームボタンに出くわすことがあります。次のアクションを促すボタンの配置が、一般的な考えと逆になっています。目線は基本的には左から右へと動いていきますので、その意味でも不自然です。

「テキストでちゃんと書いてあるのだから、わかるはず」はNGです。WEBに慣れていればいるほど、文字ではなく、経験的・反射的にクリックしてしまいます。

このようなボタンに出くわすと、左右が逆になるだけで、人間はこんなにも操作に不便を感じるのだと改めて気づかされます。

0904_img2_3

なおフォームに関しては、次のようなものもありがちです。

とにかく退会は止めて欲しい、という気持ちはわかりますが、誤操作を招きやすいですし、ユーザーが退会するために操作をしているのに、そこを無理に引き留めるのはやはり好ましくありませんね。

動画の利用に伴う「音」の問題

インターネットが普及し始めた頃によくあったのが、サイトにアクセスすると音が鳴り始めるというものです。「それまでの紙媒体にはない、インターネットらしい表現を…」、ということだったのでしょうが、「勝手に音がするのは迷惑」「アクセシビリティ上問題」と言われて来たこともあって、さすがにほとんど見られなくなりました。

しかし最近になって、再びこの問題が広まりつつあります。それは「動画」です。先日、周りに人がいる状況であるサイトにアクセスした時に、いきなり音がし始めて困ったことがありました。後になって、アクセスしたサイトのメインビジュアルが動画になっていて、それが自動再生されて音が出ていたのだとわかりましたが、その時は何が起きたのかわからず大あわてでした。ページをスクロールしていて、動画の箇所が画面に表示されていなかったため、どこから音がしているのか把握できなかったというわけです。

動画をウェブページに埋め込むことは、今や一般的です。その際、より多くの人に視聴してもらうために、ページの読み込みと同時に動画や音声を自動再生させたい…と思うこともあるかもしれません。しかし、もしも閲覧者が予測できない状況で再生されるとしたら、好ましいとはいえません。そこは慎重に考えたいところだと思います。

判読できない「CAPTCHA」による混乱

「CAPTCHA」という技術をご存知でしょうか?認証時によく使われる、例えば右のようなもので、名前は聞いたことがなくても、実際には多くの人が目にしていると思います。

0904_03

会員登録やログインなどの認証時によく表示されるもので、画像で表示されたアルファベットや数字を入力させることで、ロボットによる不正なアクセスではなく、人が入力しているということを見分けることを目的にしています。

このCAPTCHA 、セキュリティを強化しているという点では頼もしいのですが、あまりにも判別不能な文字続き、いくら画像を切り替えても読み取れない…という人もいて、そうなると入力を続ける気力は萎えてしまいます。視覚障害のある方のアクセシビリティなどの点ではもともと疑問のある技術でもあり、アクセシビリティを阻害してまで導入するべきかどうかについては否定的な意見も耳にします。

0904_04jpg

そんな中で、親切なやり方だなと思ったのが、資生堂のオンラインショッピングサイト「ワタシプラス」のログイン認証。4つの枠の中で、花の画像が見える箇所をクリックさせることで、CAPTCHAと同じような役割をもたせています。花が表示される位置や数は、ページが読み込まれる度に変わるようになっています。視覚障害がある方への問題は残りますが、先ほどのような例と比べれば、利用者への配慮のあるやり方だと思います。

外部サイトは別ウィンドウで開くのが常識?

WEB制作には、いくつかのセオリーのようなものがあります。例えば、「外部サイトへ遷移するリンクは別ウィンドウ(タブ)で開く」というのもその代表的な一つですが、これについては否定的な意見があります。その理由は次のようなものです。

  • ブラウザの戻るボタンが使えなくなってしまう。
  • 別ウィンドウ(タブ)が開いていることに気付かないユーザーも多い。

一方、別ウィンドウで開くようにするというルールの背景には、「自分のサイトは開いたままにしておいて欲しい」という離脱を防ぐ目的があり、必ずしもアクセシビリティを考慮して誕生したのではなかったという点で、あらためてそれでいいのかが問われるようになっています。また、最近では、サイト内の遷移でも別ウィンドウが良いのでは?という意見も多くなっているようですが、その理由はなんと、「amazonの商品ページがそうなったから」というもののようです。

この話は非常に象徴的だと思うので取り上げましたが、自分たちの都合やメリットを優先したり、ただ大手サイトに追従したりするだけではアクセシビリティを考えているとはいえません。あくまでも、利用者視点にたって判断し、自社なりのアクセシビリティの考え方やルールを作っていきたいですね。

今回のまとめ

  1. アクセシビリティは、ユーザビリティよりも幅広い概念。あらゆる条件下での使いやすさを実現すること。
  2. フォームや音声など、昔から続いている問題がいまだに改善されていないこともある。
  3. 既成概念や一般ルールとしてではなく、利用者視点に立って、アクセシビリティを考えることが大切。

利用者も様々なら、デバイスも状況も様々。コンテンツ制作者が全てをコントロールすることは、今後ますます難しくなります。だからこそ、考え方や姿勢が問われてくるような気がします。「セキュリティ上必要だから」「それが一般的なセオリーだから」などと、深く考えないでやってきたことでも、本当にそれがいいのかを問いなおしてみると、答えが変わってきたり、新しいやり方が生まれてきたりするかもしれません。この記事を、そのきっかけにしていただければうれしく思います。

<関連記事>
進むスマホシフト。レスポンシブWEBデザインはマルチデバイス時代の最適解か?

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    「プッシュ通知はアプリのもの」は過去の話。簡単にできるブラウザでプッシュ通知する方法

  5. 5

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  6. 6

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  7. 7

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  8. 8

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  9. 9

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  10. 10

    結果につなげるLINE@活用。最新集客事例に学ぶ成功の6つのポイントとは?

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  5. 5

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  6. 6

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  7. 7

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  8. 8

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  9. 9

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  10. 10

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

ワンクリックに命がけのホームページ制作会社「エムハンド」