AccSell Meetup 013 に参加してきた
こんにちは。昨日は、サイバーエージェント 渋谷プライムプラザで開催された AccSell Meetup 013 に参加してきました。私は、これまで Web アクセシビリティをテーマとした勉強会に参加したことがなかったのですが、当日は活発に Web アクセシビリティに関する取り組みをされている当事者の方々の面白い話を聞くことができました。記憶が薄れないうちに諸々をざっとまとめておこうと思います。
AccSell Meetup 013 『ユーザーと一緒に試してみよう! ～あの○○はどこまで使えるのか～』｜お知らせ｜AccSell
AccSell Meetup 013 『ユーザーと一緒に試してみよう! ～あの○○はどこまで使えるのか～』 - Togetter
会場へ
当日は、渋谷駅から会場までを運営の方に誘導していただき、無事に会場にたどり着くことができました。渋谷駅からの単独での移動にはかなり不安があったので、事前にその旨を問い合わせたのですが、非常に丁寧に対応していただけました。本当にありがとうございました！
セッション 1: 「Windows 10の視線追跡操作がスゴイ！」
最初のセッションでは、株式会社インフォアクシアの植木さんによる Windows 10 Fall Creators Update から追加された視線制御機能の紹介と、視線によるマウス操作や文字入力のデモが行われました。この機能は、Windows 10 Fall Creators Update が適用された PC と、アイトラッカーデバイス Tobii Eye Tracker 4C を接続することで利用できます。
デモを行っていた方は、事前に視線追跡捜査のトレーニングを1時間ほど行ったそうなのですが、特に文字入力はかなり早くできていた印象でした。iOS デバイスで VoiceOver をそれなりに使用している人が、全力でフリック入力する程度のスピードだったと思います。(誰にも伝わらない)
一方マウスカーソルの操作では、クリック操作を実行するために画面の一点を数秒間見つめる必要があるのですが、この「数秒間見つめる」という操作にはコツがいるようで、若手間取っていたような場面もありました。この辺に関しては全く想像ができないですね。とはいえ、1時間のトレーニングでかなりスムーズに PC を操作できていたのでとても驚きました。
Windows 10 視線制御 - マイクロソフト アクセシビリティ
Tobii Gaming | Eye Trackers for PC Games in Desktop, Laptops & Monitors
セッション 2: 「スクリーンリーダーを用いたユーザーテスト」
セッション 2 では、AccSell の中根さんによる Chrome と NVDA を用いたユーザーテストが行われました。「ホワイトデーのお返しを探そう」というお題で、Chrome を開くところから Yahoo!ショッピングで購入者情報を入力するまでの一連の操作が実演されました。
私自身も手元のノート PC で同じページを見つつ話を聞いていました。個人的になるほどと思ったのが、yahoo!ショッピングでカートに追加するボタンを押した後、音声でのフィードバックがされず、商品が追加されているかを判断できないということがありました。そこで、「ショッピングカートは table 要素で記述されていることが多い」ということで、中根さんは table 要素を探し、商品が追加されていることを確認していました。私は、「 table を探そう」という発想がなく、確かにショッピングカートは table で記述されていることが多いので、とても良い方法だと感じました。
セッションの最後には、ページを制作するうえで重要なこととして「適切に見出し要素でマークアップする」ということや、今回のユーザーテストを踏まえて「EC サイトのカートに入れるボタンは button 要素で記述されているとわかりやすい」といった話がありました。
それと、これはセッションと直接関係ないのですが、画像認証に対応した Rumola という Chrome エクステンションがあることを初めて知りました。割と認識制度はいいということだったので、さっそく追加しました。まだ画像認証は表れておらず試せてはいないのですが、どれほど認識してくれるのか楽しみです。
Rumola - bypass CAPTCHA - Chrome ウェブストア
セッション 3: 「ロービジョン (弱視) ユーザーによるユーザーテスト」
最後のセッションは、Cocktailz の伊敷さんによる、画面の色反転や拡大機能などを用いたユーザーテストが行われました。「楽天で2000円以下のマカロンを検索する」というお題で、一連の操作の実演が行われました。
ユーザーテスト全体を通して、ロービジョンのユーザーは全盲のユーザーと比較して困難を感じる場面が多いと感じました。画面を拡大した状態で商品の写真を見ているときに、写真にマウスオーバーすると別のコンテンツが表示されてしまい、表示しているものが消えてしまったり、購入者情報の入力などで表示されるエラーメッセージに場所によっては気づけないといったことがありました。
セッションの最後には、一番重要なこととして「コントラスト比を十分に確保する」という話がありました。私の身の回りにはロービジョンのユーザーが多くいるにもかかわらず、ページの閲覧について知らなかったことがかなりありました。
全体のまとめ
最後に、全体のまとめとして、今回のテストは一例であり、どのようなユーザーも使用している環境や視力などは異なるので、「これを実装しておけば絶対大丈夫」ということはないという話がありました。
懇親会
勉強会終了後には懇親会に参加してきました。アメーバブログや FRESH! のアクセシビリティ向上に取り組んでいる方のお話を聞けたのがとても印象に残っています。以前から Twitter などを見ていると、アメーバブログを利用している視覚障害ユーザーは多くいるような気はしていたのですが、様々な取り組みの結果、多くの視覚障害者が利用できるサービスができていることを知ることができました。
もう一つ印象に残っている話が、特に最近のアメリカや EU など、海外の先進国で開発された有名どころのフレームワークやライブラリはデフォルトでもアクセシビリティにある程度配慮された設計になっているということです。
アメリカやEU では、アクセシビリティの確保に関して具体的に法律で定められているため、おそらく多くのサイトで利用されるフレームワークなども法律に対応した設計になっているのだと思います。
これまでアクセシビリティの改善については、極端に言ってしまうと自力での細かな作業を繰り返すというような勝手なイメージがあったので、ちゃんとしたツールを導入することで、基本的なアクセシビリティを満たしたものを作れてしまうということに驚きました。
