アクセシビリティを全く知らない人が理解できるようになる「 デザイニングWebアクセシビリティ」

アクセシビリティを全く知らない人が理解できるようになる「 デザイニングWebアクセシビリティ」

2021年1月4日
Web制作について

こんにちは!管理人のあやかです。

Web界隈のみなさま。「アクセシビリティ」ってご存知ですか?

「アクセシビリティって言われてもふんわりしかわからないんだよね…」
「言葉聞いたことあるよ!」
「なんかユーザーが使いやすくするようにコーディングするやつ?」


私は「アクセシビリティ 」と聞いた時、こんな感じでした!!!

私は現在コーダーを職業としていて、アクセシビリティに密接に関わるお仕事ですが、この有り様です(笑)

「アクセシビリティ」とはなんぞや??と思ったことがあり、「デザイニングWebアクセシビリティ」という本を読んで学びを得たのでブログでお伝えします!

デザイニングWebアクセシビリティ
created by Rinker

「アクセシビリティ」って何?

The power of the Web is in its universality.

Access by everyone regardless of disability is an essential aspect.

ウェブが優れているところは、その普遍性 (みんなが使えること) である。
障害があるか否かに関わらず、誰でもアクセスできるということは、ウェブの本質的な在りかたなのである。

https://www.w3.org/standards/webdesign/accessibility

アクセシビリティ(accessibility)は、めちゃめちゃ簡単にいうと、「いかなる能力、環境、状況にかかわらず、サービスやコンテンツを利用できる」ということ。

例えば、「マウスが壊れてしまってキーボードで操作しなきゃ」、「フォームが入力しずらくてタイムアウトしちゃった…また最初からだ!!(怒)」みたいなこともアクセシビリティに含まれます。

なんかね、アクセシビリティというと「目の見えづらい人」「耳の聞こえづらい人」といったような身体の能力の差異を抱える方向けのサービス改善って思いません??

そうではなくて、あらゆる人が、どんな状況でもストレス無くWebサイトが利用できるというのがアクセシビリティということです!

なぜアクセシビリティって必要なの?

いろんな人が利用できるようにするのがアクセシビリティというのは完全に理解した!!

でも、なんでそれってわざわざ気にして対応する必要があるの?と思いますね。

デザイニングWebアクセシビリティでは、以下のように書いています。

  • アクセスできる人を増やすため
  • 様々なデバイスに対応するため
  • SEOのため
  • ユーザビリティの向上・改善のため
  • ユーザー体験の向上、改善のため
  • 規格への対応のため
  • 取り組みをアピールするため

ざっくり書くとこの7つの理由があるそうです。
この7つの理由としては、つまりWebサイトで重要な「集客」に関わっていると管理者は推測しました。

どんなに素晴らしいコンテンツ(例えばECサイトの「商品」、ブログだと「記事」にあたります)を発信していても

「アクセスできなければ見れない」
「操作がわかりにくければ見ない・使わない」
「SEOで順位が上がりにくくて認知されない」


といった集客〜ユーザーの獲得に繋がらなくなってしまいます。

せっかく素晴らしいコンテンツを発信しているに、魅力がユーザーに伝わらなくなってしまうのですね。

よって、「コンテンツの魅力を正しくユーザーに伝えるためにアクセシビリティを対応しましょう。」という解釈をしました。

具体的にアクセシビリティを対応するためには

アクセシビリティ対応するためのノウハウが「デザイニングWebアクセシビリティ」にはたくさん詰まっているのですが、めちゃめちゃあるので管理者がピックアップしたものをお伝えします。

アクセシビリティの対応:カルーセルについて

Webサイト制作をしていて、500%くらい必須で対応するカルーセル。

本を読んで、「なんとなくやっていたことがアクセシビリティを損ねてた…!」という気づきになったのでご紹介します。

カルーセルで何気なく実装している「自動スライド(一定時間で自動的に切り替わるスライド)」。

自動スライドはアクセシビリティを損ねている可能性があるので、「手動スライド」にしましょう!

まずアクセシビリティ的には何が問題かというと、以下の点が挙げられます。

  • ユーザーがテキストを読んだり、何かを見て内容を理解する速度には個人差があり、読む速度が遅い場合は、一定の時間で切り替わってしまうと最後まで読めず理解できなくなってしまう
  • クリーンリーダーのユーザーには、中身が切り替わっていることが気付かない可能性がある
  • カルーセルにリンクがついていた場合、ユーザーがクリックしようとした瞬間に切り替わり誤操作を招く
  • 視差効果で酔ってしまって不快に感じるユーザーもいる

カルーセル一つでもこれだけの問題点があるとは…!

以下は、改善点です。

  • 手動で動かせるようにする(キーボードでも操作できるようにする)
  • 自動で始まったものは一時停止ボタンをつけるようにする
  • そもそもカルーセルを見直し、1枚だけ表示してアクセスするたびに内容をランダムに表示する対応にする
  • 視差効果などのアニメーションはコンテンツ内の1点に集中させる

ほとんどのユーザーはカルーセルの1枚目しか目にしないという調査結果もあるそうです。

ユーザーに何を見てもらいたいか・何を知ってもらいたいかの導線設計にも関わってくる部分なので、何を必要として対応をするかを選定して行きたいですね。

デザイニングWebアクセシビリティを読んで得た知見をどうやって活かしていくか

先程デザイニングWebアクセシビリティに書かれていることをご紹介しましたが、本当にたくさんあるアクセシビリティの中の一つに過ぎません。

本ではより細かく「ナビゲーションの設計」や「コンテンツ設計」など書かれていて、一つ一つが目から鱗の情報ばかりです。

デザイニングWebアクセシビリティを読んで良かったなと思うメリットとしては、「得た知見をディレクターさんやデザイナーさんに提案ができる」というメリットではないでしょうか。

アクセシビリティについて知識を持つと、コーディングする時にデザインの部分で不足していたアクセシビリティをカバーできたり、設計部分に提案ができるコーダーとして強みになるのではないでしょうか。

なかなか提案しづらいな〜と思った時でも、自分の持っているアクセシビリティの知見をできる限りWebサイトに活かすことでユーザーのためになります。

MERIT
  • ユーザーがより使いやすくなりリピーターに繋がる
  • アクセシビリティについて提案・改善ができる

余談ですが、アクセシビリティがどのくらい適用できていて、どの部分を正せばより良いアクセシビリティ対応になるのかチェッカーもあるそうなので、是非導入してみてください。

miChecker:https://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/michecker.html
W3C Markup Validator:https://validator.w3.org/unicorn/?ucn_lang=ja

また、アクセシビリティを学ぶ時に教えていただいたURLを掲載しますので、より深く学びたい時にご覧ください。

freeeアクセシビリティガイドライン:https://developers.freee.co.jp/entry/a11y-guidelines-202004.0
accrefs Webアクセシビリティ参考資料まとめ:https://accrefs.jp/
MDN:https://developer.mozilla.org/ja/docs/Learn/Accessibility/WAI-ARIA_basics

ではでは!

デザイニングWebアクセシビリティ
created by Rinker