スクリーンリーダーは、おもに視覚障害者が利用する、画面の内容を音声合成によって読み上げるソフトウェアです。
スクリーンリーダーを使ってウェブサイトを検証することで、アクセシビリティ上の問題をピックアップできることはもちろん、文書構造上の問題（セマンティクスに関する問題）や、読み上げられることでテキストの誤りが見つかるケースもあり、全体的な品質向上に貢献することができます。
この記事では、macOS に標準搭載されているスクリーンリーダーである VoiceOver の、ウェブサイトの検証によく使用するコマンド（キーボード操作）について説明します。
なお、記載している操作方法については、2023 年 4 月時点での、以下のドキュメントをベースとしています。
VoiceOver のオン / オフ
見出し「VoiceOver のオン / オフ」VoiceOver をキーボードから呼び出すには Command + F5 キーを押します。オフにするにはもう一度同じコマンドを入力します。
| 操作 | コマンド |
|---|---|
| VoiceOver のオン / オフ | Command + F5 |
VoiceOver を起動すると、スクリーン上に以下のようなパネル（キャプションパネル）が出現しますが、このパネルの左上のバツ印を選択しても VoiceOver をオフにすることができます。
ちなみに、デベロッパーツールのような開発者向けのツールを表示していると、読み上げに影響することがあるので、VoiceOver を使用する際にはこれらのツール類を一時的に非表示にしておくのがよいかもしれません。
VoiceOver 修飾キー
見出し「VoiceOver 修飾キー」VoiceOver 修飾キーとは、VoiceOver のコマンド入力時に使用する修飾キーで、Caps Lock キーまたは、Control + Option キーに割り当てられています。
本記事では、この VoiceOver 修飾キーを使用する際には VO と表記します。
例えば、カーソル位置からすべて読み上げるコマンドは VO + A キーと表記しますが、実際に押さえるキーは Caps Lock + A キーまたは、Control + Option + A キーです。
なお、VO + ; （セミコロン）キーで、VoiceOver 修飾キーをロックすることができ、ロックすることで VO キーを省略できます。ロックを解除するにはもう一度同じコマンドを入力します。
VoiceOver 修飾キーがロックされた状態では、Command + F5 キーを押しても、VoiceOver をオフにできないので、ロックを解除してから VoiceOver をオフにします。
| 操作 | コマンド |
|---|---|
| VoiceOver 修飾キー | Caps Lock |
| VoiceOver 修飾キー | Control + Option |
| VoiceOver 修飾キーのロック / ロック解除 | VO + ;（セミコロン） |
基本操作
見出し「基本操作」ウェブサイトで検証するときにおもに必要になる操作としては以下が挙げられます。
| 操作 | コマンド |
|---|---|
| 次の項目に移動 | VO + → |
| 前の項目に移動 | VO + ← |
| カーソル位置からすべて読み上げ（All） | VO + A |
| カーソル位置まですべて読み上げ | VO + B |
| 最後に読んだフレーズを繰り返す | VO + Z |
| ローターの表示 | VO + U |
| カーソル内の項目にデフォルト操作を実行 | VO + Space |
| 読み上げの一時停止 / 再開 | Control |
| 表（テーブル）内の移動 | VO + ↑ / → / ↓ / ← |
VO + Space キーでのデフォルト操作については、Enter キーでも同様の操作は可能ですが、VO キーをロックしている状態では VO + Enter と解釈されてしまうため、Space キーで操作する必要があります。
また、以下は VoiceOver 特有の機能ではありませんが、VoiceOver を使用しているときにも活用できるブラウザ上でのコマンドです。
| 操作 | コマンド |
|---|---|
| 次のフォーカス可能な項目に移動 | Tab |
| 前のフォーカス可能な項目に移動 | Shift + Tab |
| 次のページに進む | Command + ] |
| 前のページに戻る | Command + [ |
| 次のタブを選択 | Command + Shift + ] |
| 前のタブを選択 | Command + Shift + [ |
| タブを閉じる | Command + W |
| 直前に閉じたタブを復旧 | Command + Shift + T |
| アドレスバーに移動（Location） | Command + L |
| ページを再読み込み（Reload） | Command + R |
ローター
見出し「ローター」
VoiceOver ローターは、素早く目的の要素に移動することができる機能です。VO + U で表示させることができ、ブラウザ上では、← キー、→ キーで以下のリスト項目をローテーションで切り替えることができます。
- ランドマーク
- 記事
- ウィンドウスポット
- リンク
- 見出し
- フォームコントロール
- Web スポット
- 表
表示されたリスト項目を ↑ キー、↓ キーで選択して、Space キー または、Enter キーで決定します。
このなかで特に役立つのは、ランドマークロールを確認できる「ランドマーク」と、見出しレベルを確認できる「見出し」です。また「リンク」では、リンクテキストに「こちら」のような、あいまいな表現が使われていないかを確認することができます。
何も選択せずにローターを閉じるには Esc キーを押します。
スクリーンカーテン
見出し「スクリーンカーテン」スクリーンカーテンとは、ディスプレイをオフにする機能です。
本来はプライバシーを保護するために用意されている機能ですが、視覚的な手がかりがいっさいなくなるので、音声読み上げのみでアクセシビリティが確保されているかを検証することができます。
ただ、VoiceOver の操作に慣れていないと、たちまち今どこにいるかがわからなくなるので、上級者向けの検証方法ではあります。
この機能は、VO + Shift + F11 キーで、オン / オフができます。
- スクリーンカーテンを有効にすると、ほぼすべての GUI が非表示になり、Esc キーでも解除できないため、解除するための VO + Shift + F11 キーを忘れないようにしましょう。
- Command + F5 キーで、VoiceOver の機能をオフにすることで、スクリーンカーテンを解除することも可能です。
検索コマンド
見出し「検索コマンド」「見出し」「リンク」「フォーム要素」「グラフィック要素（画像や SVG）」など、特定の要素を検索して順番に移動することができます。
| 操作 | コマンド |
|---|---|
| 次の見出しに移動（Headings） | VO + Command + H |
| 次のリンクに移動（Links） | VO + Command + L |
| 次のフォーム要素に移動（Form controls） | VO + Command + J |
| 次のグラフィック要素に移動（Graphics） | VO + Command + G |
| 次のリストに移動（Lists） | VO + Command + X |
| 次の表に移動（Tables） | VO + Command + T |
各コマンドに Shift キーを加えると、前の要素に移動できます。例えば、前の見出しに移動するときは、VO + Command + Shift + H を押します。
読み上げの設定
見出し「読み上げの設定」
VO + Command + Shift キーを押しながら、← キー、→ キーで読み上げ設定のメニューを表示し切り替えることができます。
変更できる項目は以下で、各メニューの ↑ キー、↓ キーで値を変更できます。
- 速度
- ピッチ
- 音量
- 抑揚
- 点字表
- 声
おわりに
見出し「おわりに」この記事では、macOS 版 VoiceOver のブラウザ上での基本操作を見てきました。
VoiceOver は、ここで紹介した以外にもさまざまな機能があり、高度なカスタマイズもできるのですが、今回はウェブサイトの検証で使用する基本的な操作に限定しました。
ここ最近は、注目のアクセシビリティ関連の書籍が発売されたり、デジタル庁の『ウェブアクセシビリティ導入ガイドブック』が公開されたり、アクセシビリティに特化したウェブデザインギャラリーもオープンしたり（本サイトも掲載いただきました 🙌）と、国内でのアクセシビリティが盛り上がってきている気がしています。
- 『Webアプリケーションアクセシビリティ』（著者：伊原 力也、小林 大輔、桝田 草一、山本 伶、出版：技術評論社）（外部リンクを開く）
- 『「困った！」を解決するデザイン』（著者：間嶋 沙知、出版：マイナビ出版）（外部リンクを開く）
- ウェブアクセシビリティ導入ガイドブック | デジタル庁（外部リンクを開く）
- AAA11Y（Accessible Website Gallery）（外部リンクを開く）
また、2023 年 5 月には WCAG 2.2 の勧告も予定されています（ここに至るまで延期続きなのでどうなるかはわかりませんが）。
2023/04/24 追記 勧告の時期は 2023 年の 3 期（7 月、8 月、9 月）に延期されたようです。
このように、アクセシビリティに関する動きも活発になってきているので、今後も関連するブログ記事を書いていければと考えています。
参考文献
見出し「参考文献」本記事の作成にあたり、以下のウェブページを参考にしました。