macOS 版 VoiceOver のチートシート＋ちょっと便利になる小ネタ

macOS には VoiceOver と呼ばれるスクリーンリーダーがプリインストールされています。スクリーンリーダーは主に視力や文字の読み取りに困難を持つユーザーが情報を得るために使用するツールです。画面に表示されている要素を合成音声で読み上げてくれたり、対応する点字ディスプレイに情報を出力してくれたりします。

印刷できるチートシートが欲しかったのですが見当たらなかったので、自分で作ることにしました。この記事では、ウェブ開発者向けに編纂した macOS 版 VoiceOver のチートシート（早見表）をお披露目し、制作の過程で見つけた便利機能もいくつかご紹介したいと思います。

## ウェブ開発者向けとは？

本チートシートは「ウェブ開発者向け」としています。VoiceOver のコマンドは無数にあり、すべてのコマンドをチートシートに載せることはできません。そのため本チートシートに掲載しているコマンドは、ウェブ開発者が VoiceOver を使ってウェブページをテストするときに有用なものに限定しています。

## macOS 版 VoiceOver チートシート

### 基本操作

#### 起動と終了

VoiceOver の操作は VoiceOver 修飾キー（以下 `VO` キー）と他のキーとの組み合わせによって行います。VoiceOver 修飾キーには `Caps Lock` キーまたは `Control`＋`Option` キーを設定できます。

`VO` キーをロックすることにより、`VO` キーの押下を省略できます。

| 操作                           | コマンド                                                                                       |
| ------------------------------ | ---------------------------------------------------------------------------------------------- |
| VoiceOver を起動・終了する     | `Command`＋`F5` または<br>`Command`＋ TouchID キーを素早く 3 回押す |
| 読み上げを止める               | `Control`                                                                             |
| `VO` キーをロックする | `VO`＋`;`                                                                    |

#### 項目を読む

| 操作             | コマンド                                                                                            |
| ---------------- | --------------------------------------------------------------------------------------------------- |
| 前の項目を読む   | `VO`＋`←`                                                                         |
| 次の項目を読む   | `VO`＋`→`                                                                         |
| 最初の項目を読む | `VO`＋`Home`<br/>（ラップトップの場合`VO`＋`Fn`＋`←`） |
| 最後の項目を読む | `VO`＋`End`<br/>（ラップトップの場合`VO`＋`Fn`＋`→`）  |

#### 項目を操作する

| 操作                                                 | コマンド                        |
| ---------------------------------------------------- | ------------------------------- |
| VoiceOver カーソル内の項目にデフォルト操作を実行する | `VO`＋`Space` |

#### 階層化された項目の操作

これらの操作は、ブラウザーの UI からウェブページに移る場合など、異なるレベルを行き来するために必要になることがあります。

| 操作                       | コマンド                                      |
| -------------------------- | --------------------------------------------- |
| 現在の項目の操作を開始する | `VO`＋`Shift`＋`↓` |
| 現在の項目の操作を終了する | `VO`＋`Shift`＋`↑` |

### 要素別探索

| 操作                 | コマンド                                        |
| -------------------- | ----------------------------------------------- |
| 見出し               | `VO`＋`Command`＋`H` |
| リンク               | `VO`＋`Command`＋`L` |
| フォームコントロール | `VO`＋`Command`＋`J` |
| 画像                 | `VO`＋`Command`＋`G` |
| リスト               | `VO`＋`Command`＋`X` |
| 表                   | `VO`＋`Command`＋`T` |

### テキスト検索

| 操作                   | コマンド                                      |
| ---------------------- | --------------------------------------------- |
| テキスト検索           | `VO`＋`F`                   |
| 次のマッチしたテキスト | `VO`＋`G`                   |
| 前のマッチしたテキスト | `VO`＋`Shift`＋`G` |

### テーブル

| 操作                       | コマンド                                      |
| -------------------------- | --------------------------------------------- |
| セル移動                   | `VO`＋矢印キー                       |
| 行ヘッダを読み上げる       | `VO`＋`R`                   |
| 列ヘッダを読み上げる       | `VO`＋`C`                   |
| 行番号と列番号を読み上げる | `VO`＋`Shift`＋`T` |

### VoiceOver ローター

VoiceOver ローターを使用すると、ウェブページ内の特定の項目に直接移動できます。

| 操作                                   | コマンド                                  |
| -------------------------------------- | ----------------------------------------- |
| VoiceOver ローターを起動する           | `VO`＋`U`               |
| リストを切り替える                     | `←` または `→`          |
| リストの項目を切り替える               | `↑` または `↓`          |
| リストの項目を選択する                 | `Return` または `Space` |
| 見出しのリストを見出しレベルで絞り込む | `1` – `6`               |

### ホットスポット

項目にホットスポットを割り当てると、その項目まで移動する代わりにホットスポットを使ってジャンプすることができます。

| 操作                             | コマンド                                    |
| -------------------------------- | ------------------------------------------- |
| ホットスポットを設定・削除する   | `VO`＋`Shift`＋数字キー   |
| ホットスポットにジャンプする     | `VO`＋数字キー                     |
| ホットスポットの説明を読み上げる | `VO`＋`Command`＋数字キー |

### 設定・その他

| 項目                                                         | コマンド                                        |
| ------------------------------------------------------------ | ----------------------------------------------- |
| VoiceOver ヘルプ                                             | `VO`＋`H`                     |
| VoiceOver コマンドヘルプ                                     | `VO`＋`H` `H`        |
| VoiceOver カーソルをマウスポインタが乗っている項目に移動する | `VO`＋`Shift`＋`F5`  |
| スクリーンカーテン有効化・無効化                             | `VO`＋`Shift`＋`F11` |

## macOS 版 VoiceOver チートシート（PDF 版）

上記の内容を A4 1 枚にまとめたものがこちらです。

![macos-voiceover-cheat-sheet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43689/f988d448-1a13-e139-7e05-b82579487573.png)

PDF ファイルのダウンロードは以下からどうぞ。

- [PDF 版](https://github.com/tsmd/macos-voiceover-cheat-sheet/blob/main/macos-voiceover-cheat-sheet.pdf)
- [GitHub リポジトリ](https://github.com/tsmd/macos-voiceover-cheat-sheet)

印刷・ラミネートしてデスク脇に装備しておけば、必要なときにサッと取り出せていいですね。さらに裏面に[NVDAチートシート](https://github.com/nvdajp/cheatsheet)を忍ばせておけば、もうスクリーンリーダーテストの鬼と名乗ってもよいでしょう。

## ちょっと便利になる小ネタ

チートシート制作過程で得た VoiceOver の便利なコマンドをいくつかご紹介します。

### VoiceOver カーソルをマウスポインタが乗っている項目に移動する

スクリーンリーダーで動作確認をする際、「ココを読み上げたいんだけど、ここまで VoiceOver のカーソルを移動するのが大変！」なことはよくあります。そういうときは、マウスポインターの位置に VoiceOver カーソルを移動させるコマンドを使うと便利です。

**カーソルを移動させたい場所にマウスポインターを合わせて**  
**`VO`＋`Shift`＋`F5`**

これで VoiceOver カーソルがマウスポインターの場所に移動します。とても便利！　なお、移動先がインライン要素だったりした場合、`VO`＋左右キーによるカーソル移動がうまくいかなくなることがあります。そういうときは `VO`＋`Shift`＋`↑` キーでグループの外に脱出すると意図した通りにカーソルが動かせるようになるでしょう。

### ２種類の VoiceOver ローター

`VO`＋`U` で VoiceOver ローターを立ち上げられますが、実はもうひとつ、ローターを立ち上げる方法があります。

**`VO`＋`Command`＋左右キー**

です。`U` キーで立ち上げるローターと違い、画面内の要素の一覧は表示されません。そのかわりナビゲーションする種別を選ぶ UI が立ち上がります。

`U` キーを使う方法のほうがメジャーだろうと思ったので、この操作方法はチートシートには掲載しませんでした。この方法を使ったローターは iOS の VoiceOver と同様のもの UI なので、iOS での操作に慣れている人にはおすすめです。

### 任意の位置を記憶しておくホットスポット機能

ページ中の特定の位置を「ホットスポット」として記憶しておくと、その場所まですぐにジャンプし読み上げを始めることができます。開発中、特定のページをリロードしながら何度も検証をやり直すようなユースケースで特に役に立つ機能です。SPA の検証でも有用そうです。

ホットスポット機能は、設定と利用のコマンドが分かれています。**`VO`＋`Shift`＋数字キー** でホットスポットを設定（もう１度押すと削除）し、**`VO`＋数字キー** で当該ホットスポットにジャンプします。数字キーには `0` 〜 `9` までの 10 キーが使用できます。

| 操作                             | コマンド                                    |
| -------------------------------- | ------------------------------------------- |
| ホットスポットを設定・削除する   | `VO`＋`Shift`＋数字キー   |
| ホットスポットにジャンプする     | `VO`＋数字キー                     |
| ホットスポットの説明を読み上げる | `VO`＋`Command`＋数字キー |

### いつでもコマンド一覧が参照できるコマンドメニュー

**`VO`＋`H` `H`**

このコマンドでコマンドメニューが立ち上がります。コマンドメニューは VoiceOver の全コマンドがツリー状にブラウズできる大変有用な機能です。この機能が使えれば、チートシートは不要という説も……。

## コントリビュート歓迎！

この記事でご紹介したチートシートは GitHub で公開しています。開発者に有用なコマンドがもっとありましたら、Issue や Pull Request にて貢献してくださるとありがたいです！

👉 [tsmd/macos-voiceover-cheat-sheet - GitHub](https://github.com/tsmd/macos-voiceover-cheat-sheet)