こんにちは、WebアクセシビリティチームのKeishimaです。
先日社内で開催されたTech Week 2024にWebアクセシビリティチームとしてブースを出展しました。
この記事では、私たちがブースを出展した経緯や行ったことを紹介します。
Tech Week 2024とは
Tech Week 2024とは、2024/9/2(月)から 2024/9/6(金)まで開催された、社内のエンジニア向けの週間イベントです。
「Global all-engineer collaboration forum」をテーマに、国内外の各拠点に在籍するエンジニアがLINEヤフーの東京・紀尾井町オフィスに集合しました。
講演や社内プラットフォームの相談会ブース、ハンズオン、ハッカソン、懇親会などを通じて、技術やエンジニア同士の理解と交流を楽しむイベントになりました。
経緯とブース内容
Tech Week 2024の相談会ブースでは、社内プラットフォームの担当者と相談を行うことを目的にさまざまなブースが出展されました。
私たちWebアクセシビリティチームも、非アクセシブルな状況の体験を通して、アクセシビリティを身近に感じてほしいという想いから、Tech Week 2024の相談会ブースへの出展を行いました。
ブースで実施した内容は以下の2つです。
- 識別しにくい色がある色覚特性(P型/D型)を体験するためのメガネ「バリアントール」や、コントラスト低下・視野狭窄・中心暗点といったロービジョンの見え方を疑似体験するメガネ「ロービジョン体験キット」を使って視覚的な違いを体験
- 普段使っている端 末で、スクリーンリーダーを使って操作してもらう体験
視覚的な違いを体験してもらうコンテンツでは、赤と緑のLEDの色の違いや、お肉を焼いている写真の他、社内システムや社内Wikiでやりがちな表現を中心に、異なる見え方を体験してもらいました。
内容については比較的シンプルであるほか、Tech Blogの形ではその中身が伝わりにくいものもあるので割愛させていただきます。
スクリーンリーダーの体験コンテンツでは、スクリーンリーダーの扱いに比較的慣れているWebアクセシビリティチームのメンバーが、相談会ブースで簡単なレクチャーを行いました。
スクリーンリーダーは未経験の方にとって普段の操作と異なる部分が多いため、最初は簡単なレクチャーがあるとスムーズに使い始められます。
一度使い方を習得できれば、イベントだけの一過性の体験で終わらないこと、自分で触れるようになれば自身の仕事にも活用してもらえることを期待しています。
スクリーンリーダーの使い方のレクチャー
このセクションでは、実際にブースで行ったスクリーンリーダーの使い方のレクチャーの概要をご紹介します。
スクリーンリーダーの設定
スクリーンリーダーを起 動すると、スマートフォンの操作体系が変わることを説明しました。
いきなりスクリーンリーダーを起動すると、アプリの起動やスクリーンリーダーの終了方法がわからず困る場合があります。そのため、一般的には最初にアクセシビリティショートカットの設定を促すことが多いです。(参考: freeeアクセシビリティー・ガイドライン)
今回の私たちのレクチャーでも、まずはショートカットの説明と練習から行いました。
また、設定アプリを実際に触ってもらうことで、ブースを訪れた人が持っている自身の端末にも、アクセシビリティの設定があることを認識してもらうことができました。
基本的な使い方
続いて基本的な使い方について説明を行いました。
ここではスマートフォンの最も基本的な操作である、タップとスクロールについても、スクリーンリーダーをオンにすると操作方法が変わることを説明しました。
タップしただけでは、その箇所の内容が選択されて音声が読み上げられるだけです。普段のタップ操作で行っている「実行」の操作を行うためには、ダブルタップを行う必要があります。
画面のスクロールも複数の指で行う必要があったり、iOSの場合、挙動もスクロールではなくページ送りに近いものになるなど、通常と操作感が大きく異なることを認識してもらうことができました。
困ったとき
いつもの操作に慣れているため、実際に操作をしてもらう中で意図しないアプリを開いたり、受講者が意図しない挙動になったりす ることがありました。
こうなったときには、落ち着いて最初に説明したショートカットの操作を実行してもらうようにしました。
困ったときには、いったんスクリーンリーダーを終了させると良いことを、実際の操作の中で理解してもらうことができました。
画面を見ながらWebを利用してみる
ひととおり基本的な操作を習得してもらった後は、より実践的な形でスクリーンリーダーを利用してもらいました。
いきなり画面を見ずに利用するのは難しいので、まずは画面を見ながらWebブラウザを利用してもらうようにしました。
ここでは以下のような説明を行いました。
- タップした箇所の要素が読み上げられること
- 左右スワイプで読み上げのフォーカスが移動すること
- スクリーンリーダー専用のショートカット(iOSの場合はローター / Androidの場合は読み上げコントロール)があること
画面を見ずにWebを利用してみる
続いて、スクリーンカーテンをオンにして、画面が見えない状態でWebブラウザを利用してもらいました。
スクリーンカーテンは本来スクリーンリーダーの利用者が他人から画面を見られないようにするための機能ですが、今回は「見えないユーザー」の疑似体験として利用しました。
先ほどはできていた、画面内の読み上げたい要素をタップして選択する行為ができないため、左右スワイプで目的の要素までフォーカスを移動する必要が出てきました。
見ているときは意識しない方が多いのですが、リンクやボタンは通常のテキストと違って、リ ンクやボタンであることが最後に読み上げられるので、それに注意して読み上げを聞いてもらいました。
そして、ページのコンテンツすべてに対して左右スワイプで欲しい情報を探すのは大変なので、全項目を最初から読み上げるジェスチャーを使用してもらいました。
コンテンツの量が多いと時間がかかることから、ショートカット機能で見出しやリンクなどへジャンプする操作を紹介して、体験してもらいました。
この体験を通して、見出しやランドマークの実装が重要であることを認識してもらうことができました。
終了後にスクリーンリーダーのチートシートを配布
ひととおりスクリーンリーダーの操作を体験してもらった後に、Webアクセシビリティチームで作成したスクリーンリーダーのチートシートをお渡ししました。
iOSとAndroid、それぞれ日本語と英語のページがあります。
この記事をご覧の皆様も使っていただけるように、PDFファイルとしてご用意しました。ぜひ以下からダウンロードしてください。