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

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

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

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

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

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

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

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

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アクセシビリティでは、以下のように書いています。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以下は、改善点です。

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

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

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

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

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

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

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

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

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

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を掲載しますので、より深く学びたい時にご覧ください。

URL以外にも、今回ご紹介したデザイニングWebアクセシビリティはこれからアクセシビリティを学ぶ方に一読をおすすめしたい本です。