Merge pull request #132 from ma10/add-macosvo-check-20231016

macOS VoiceOverに関する基本的な情報を追加

source/explanations/screen-reader-check-nvda.rst

@@ -6,18 +6,20 @@ NVDAを用いたチェックの実施方法
 
 Windows用スクリーン・リーダーのNVDAの初期設定の方法と、基本的な使い方について記します。
 
-なお、本稿のキー操作の説明では、 :kbd:`NVDA + X` のような表記をしていますが、これは :ref:`nvda-welcome-screen` の項で説明する「NVDA制御キー」を押しながら :kbd:`X` を押すことを意味します。
+なお、本稿のキー操作の説明では、 :kbd:`NVDA + N` のような表記をしていますが、これは :ref:`nvda-welcome-screen` の項で説明する「NVDA制御キー」を押しながら :kbd:`N` を押すことを意味します。
 
 ********
 標準環境
 ********
 
 freeeでは、スクリーン・リーダーを用いて行う必要があるチェックについては、Windows上でNVDAとGoogle Chromeのそれぞれ最新版で実施することにしています。
 
-macOSではなくWindowsを採用しているのは、日本においてはスクリーン・リーダーを利用している視覚障害者のほとんどがWindowsを利用していると考えられるためです。
+macOSではなくWindowsを採用しているのは、日本においてはスクリーン・リーダーを利用している視覚障害者のほとんどがWindowsを利用していると考えられるためです。 [#]_
 NVDAを採用しているのは、WAI-ARIAなどの最新のWeb技術への対応が最も進んでいるスクリーン・リーダーであると考えられるためです。
 Google Chromeを採用しているのは、freeeでは最新版のGoogle Chromeを推奨環境としているためです。
 
+.. [#] `第3回支援技術利用状況調査報告書 <https://jbict.net/survey/at-survey-03>`_
+
 ********
 事前準備
 ********
@@ -53,7 +55,7 @@ NVDAが起動すると、いろいろな挙動が普段と異なった状態に
 NVDAの初回起動時には、「ようこそ画面」が表示されます。
 
 .. image:: /img/nvda-welcome.png
-   :alt: NVDAの「ようこそ画面」のスクリーン・ショット
+   :alt: スクリーン・ショット：NVDAの「ようこそ画面」
 
 以下を参考に、必要な設定をすると良いでしょう。
 
@@ -101,7 +103,7 @@ NVDAには、ようこそ画面で設定できる項目以外にも、設定画
 「設定」画面では、左側に設定カテゴリーが表示され、右側に選択中のカテゴリーの設定項目が表示されます。
 
 .. image:: /img/nvda-settings-general.png
-   :alt: NVDA設定画面のスクリーン・ショット（「一般」を選択）
+   :alt: スクリーン・ショット：NVDA設定画面（「一般」を選択）
 
 以下、最初にしておくと良い設定について、カテゴリーごとに記します。
 
@@ -118,7 +120,7 @@ NVDAには、ようこそ画面で設定できる項目以外にも、設定画
    <iframe width="560" height="315" src="https://www.youtube.com/embed/qrWLDZmZ5ek" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
 
 .. image:: /img/nvda-settings-speech.png
-   :alt: NVDA設定画面のスクリーン・ショット（「音声」を選択）
+   :alt: スクリーン・ショット：NVDA設定画面（「音声」を選択）
 
 「音声エンジン」が、「Windows OneCore音声」になっていることを確認します。
 
@@ -135,7 +137,7 @@ NVDAには、ようこそ画面で設定できる項目以外にも、設定画
 --------
 
 .. image:: /img/nvda-settings-vision.png
-   :alt: NVDA設定画面のスクリーン・ショット（「ビジョン」を選択）
+   :alt: スクリーン・ショット：NVDA設定画面（「ビジョン」を選択）
 
 「ハイライトあり」、「フォーカスをハイライト」、「ナビゲーターオブジェクトをハイライト」、「ブラウズモードのカーソルをハイライト」をチェックします。
 これらをチェックすることで、現在読み上げられている箇所を可視化することができます。
@@ -144,7 +146,7 @@ NVDAには、ようこそ画面で設定できる項目以外にも、設定画
 --------------
 
 .. image:: /img/nvda-settings-browse_mode.png
-   :alt: NVDA設定画面のスクリーン・ショット（「ブラウズモード」を選択）
+   :alt: スクリーン・ショット：NVDA設定画面（「ブラウズモード」を選択）
 
 「サポートされている場合画面レイアウトを使用」のチェックを外します。
 この項目がチェックされている場合、ブラウズ・モードでの読み上げ時に画面上の1行分のテキストがまとめて読み上げられます。
@@ -161,7 +163,7 @@ NVDAには、ようこそ画面で設定できる項目以外にも、設定画
 ------
 
 .. image:: /img/nvda-settings-mouse.png
-   :alt: NVDA設定画面のスクリーン・ショット（「マウス」を選択）
+   :alt: スクリーン・ショット：NVDA設定画面（「マウス」を選択）
 
 「マウスカーソル位置のテキストの報告」のチェックを外します。
 
@@ -190,7 +192,7 @@ NVDAには、ようこそ画面で設定できる項目以外にも、設定画
 4. 日本語しかインストールされていない場合は、「音声を追加」をクリックして、「英語 (米国)」を追加
 
 .. image:: /img/win10-settings-speech-recognition.png
-   :alt: Windows 10の音声認識の設定画面のスクリーン・ショット
+   :alt: スクリーン・ショット：Windows 10の音声認識の設定画面
 
 一般的なチェックの場合、「英語 (米国)」を追加すれば、NVDAは意図した挙動になります。
 英語と日本語以外の言語が使われているサイトをチェックする場合は、その言語も合わせて追加すると良いでしょう。
@@ -235,7 +237,7 @@ NVDAには「フォーカス・モード」と「ブラウズ・モード」と
 
 フォーカス・モードは通常の動作モードであるのに対して、ブラウズ・モードは主にWeb閲覧時だけに利用できるモードです。
 
-Webブラウザーのコンテンツ表示領域にフォーカスがある場合など、ブラウズ・モードが利用できるときには、 :kbd:`NVDA + スペース` で2つのモードを切り替えることができます。
+Webブラウザーのコンテンツ表示領域にフォーカスがある場合など、ブラウズ・モードが利用できるときには、 :kbd:`NVDA + Spc` で2つのモードを切り替えることができます。
 
 Web閲覧時は、通常はブラウズ・モードでコンテンツを確認し、フォーム入力時などにフォーカス・モードに切り替えるというのが一般的な使い方です。
 ただし、アプリケーションのような振る舞いをするWebコンテンツにおいては、主にフォーカス・モードで操作することもあります。
@@ -272,9 +274,9 @@ JAWSでは、「仮想PCカーソル」がブラウズ・モード、「フォ
 前述の設定画面での音声設定を一時的に変更したい場合などに、設定画面を開かずに設定変更を行う方法があります。
 使用するのは、:kbd:`NVDA + Ctrl` と上下左右の矢印キーです。
 
-:kbd:`NVDA + Ctrl + 左矢印` または :kbd:`NVDA + Ctrl + 右矢印` を押下すると、「高さ50」のように、設定対象の項目名と現在の設定値が読み上げられます。
+:kbd:`NVDA + Ctrl + ←` または :kbd:`NVDA + Ctrl + →` を押下すると、「高さ50」のように、設定対象の項目名と現在の設定値が読み上げられます。
 目的の設定項目が読み上げられるまで、このいずれかのキー操作を続けます。
-目的の設定項目が読み上げられたら、 :kbd:`NVDA + Ctrl + 上矢印` または :kbd:`NVDA + Ctrl + 下矢印` キーで設定値を調整します。
+目的の設定項目が読み上げられたら、 :kbd:`NVDA + Ctrl + ↑` または :kbd:`NVDA + Ctrl + ↓` キーで設定値を調整します。
 
 その他
 ------
@@ -334,12 +336,12 @@ Webコンテンツのチェック
 
 Webコンテンツのチェックをする場合、基本的にはブラウズ・モードですべての情報にアクセスできることを確認することが必要です。
 
-ブラウズ・モードでは、下矢印キーで読み進め、上矢印キーで戻って読むというのが基本的な操作です。
+ブラウズ・モードでは、 :kbd:`↓` キーで読み進め、 :kbd:`↑` キーで戻って読むというのが基本的な操作です。
 上下の矢印キーで進む/戻る長さは、概ねHTMLソースの要素単位です。
 途中にリンクや ``span`` 要素でマークアップされた部分がないような段落であれば、 ``p`` 要素が1つのまとまりとして扱われます。
 一方、リンクがあればリンク部分が1つのまとまり、 ``span`` 要素があればその部分が1つのまとまりとして扱われ、上下矢印キーによる移動の単位になります。
 
-:kbd:`NVDA + 上矢印` を押下すると、直前に読み上げられた内容を再度読み上げさせることができます。
+:kbd:`NVDA + ↑` を押下すると、直前に読み上げられた内容を再度読み上げさせることができます。
 （正確には、この操作はカーソルが現在ある行を読み上げさせる操作です。）
 
 なお、左右の矢印キーは1文字単位の読み上げのために使います。
@@ -350,7 +352,7 @@ Webコンテンツのチェックをする場合、基本的にはブラウズ
 以下の手順で、ページ全体を読み上げさせることができます。
 
 1. :kbd:`Ctrl + Home` でページの先頭に移動
-2. :kbd:`NVDA + 下矢印` で読み上げを開始
+2. :kbd:`NVDA + ↓` で読み上げを開始
 
 途中で読み上げを停止したい場合は、 :kbd:`Ctrl` キーを押下します。
 
@@ -362,10 +364,10 @@ Webコンテンツのチェックをする場合、基本的にはブラウズ
 開閉できるメニュー、アコーディオンなど、何らかの操作を受け付けるコンポーネントについては、ブラウズ・モードでも操作ができることを確認する必要があります。
 
 具体的には、ブラウズ・モードでそのコンポーネントを探し、そのコンポーネント上でキー操作を実行してみます。
-コンポーネントに対する操作のうち、 :kbd:`Enter` 、 :kbd:`スペース` 、 :kbd:`Esc` による操作はブラウズ・モードでも想定した挙動となることを確認します。
+コンポーネントに対する操作のうち、 :kbd:`Enter` 、 :kbd:`Spc` 、 :kbd:`Esc` による操作はブラウズ・モードでも想定した挙動となることを確認します。
 その結果として新たなコンテンツが表示された場合は、そのコンテンツをブラウズ・モードで読み上げ可能なことを確認します。
 
-これら以外のキー操作については、 :kbd:`NVDA + スペース` でフォーカス・モードに切り替えた上で確認します。
+これら以外のキー操作については、 :kbd:`NVDA + Spc` でフォーカス・モードに切り替えた上で確認します。
 
 
 移動のための様々なキー操作
@@ -388,5 +390,7 @@ Webコンテンツのチェックをする場合、基本的にはブラウズ
       -  次、前の画像
    *  -  :kbd:`F` 、 :kbd:`Shift + F`
       -  次、前のフォーム・コントロール
+   *  -  :kbd:`T` 、 :kbd:`Shift + T`
+      -  次、前の表
 
 これらのキー操作に加えて、 :kbd:`NVDA + F7` の押下でページ内の要素ごとのリストを表示することができ、このリストを用いて移動することも可能です。

source/explanations/screen-reader-check.rst

@@ -8,5 +8,6 @@
    :titlesonly:
 
    screen-reader-check-nvda
+   screen-reader-check-macos-voiceover
    screen-reader-check-ios-voiceover
    screen-reader-check-android-talkback

tools/yaml2rst/yaml2rst.py

@@ -34,6 +34,7 @@
 # Values which needs to be changed if there are some changes in the checklist/item structure:
 CHECK_TOOLS = {
     'nvda': 'NVDA',
+    'macos-vo': 'macOS VoiceOver',
     'axe': 'axe DevTools',
     'ios-vo': 'iOS VoiceOver',
     'android-tb': 'Android TalkBack',