macOS VoiceOverでのデバッグ方法と、スクリーンリーダーを使用してみて考えたこと （macOS Tahoe26）
公開日:
タグ:
- #アクセシビリティ
今年に入ってスクリーンリーダーでのチェックを行うようになり、使い始めの際に迷った点や、実際に使用して感じたことをまとめました。 前半では設定や使い方、後半ではデバッグを通して考えたことを整理しています。
現在はMacBookで開発をしているのでVoiceOverでのチェックが中心ですが、スクリーンリーダーの利用者のほとんどがWindowsを使用しています。（※1）それでもアクセシビリティを考慮する上で、チェックの重要性は変わらないと考えています。
※1 第4回支援技術利用状況調査報告書 | 日本視覚障害者ICTネットワーク
VoiceOverを気軽に使えるようにするための設定とショートカット
VoiceOverの起動方法
ブラウザチェックしている時にすぐ利用できるように、起動方法のショートカットは覚えておきましょう。
Cmd+F5でVoiceOverを起動Cmdを押しながらTouchIDキーを3回素早く押す- Fnキーがない場合は
Cmd+Fn+5で起動
VoiceOverの設定
システム設定 > アクセシビリティ > 視覚サポート / VoiceOver > VoiceOverユーティリティからさまざまな設定が可能です。
VoiceOverのチュートリアルを消す
- 一般 ＞「VoiceOverの起動時にようこそダイアログを表示」のチェックを外す
- 毎回チュートリアルが立ち上がるのでオフにしておく
VoiceOverのキャプションパネルを表示する
- 「キャプションパネルを表示」にチェックを入れる
- チェックを入れると左下にVoiceOverの読み上げ内容が表示されるようになる
VoiceOver使用時にマウスの利用を許可する
- コマンド > VoiceOverのほかの制御方法 > トラックパッドのチェックを外す
- チェックをつけると、VoiceOver使用時にマウスが使えなくなるためオフにする
VoiceOver使用時にマウスカーソル位置を読み上げる
- 「キーボードの操作対象とVoiceOverカーソルを同期」にチェック
- マウスポインタ: VoiceOverカーソルを移動に設定
この設定により、マウスポインタの位置にVoiceOverカーソルが移動し、その位置を読み上げるようになります。操作に慣れていない場合は有効にしておくと便利です。
VoiceOverの基本的な利用
VOキー
正式には「VoiceOver修飾キー」と呼ばれ、ショートカットでは VO と表記されます。 Control + Option または CapsLock がVOキーとして設定されています。 操作時はVOキーを押しながら操作することが多いため、覚えておきましょう。
VO + ; （VOキーロック）
VOキーを押し続けた状態をロックできます。
移動時に便利ですが、ロック状態で Cmd + F5 を押すとVO + Cmd + F5 と認識され、VoiceOverを終了できません。
終了する際は、VO + ; でロックを解除 → Cmd + F5 で終了します。
VoiceOverカーソルとキーボードフォーカス
VoiceOverカーソルは、現在読み上げ対象となっている位置を示します。リンクに移動した際はキーボードフォーカスも追従しますが、完全に同期しているわけではないため注意が必要です。
VoiceOverカーソルの移動
VO+→/VO+←で移動VO+Spaceでアクション（クリックなど）
リンクのクリックなどVoiceOverカーソルがある場所でアクションを行う場合はVO + Space で実行することができます。
階層化された項目の移動操作
VO+Shift+↓：階層内に入るVO+Shift+↑：階層の外に出る
ブラウザの場合、本文内を読んでいる場合、VO + Shift + ↑ でランドマークの階層に移動します。中のコンテンツに入りたい際はVO + Shift + ↓ で移動します。
ローター
VO+U: ローターを表示
ページ構造（ランドマーク・見出し・リンクなど）を一覧化し、目的の項目へ素早く移動できる機能です。
左右の矢印キーで種類（ランドマーク・見出し・リンクなど）を切り替え、Enterで移動します。
読み上げの再生・停止
VO+A：現在位置から読み上げCtrl：一時停止 / 再開
現在VoiceOverカーソルが当たっている位置からの読み上げ開始・停止はよく使うため、覚えておきましょう。
VoiceOverで何をチェックするべきなのか
スクリーンリーダーだと欠損してしまう情報がないか
画像やボタンにテキスト情報が含まれているか確認しましょう。imgタグのalt属性やaria-labelなどを適切に設定し、情報の欠損を防ぎましょう。
読み上げ時に同じ情報が反復していないか
逆にていねいにしようとして情報が反復しているとストレスになります。
例）alt="〇〇の画像" → スクリーンリーダーでは「〇〇の画像 イメージ」と読み上げられる
このように重複している情報はユーザーの負荷が高くなります。実際に自分でチェックしてみてストレスを感じるポイントに関しては調整しましょう。
正しいタグが使われているか
例）
- リンク →
aタグ - ボタン →
buttonタグ - 見出し →
hタグ
視覚的には成立していても、情報とタグが一致していないとスクリーンリーダーを利用している人に誤認させてしまうことがあります。
読み上げの順番が適切であるかどうか
スクリーンリーダーではマークアップ順に読み上げられます。視覚的に正しくても、順序が崩れていると理解しづらくなります。レイアウトの調整はCSSで行い、HTML構造をキレイに保ちましょう。
VoiceOver + キーボードで操作が可能か
スクリーンリーダー利用者はキーボードのみで操作している人も多くいます。スクリーンリーダーで読み上げられた情報と、キーボード操作でUIが正しく操作できるか確認しましょう。
例）
- モーダルでtabキーを押した時に外にフォーカスが逃げる → フォーカストラップ（※2）が必要
- dialog要素 （※3）→ ネイティブでアクセシブルな実装が可能
アクセシブルなタグの使用や、キーボード操作時の配慮も心がけましょう。
スクリーンリーダブルなサイトのためにできること
適切なマークアップを心がける
マークアップでは「マシンリーダビリティ」（機械が理解することができる）が重要です。機械が理解できる構造にすることでスクリーンリーダー以外にも多くの支援技術がアクセスすることが可能になります。
キーボードだけの操作やVoiceOverを日常的に使う
普段からWebサイトを見るときに、キーボードでの操作や、VoiceOverを立ち上げてみて読んでみるなどを行うことで気づきが多くなると感じました。気軽に使えるように簡単なショートカットや操作方法を覚えておきましょう。そうすることで前よりもアクセシビリティに関してより意識を高く持つことができると感じました。
まだまだ自分に足りないと感じること
現在はネットで集めた情報や、周りの人から聞いた情報をもとにチェックをしていますが、当事者の方がどのように利用しているのかについては、まだ知らないことが多いと感じています。
総務省のサイトでは、実際にスクリーンリーダーを利用している方の紹介ビデオが公開されています。
しかし、これもあくまで一部の情報に過ぎません。実際にどのような人がどのように利用しているのかについては、直接話を聞いたり、継続的に情報を追い続けることが大切だと感じました。
GoogleのMaterial Design3では基本原則の1つ目としてAccessibilityが挙げられています。
また『Building for all』の中では以下のような文章があります。
Product teams can't always represent all of their users, but they can better understand different people’s experiences and needs by working with communities, organizations, experts, and researchers. Including perspectives of those who are often overlooked leads to building more helpful products for everyone.
プロダクト開発チームが、常にすべてのユーザーを代表できるとは限りません。しかし、コミュニティや団体、専門家、研究者と協力することで、多様な人々の経験やニーズをより深く理解できるようになります。
今後はより当事者の話を聞きながら、自身のアクセシビリティへの意識を高めていきたいと感じています。
まとめ
今回はVoiceOverを使いながら、スクリーンリーダー対応について考えてみました。
実際に使ってみることで、マシンリーダビリティへの意識や、さまざまな利用方法の存在に気づくきっかけになりました。アクセシビリティは知識として理解するだけでなく、「実際に使ってみること」で見えてくるものも多いと感じています。
その一方で、当事者の意見の重要性もより強く感じるようになりました。
今後も日常的に触れながら、当事者の声にも目を向けつつ、より良い体験を提供できるように理解を深めていきたいと思います。