Webサイトをアクセシブルにするための基本的な考え方

こんにちは、UIデザイナーの水澤です。

以前書いた記事「アクセシビリティの入り口」で触れていた「デザイニングWebアクセシビリティ – アクセシブルな設計やコンテンツ制作のアプローチ」を読み終えました。

書籍から得た学びはたくさんあるのですが、今回は Webサイトをアクセシブルな状態にするための基本的な考え方を、自分なりの所感とともにいくつか紹介します。

特定のデバイス・操作・感覚に依存しないようにする

特定のデバイスに依存している状態の例として、書籍ではカルーセルUI が挙げられています。カルーセルUI そのものがアクセシブルではないということではなく、カルーセルの表示を切り替えるためのボタンが設けられていない場合に、スワイプできない環境のユーザーは操作できない状態になるからです。

これを読んでいるとき、カルーセルUI でよく見られるパターンとしてスライド数を表すドットのような表示を頭の中に思い浮かびました。そういえば、切り替えボタンがないときはその部分をクリックして切り替えをしていましたが、かなり小さいサイズなので視覚にも依存している状態とも言えます。

仮にそのドット部分に代替テキストを入れることで視覚に依存しない状態を狙ったとしても、そもそも見えるユーザーからするとスワイプできることがわかりにくいという問題もありそうです。

ユーザーが目的の情報を見つけられるようにする

書籍を読むまでは当たり前のように感じながらも、そのために具体的に何をするかの言語化が難しいとも感じていました。書籍では、戦略の策定から実装・コーディングまでにどのような観点が必要か説明されており、自分にもまだまだ検討できることがあると思えるようになりました。

デザインにおいては、ユーザーが迷ったときのために現在地がわかるようにしたり、目的の情報を探せる手段をいくつか用意したりすることがアクセシブルな状態として紹介されています。このような UIデザインに関する検討だけでなく、ユーザーがページを訪問する直前は検索エンジンで検索をしていることがほとんどのため、コンテンツを適切に情報整理することも必要という気づきがありました。

適切に整理されたコンテンツは、検索エンジンのクローラーが適切にコンテンツを読み取ってくれます。書籍を読むまではアクセシビリティと SEO をまったく別物として捉えていたのですが、深い関係性があるとわかります。

ユーザーが予想できない動きは避ける

予想できない動きの一つに、新規タブ・新規ウィンドウの表示が挙げられています。アクセシビリティの観点として、視覚に頼れない環境のユーザーには新規タブ・新規ウィンドウが表示されてもそれに気付けない・混乱してしまうという説明がありました。過去に勤めた会社では外部サイトへのリンクは新規タブやウィンドウで表示していたのですが、アクセシブルにするためにはただ慣習として行うのではなく、目的から考えてその手法が本当に適切か検討する必要があります。

同じ理由で、ユーザーの操作を待たずに入力フォームのフォーカスを勝手に移動させる動きも、アクセシビリティ観点では避けるべきものとされています。よくイメージするのは郵便番号や電話番号など、複数の入力フォームが設けられている項目です。

個人的には勝手に移動してくれる挙動が便利と感じていたのですが、見えない環境下のユーザーに対して予想できない動きをしていることは明らかなため、アクセシブルな状態にするためにはこの考えも改めなければいけません。

おわりに

今回は書籍から学んだアクセシブルにするための基本的な考え方について、自分なりの所感に触れながらいくつか紹介しました。

実際の内容ではより具体的に多くの解決アプローチが掲載されているので、自分のような Webアクセシビリティの初学者には多くの学びがあり、とても参考になりました。

ひとりでも多くの人がアクセスできるように、この書籍を定期的に読み直しながら基礎となる考え方を実践していきたいと思います。