スクリーンリーダーのVoiceOverを使ってみる

サイト構築時にスクリーンリーダーでの読み上げを確認したいということがあったので、macOSに組み込まれているVoiceOverを使ってみました。

VoiceOverの起動・終了

VoiceOverの起動方法ですが、システム環境設定 > アクセシビリティを選択します。

左メニューからVoiceOverを選択して、「VoiceOverを有効にする」にチェックを入れると起動できます。

下部にある「VoiceOverトレーニング」のボタンから操作方法などを学べるので、初めて使用する場合は試しておくとよいかもしれないです。

ショートカットキーでVoiceOverを起動・終了したい場合、Command + F5キーで行えます。

使い方

ブラウザ上でVoiceOverを使ってみます。
デモページを開き、アクティブな状態でVoiceOverを起動(Command + F5キー)してみます。

VoiceOver起動の音声が流れて、下記のようなウインドウが表示されました。

VoiceOverカーソル

開いているブラウザを確認すると、おそらくブラウザの一部(今回chromeで確認した場合はタブ)が矩形の枠で囲われているかと思います。
この枠がVoiceOverカーソルで、現在選択されている範囲になります。

VoiceOverカーソルを移動するには、VoiceOverコマンドを使用します。
VoiceOverコマンドについての詳細は後述しますが、今回は Control + Option + 下矢印キー を押します。

VoiceOverカーソルがタブからその下にあるアドレスバーに移動しました。
もう一度 Control + Option + 下矢印キー を押してみると、その下のコンテンツ領域に移動しました。

次はコンテンツ領域が選択された状態で Control + Option + Shift + 下矢印キー を押します。
するとVoiceOverカーソルがコンテンツ領域内のヘッダー部分に移動しました。

タブやアドレスバー、コンテンツ領域はそれぞれグループとして区切られていて、 Control + Option + 矢印キー で移動できます。
上記例でコンテンツ領域からヘッダーに移動したように、グループが選択されている状態で Control + Option + Shift + 下矢印キー を押すことで、グループ内の操作ができるようになります。
グループの操作を終了する場合、 Control + Option + Shift + 上矢印キー を押すことで、上階層のグループに移動します。

VoiceOverコマンド

VoiceOverカーソルで操作したように、VoiceOverはキーボードでの操作がメインになります。
VoiceOver操作時に入力するのがVoiceOverコマンドで、VoiceOver修飾キー(Caps Lockキー または Control + Optionキー)と1つ以上の他のキーを組み合わせます。
例えばグループ間の移動は VoiceOver修飾キー + 矢印キー 、グループ内の操作や終了は VoiceOver修飾キー + Shift + 矢印キー のようになります。

VoiceOverコマンドは前述の通りVoiceOver修飾キー + 1つ以上のキー入力が毎回必要になるため、VoiceOver修飾キーをロックして入力し易るするコマンドがあります。
VoiceOver修飾キー + ; (セミコロン)キー を押すことでVoiceOver修飾キーのロックができ、以降は矢印キーのみでグループ間の移動を行えます。
ロックの解除は再度同じコマンドを押すことでできます。

VoiceOverコマンドの種類

VoiceOverコマンドは種類が多いので、特に使いそうなコマンドのみいくつか試してみます。
詳しくは Appleのサポートページにコマンドの一覧があるので、下記リンクからご確認ください。
一般コマンド
操作コマンド
移動コマンド
方向コマンド
検索コマンド
テキストコマンド
Webコマンド

今回chromeとSafariで確認してみましたが、ブラウザによっては挙動が異なったりうまく効かないコマンドもあるようだったので注意ください。
以下VoiceOver修飾キー(Caps Lockキー または Control + Optionキー)をVOと省略しています。