アクセシビリティ ~視覚障がい者にも使いやすいwebプロダクトとは？~

こんにちは、株式会社アトラエでwevoxのengineerをしている中村充です。
この記事は、Atrae Advent Calendar 2020 の2日目の記事です。

1日目の記事(デザイナーがデータ分析に業務範囲を広げて学んだこと)はこちら

本記事では、プロダクトづくりをしていく中でアクセシビリティについて検討する機会があり、そこでの学びを振り返ります。
多くの人にとって使いやすいプロダクトづくりをしたい方にみていただければと思います。

視覚障がい者の方はどのように情報を取得するのか？

視覚障がい者がどのようにパソコンを利用するのかは下記の動画がわかりやすいので見てみてください。
https://youtu.be/iN5AMc5mXAk

動画のように、視覚障がいを持っている方々は基本的にソフト(スクリーンリーダー)を用いてパソコンを利用します。また、画面の探索をしながら情報を取得していきます。

スクリーンリーダー
視覚障がい者は、パソコンから発声される音声を聞きながらパソコン操作を行います。このとき、画面に表示される文字列を常に監視し、変化があったときにその文字列を読み上げるソフトウェアが スクリーンリーダーと呼ばれます。
ですから、視覚障がい者がパソコンを利用する上で、 スクリーンリーダーは必須のソフトウェアです。
なお、 スクリーンリーダーは、「画面読み上げソフト」とか「画面音声読み上げソフト」などとも呼ばれます。

今のwevoxは視覚障がい者の方にとって使いやすいものではなかった

wevoxは、ストレスの少ないパルスサーベイでデータを収集し、AIとデータでチームの力を最大限引き出すエンゲージメントプラットフォームです。
パルスサーベイでデータを収集するので、サーベイに回答いただく必要があります。その回答画面に置いての事例を元にお話しさせていただきます。

回答画面でスクリーンリーダーの対応ができる部分

回答画面でスクリーンリーダーが対応できていない部分

何が問題なのか？

・回答ボタンを選択できない
・回答スケール（低い~高い）がわからない
・画面上には見えない情報が読み取れてしまう
　　─ 回答の体験をスムーズにするために、次の質問を取得してきている設計になっているのだが、その情報まで取得してきてしまう

つまり、視覚的に情報を得られない場合、この回答画面は下記と同じ状況です。

116　あなたは会社のミッション・ビジョンに共感していますか？　全く共感していない　とても共感している
前へ　216　最近頭が重いと感じるときがありますか？　とてもあるほとんどない

ユーザーにとっては、上記の情報のみしか得られないため、私は今どの質問に答えていて、回答はどんな選択肢があり、どんなアクションで回答したことになるのかわからない状態になります。

解決策について

回答ボタンをinput系にし、どのスケールなのか伝える

<input type="button" class="input" placeholder="最も低い回答です" />

不可視の情報は読み上げられない対処をする

<span class="dontRead">Screen readers shouldn't read this</span>
 
.dontRead {
   speak: none;
}

上記の対応をすれば、スクリーンリーダー を用いて回答画面に遷移した際に、私は今どの質問に答えていて、回答はどんな選択肢があり、どんなアクションで回答したことになるのかわかる状態になるかと思います。

最後に

アクセシビリティは、ユーザー体験の土台にあるもので非常に重要なことを再認識しました。

プロダクトづくりをする際には誰にとっても使いやすい設計になっているのか？という観点を忘れずに設計・開発していきたいと思います。

---

最後までご覧いただきありがとうございました！

明日はデザイナーの三上さんが書きます！