これは、Advent Calendar 2018のWebアクセシビリティの7日目の記事です。
https://adventar.org/calendars/3039

東京都八王子市に住んでいます。野々垣美名子と申します。
視覚障害の方のパソコンやスマホの利用を個人的に訪問などでサポートすることを仕事にしています。晴眼者です。
スクリーンリーダーNVDAのNVDA日本語チームやNVDAヘルプデスク、地域のパソコンボランティアに参加しています。
東京都内の視覚障害者支援施設で、パソコンの授業のアシスタントの仕事をしています。

Web上には様々なサイトがあり、スクリーンリーダーで使いやすい物からそうでない物まで、様々です。
使いにくい物、使えない物については、使えるように改良していただけるように作成者宛にお願いしたいと日々考えていますが、「こういう理由でスクリーンリーダーで使いにくくなっているので、こうなっているソースコードをこう作り変えていただけると使いやすくなります」というような具体的なことまでは、私の力では解析出来ず、どう伝えて良いのかわからない、そんな思いを抱いています。
今日は、ご相談を受けている中で出会った、いろいろなフォームの読み上げや操作方法がどうなるのかを、ご紹介してみたいと思います。操作確認は、無料で公開されているスクリーンリーダーNVDAで行いました。

Questant
https://questant.jp/q/799IK6XU
Questantを利用して、オリジナルのアンケートフォームを作りました。
4列9行のテーブルになっている回答フォームです。
見出しショートカットhで問題文に移動した後、下矢印でたどります。
回答である「1年」、「3年」、「5年」が順に読まれて行きます。
「2行1列4までパソコン」と読まれます。
「1年パソコンスマホ点字ディスプレイICレコーダー2列クリック可能」と読まれます。パソコン・・・以下全部読まれてしまっていますが、パソコンが1年である場合はここにチェックをします。
ラジオボタンにチェックをするには、通常の操作ではスペースキーを押しますが、このフォームではなぜか効きません。マウスでクリックしなければならなくなっているようです。
NVDAには、現在読んでいる場所にマウスカーソルを移動するコマンドがあります。使用キーボードがノートパソコンで用いるラップトップ配列に設定（NVDA内の設定）されている場合は、NVDAキー(Insertキー）+Shift+Mです。これを押して、マウスの左クリックをするとチェックが付きますが、チェックが付いたかどうかは画面を見ていなくてはわかりません。NVDAの設定しだいでは、マウスの左クリックコマンドNVDAキー+[で、「左クリック」と音声があります。
最後に、「リンク次へ」でスペースキーを押します。
チェックが過不足なく入っている場合にのみ、次へが押せるようになっているため、わかりにくい中、スペースキーでラジオボタンにチェックをしたものと推測しながら答えていた視覚障害の方は、次へを押した時に、回答が入力されていません、となるところで、回答出来ていないことに気付きます。逆に、上記のような操作方法をあらかじめ知った上で、次へを押して先に進むことが出来れば、回答出来たものと推測することが出来ます。

Googleフォーム
https://docs.google.com/forms/d/e/1FAIpQLSd-RBPYGsk_4fx92urHz-aVIlk8rAvn3pRW7IwtV6N0jr3UmA/viewform?vc=0&c=0&w=1&usp=mail_form_link
Googleフォームを利用して、オリジナルのアンケートフォームを作りました。
下矢印でたどります。
「NVDAを使っていますか」
「ラジオボタンチェックなし　はい」
「ラジオボタンチェックなし　いいえ」
と読まれます。例えば、「はい」でスペースキーを押すと、
「チェック」
と読まれます。上下矢印キーで周辺の内容を確認すると、
「ラジオボタンチェック　はい」
「ラジオボタンチェックなし　いいえ」
と読まれます。

次の設問です。下矢印でたどると、
「パソコンなどをどれくらいお使いですか」
「1年」「3年」「5年」「パソコン」
「ラジオボタン1年チェックなしはパソコンに対する回答です」と読まれます。
以下同様に、
「ラジオボタン3年チェックなしはパソコンに対する回答です」
「ラジオボタン5年チェックなしはスマホに対する回答です」
と読まれ、チェックをすると、
「ラジオボタン1年チェックはICレコーダーに対する回答です」
などに変わります。
テーブルの形になっているという情報は読み上げには出て来ません。
最後に「ボタン送信」でスペースキーで送ります。ここでも、過不足なくチェックされている場合にのみ送ることが出来ます。

オリジナルフォーム
https://riku22.net/tests/form.php
友人の陸さんが、フォームを作成してくれました。陸さんについては以下のサイトをご覧下さい。
https://riku22.net/
自分が持っていたjavascriptの教科書の、フォームの例のHTMLのソースコードでは、複数の回答がつながって読まれてしまったりなど、わかりやすい感じではなかったので、陸さんが作成してくれたこのフォームは、スクリーンリーダーで使いやすいフォームの一例として、参考にしていただける物と思います。

下矢印でたどります。
「氏名エディット」
「性別」
「ラジオボタンチェックなし男」
「ラジオボタンチェックなし女」
「趣味」
「チェックボックスチェックなし映画」
「チェックボックスチェックなし読書」
「チェックボックスチェックなしスポーツ」
チェックしたい項目で、スペースキーを押すと、「チェック」と読み上げられます。
また、チェックをした後に周辺の項目を確認するために上下矢印キーで移動すると、
「チェックボックスチェック読書」
などと読みが変わります。
最後に、「ボタン　送信」でスペースキーを押して送信します。

これらの操作確認は、無料のスクリーンリーダーNVDAで行いました。Webアクセシビリティの確認にぜひお使い下さい。
NVDA日本語版
https://www.nvda.jp

NVDAのインストール、使用方法のご相談は、以下の窓口でお受けしています。
NVDAヘルプデスク
https://nvda.help/services

私個人でもご相談をお受けしています。ご連絡は以下へお願いします。
野々垣美名子
メール　minakonono3519@gmail.com
電話　090-7186-4265