スクリーンリーダーに触れてみるワークショップを「freee 技術の日 2025」で開催しました

デザイナーだったりコードを書いていたりアクセシビリティまわりのことをやっていたりする id:ymrl です。すっかり半年も前になってしまいましたが、昨年11月30日に開催した「freee 技術の日 2025」で、スクリーンリーダーに触れてみる「アクセシビリティワークショップ」を開催しました。その紹介をしたいと思います。

なぜアクセシビリティワークショップをやるのか

アクセシビリティというのは、「製品やサービスにアクセスできる利用状況の度合い」というふうに表現されます。障害のある人や高齢の人、何らかの不便や不自由がある人でも、なるべく問題なくアクセスできる製品やサービスであることは、freeeの目指す「だれもが自由に経営できる統合型経営プラットフォーム」に必要不可欠なものです。そのためにfreeeは「freeeアクセシビリティー・ガイドライン」の策定をはじめ、いろいろな形でアクセシビリティを高めるための取り組みをしてきました。

開発者としての私たちは、自分たちと同じようなユーザーが、同じような状況で製品やサービスを使ういう前提を無意識のうちに置いてしまいがちです。しかし実際には、多くの人に使ってもらえば様々なユーザーが様々な状況で利用することになります。そのなかには障害者や高齢者をはじめとして、利用に困難を感じることの多い人もいます。しかし、なかなか私たちはそういった人や状況を想像することができません。

そこで、PCやスマートフォンに搭載されている、スクリーンリーダーという音声読み上げ機能を使う体験をしてみよう！というのがこのワークショップです。freeeには全盲の視覚障害者として、スクリーンリーダーを使ってPCを操作して仕事をしているエンジニアがいます。スクリーンリーダーで実際にPCやスマートフォンの操作をすることで、音声を頼りに操作できる意外さや、その一方で操作が難しい場所もあることを体験してもらうことがワークショップの目的でした。

講師（筆者）が手を挙げ、挙手を促している。もう片方の手にはスマートフォンを持っている。赤い「技術の日」Tシャツのうえにパーカーを羽織っている — ワークショップは会議室で、テーブルを囲むかたちで開催しました

ワークショップの内容

今回のワークショップでは、事前の準備なしで、1時間でできるようにということで「参加者のスマートフォンで、スクリーリーダーでWebページを見てもらう」という内容にしました。PCのスクリーンリーダーのほうが機能が多く、特にWebについては私が詳しいのもあって内容の濃いものにできるはずなのです。しかし、スクリーンリーダーによって操作方法が大きく異なり、そもそもキーボードでの操作をたくさん覚えるのが大変ということもあって、PCよりは覚えることの少ないスマートフォンで体験してもらうことにしました。普段使っている普通のスマートフォンで実はスクリーンリーダーが動くというところにも面白さを感じられるものでもあろう思います。そして、ここからアクセシビリティに興味をもつ開発者が1人でも増えてくれると嬉しく思います。

ワークショップの進行・講師は私が担当しつつ、全盲のエンジニアのkennyさんに実際のユーザーがどんなふうに使うのかを聞いたりしながら進めました（本当はもう一人、catさんにも来てもらう予定でしたが、残念ながら体調の都合で参加できずでした……）。参加者のフォローにはshunitoさんに協力してもらいました。

参加者たちの背中の奥で、黄色いfreeeロゴTシャツを着て見守るように座っている — kennyさん

iOSにはVoiceOver、AndroidにはTalkBackという、それぞれ別のスクリーンリーダーが搭載されています。これらも操作方法はだいぶ違うのですが、基本的な機能は非常に似ています。ワークショップでは、この2つのスクリーンリーダーで同じことをそれぞれひとつずつやる、という流れで行いました。みんなが同時にスクリーンリーダーを操作しはじめると大変なことになるので、参加者にはイヤホンを持ってきてもらいました。

講師としてはデモ用に、普段会社で検証用に使っているiPhoneとAndroidのスマートフォンを一台ずつ用意して、それらはBluetoothスピーカーに接続して参加者に音声を聞いてもらいやすくしておきました。さらに私は普段使っているiPhoneとAndroidを一台ずつ持ち込み、手元に4台のスマートフォンがある、という状態になっていました。

スクリーンリーダーの起動・終了の設定

スクリーンリーダーを実際に起動する前に、簡単に起動と終了ができるようにしておきます。

iOS VoiceOver

「設定」の「アクセシビリティ」→「ショートカット」を開く
「VoiceOver」にチェックを入れる

こうすることで、サイドボタンまたはホームボタンのトリプルクリックでVoiceOverが起動するようになります。「ショートカット」に指定されているものが複数あるとダイアログで選ぶようになるので、VoiceOverの操作に慣れないうちは1つにしておくのが良いでしょう。

Android TalkBack

「設定」の「ユーザー補助」→「TalkBack」を開く
「TalkBackショートカット」をON
「音量ボタン」になっていない場合は、「TalkBackショートカット」をタップしてチェック

これで、音量ボタンの+と-を同時に長押しでTalkBackの起動・終了ができるようになります。

スクリーンリーダーの読み上げ内容を見られるようにする

スクリーンリーダーは、ときどき不思議な読み方をすることがあります。目が見えている人は「何言ってるんだ？」と思ったときに確認できるように、読み上げている内容を見えるようにしておくと良いです。

iOS VoiceOver

「設定」→「アクセシビリティ」→「VoiceOver」を開く
「キャプションパネル」をON

Android TalkBack

「設定」→「ユーザー補助」→「TalkBack」→「設定」の画面を開く
「TalkBackをOFFにする手順を表示」をOFF
「詳細設定」→「デベロッパー向けの設定」で「音声出力の表示」をON

デフォルトでは、TalkBackが起動しているとき、画面の中央付近に「TalkBackをOFFにする手順」のテキストが表示されます。ふだん視覚に頼って操作している人にとっては非常に邪魔なものであるはずなので非表示にしています。

スクリーンリーダーの起動

ここまで設定して、いよいよ起動です。

iOSの人は、サイドボタンまたはホームボタンのトリプルクリック
Androidの人は、音量ボタンの+と-を同時に長押し

で、スクリーンリーダーが起動してスマートフォンが喋りだします。ここでスクリーンリーダーの起動と終了を3回くらい繰り返して、「スクリーンリーダーの操作方法がわからなくなっても終了すればいいんだ」というマインドになっておくのが良いです（ワークショップでもそのための時間を取りました）。

スクリーンリーダーで、Webを読んでみる

基本的な操作は、iOSのVoiceOverもAndroidのTalkBackも似ています。

タップ: カーソルの位置をタップした位置に移動する
ダブルタップ: カーソルの位置にあるものをタップ
右にフリック: カーソルの位置をひとつ進める
左にフリック: カーソルの位置をひとつ戻す
上下にフリック: スクリーンリーダーの設定に応じた操作
- iOSでは2本指で「ねじる」ジェスチャーで設定を変更
- Androidでは3本指で上下左右いずれかへのスワイプで設定を変更

ジェスチャーを覚えるのはなかなか大変なので、チートシートを用意しておくのが良いでしょう。ワークショップでは、私が以前作ったチートシートをfreee風の色にしたものを印刷して参加者に配布しました。

左側にiOS VoiceOver、右側にAndroid TalkBackの様々な操作方法が書かれている。左右それぞれにジェスチャーを矢印で表現した図もある — iOS VoiceOver / Android TalkBackチートシート（freee風味）

まずは、左右のフリックでWebページを読んでみる練習をしました。Webページを開くところまではスクリーンリーダーはオフで、ページが表示されてから、スクリーンリーダーを起動して、音声を聞きながら画面の適当なところをタップして、そこから右へのフリックで読んでいきます。

画面をタップするとその場所に配置されているものが読み上げられるので、それを頼りに読んで回ることもできますが、最初から順番にページの内容を読んでいくには右方向のフリックを繰り返していくことになります。フリックによって、スクリーンリーダーのカーソルが移動していき、その部分にあるものが読み上げられます。画面の上では、スクリーンリーダーのカーソルの枠線が表示されるので、視覚的に挙動を確認できます（もちろん、スクリーンリーダーのユーザーがこれを見えているとは限りません。見えてないことのほうが多いでしょう）。

ワークショップでは、freeeでの研修に使用しているfreee Accessibility Trainingというページを使用しました。スクリーンリーダーをオフにして、スライドに表示したQRコードからページを開き、スクリーンリーダーをオンにして、「画像」のページへのリンクを探してみます。

見出しジャンプ機能を使う

ページの内容を全部読み上げてそれを聞いていくのは大変なので、ショートカットがしたいものです。そういうときにはPC向けのスクリーンリーダーにも存在する機能である「見出しジャンプ」を利用できます。

見出しジャンプをするためには、上下方向のフリックを使用します。ただし、上下方向のフリックによって何が起きるかは、別のジェスチャーによって切り替える必要があります。

iOSでは2本指で「ねじる」ジェスチャー
Androidでは3本指で上下左右いずれかへのスワイプ

iOSのジェスチャーはわかりづらいですが、画面に親指と人差し指をのせ、画面の上にある「つまみ」を回すような感覚です（それらしきグラフィックが表示されます）。Androidは三本指であれば縦でも横でも切り替えができます。このジェスチャーを何度か繰り返し、「見出し」と言ったところで下にスワイプすると、スクリーンリーダーのカーソルの位置よりも後ろにある見出し要素にジャンプすることができます。

「画像」ページにはいろいろなサンプルがあり、それぞれに見出しがついています。Wikipediaもたくさん見出しのあるページが多く、「アンパンマンの登場人物一覧」のページは社内でよくデモに使っています。