Webデザインのソーシャルディスタンス ~アクセシビリティーを保った社会的距離の表現方法とは?~

最近「社会的距離 ソーシャルディスタンス」を意識して、文字間にスペースで空白を挟むことが流行り、スクリーンリーダーでの読み上げに支障が出たり、検索エンジンでスペース無しの通常の検索キーワードを入れた時に、スペースも含めた内容と検索キーワードが一致せず、該当する検索結果が無い状態になってしまい、検索結果に表示されなくなる問題が話題になっています。

そこで紹介したいのが、以下のHTMLタグです。

<div style="letter-spacing: 空けたい文字数em;">空白を入れたい文字列</div>

では早速、全角スペース区切りとHTMLタグで空白を挿入した文章の読み上げを比較してみましょう。

例文1

「  社  会  的  距  離  の  表  現  方  法  」

こちらは全角スペース2文字を挟んで空白を入れており NVDAでの読まれ方は
「しゃかいてききょはなれのおもてげんほうほう」になります。(OneCore音声使用)

例文2

 <div style="letter-spacing: 2em;">「社会的距離の表現方法」</div>

上記のようにメモ帳などのテキストエディターに入力し、拡張子をhtmlで保存して、ChromeやFirefoxなどのブラウザで開きます。

「社会的距離の表現方法」

こちらは、HTMLタグで視覚的な空白を表現しています。
NVDAでの読まれ方は
「しゃかいてききょりのひょうげんほうほう」と正しい読み上げになります。(OneCore音声使用)

このように、HTMLタグを使用して表示間隔を調整すると、スクリーンリーダーではそのまま読み上げ、表示上の文字間隔は文字の大きさの2倍となっています。
適切な方法で書式情報の文字間を調整してソーシャルディスタンスを表現する事で、スクリーンリーダーで正常に読み取る事も、検索エンジンでも適切に検索されるようになります。

Webデザイナーの皆様、是非 外見的にも効果があり、スクリーンリーダーでの可読性の維持としてのアクセシビリティーを保ちながら、検索性も両立できるこの方法を活用して情報発信をお願いいたします。

スクリーンリーダー対応読書支援システム『雛菊の時間』~ダウンロード・再生編~

『雛菊の時間』は、スクリーンリーダーに対応した読書支援アプリです。

DAISY、マルチメディアDAISYの他、サピエ図書館からダウンロードしたテキストDAISY、点字データの読み上げに対応しています。
こちらは既にインストールや設定を完了している前提での記事ですので、まだインストールされていらっしゃらない方は「インストール・初期設定編」をご参照の上、インストールや初期設定を終えてください。

○サピエ図書館からのダウンロード

サピエ図書館からDAISY図書をダウンロードします。

1. 雛菊の時間のメインウィンドウで、「3. サピエ図書館からダウンロード」を選択してエンタキーを押します。

—-
ダイアログ Internet Explorerのような画面でサピエ図書館の図書検索画面を表示します。
雛菊の時間起動直後はログインが必要です。
「サピエIDとパスワードを保存する」にチェックを入れておくと便利です。

サピエ図書館へアクセスしますか?
—-

と表示されます。

2. タブキーで「はい」を選択してエンターキーを押します。

3. サピエ図書館のページが開きます。
ここはNVDAの通常のブラウザ操作と同じ操作方法で使用できます。

4. サピエのIDとパスワードを入力、「サピエIDとパスワードを保存する」にチェックを入れてログインします。

5. 「サピエ図書館」を選びエンターキーを押します。

6. タブキーで「デイジーデータ検索」と読む部分の次のエディットを選び、フォーカスモードに切り替えて読みたい本の情報を入力し、タブキーで「タイトル・著者簡易検索」ボタンを選び、エンターキーを押します。

7. 検索結果が表示されます。
検索結果一覧はテーブル形式なので、ブラウズモードでTを押すと素早くアクセス可能です。

8. タブキーを押すとタイトル名とダウンボタンが交互に読まれますが、タイトル名の後のダウンボタンでエンターキーを押すとダウンロードできます。

9. ファイルを保存するための画面になります。 Alt+Nを押し、Tabキーで保存を選びエンターキーを押してください。
十秒から数分でダウンロード完了のガイダンスがあります。

○ダウンロードした本の展開

1.Windows+Eでエクスプローラーを開きます。

2.ダウンロードフォルダーを選択し、エンターキーで開きます。

3.ダウンロードした圧縮された書籍を選び、エンターキーを押します。

4. 警告のダイアログが表示されますので、タブキーで「詳細」を選択してエンターキーを押します。

5. さらにタブキーで「実行」を選択してエンターキーを押します。

6. 展開先を尋ねてきますので、先ほど設定したDAISY図書の録音先フォルダを選択して、エンターキーを押します。

○DAISY図書の再生

1. Altキーを押しながらタブキーを押して、雛菊の時間の画面に戻ります。

2. 現在、サピエ図書館の画面が開いているので、ESCキーを押します。

3. 「ダイアログ 図書一覧画面へ戻りますか」と尋ねてきますので、タブキーで「はい」を選択して、エンターキーを押します。

4. 「3. サピエ図書館からダウンロード」が選択された状態になっているはずです。
さらにESCキーでを押します。

5. 下矢印キーを長と、先ほど保存したDAISY図書が確認できるかと思います。

6. 目的の図書名でエンターキーを押すと再生が始まります。

○再生時の操作

DAISY図書再生時、下記の操作が可能です。

—-

  • ESCキー : 現在の再生状態を保存し図書一覧画面へ戻る
  • 左 矢印キー: 5秒戻る
  • 右矢印キー : 5秒進む
  • カーソルキー 上 : 音量の上昇
  • 下矢印キー : 音量を下降
  • スペースキー : 一時停止・再生の切り替え
  • ページアップキー : 現在再生位置からみて1つ手前の見出しへ移動
  • ページダウンキー : 現在再生位置からみて次の見出しへ移動
  • ホームキー : DAISY図書に設定された最初の見出しへ移動
  • エンドキー : DAISY図書に設定された最後の見出しへ移動
  • ファンクションキー1 : ヘルプの表示
  • ファンクションキー2 : DAISY図書に設定された目次の表示
  • Ctrl+上矢印キー : 現在再生位置からみて1つ手前の見出しへ移動
  • Ctrl+ 下矢印キー : 現在再生位置からみて次の見出しへ移動
  • Eキー : CDトレイを開く
  • Qキー : プログラムの終了
  • Wキー : 雛菊の時間公式Webページの表示

—-

スクリーンリーダー対応読書支援システム『雛菊の時間』~インストール・初期設定編~

『雛菊の時間』は、スクリーンリーダーに対応した読書支援アプリです。

DAISY、マルチメディアDAISYの他、サピエ図書館からダウンロードしたテキストDAISY、点字データの読み上げに対応しています。

○ダウンロード

1. ウェブブラウザを利用して、kmzwakr.net/hina.html を開きます。

2. 「利用許諾の確認とダウンロード」リンクを実行します。

3. 利用規約を確認し、「上記の内容を承諾してプログラムをダウンロード」リンクを実行します。

4. ファイルをダウンロードするダイアログが表示されるので、ダウンロードして保存します。

○ インストール

1. ダウンロードした「hinasetup.exe」ファイルを実行します。

2. セキュアデスクトップの画面が表示されますので、Altキーを押しながらYキーを押します。

3. お尋ねします ダイアログ 雛菊の時間のダウンロード、大変ありがとうございます。
新しく雛菊の時間をこのコンピューターにインストールしますか?
と表示されるので、タブキーで「はい(Y) ボタン Alt+y」でエンターキーを押します。

4. ダイアログ 雛菊の時間をインストールしました。続いてダウンロードフォルダ内の図書を読み取ります。
エンターキーを押してください。
OK ボタン
と読み上げられるので、エンターキーを押します。

以上でインストール完了です。

○ 起動

上記でエンターキーを押すと、雛菊の時間が起動します。

最初はなにも図書がありませんので、「新しく図書を入手する」でエンターキーを押します。

下記のようなメニューが表示されます。

—-
1. 青空文庫 著作権の執行した図書を無料でお読みいただけます
2. CD版DAISY図書を録音
3. サピエ図書館からダウンロード 視覚障害をお持ちの方が登録されることで、新刊を含む多くの図書をお読みいただけます 無料
4. 図書一覧画面へ戻る
—-
基本操作は、上下矢印キーで選択、エンターキーでメニューを実行します。
前の画面に戻るにはESCキーを押します。

○サピエからダウンロードしたDAISY図書の再生

ここではサピエ図書館からダウンロードしたDAISY図書を再生する方法についてご説明します。

○DAISY図書の読み込み先の確認と設定

まず、DAISY図書の読み込み先フォルダを確認します。

初期設定では「C:\Users\[Windowsのログオンユーザー名]\Downloads」に設定されています。

異なるフォルダにDAISY図書を保存する場合は、下記のように設定します。

1. 雛菊の時間のメインウィンドウで、F6キーを押します。

—-
確認 のウィンドウ
現在、C:\Users\[Windowsのログオンユーザー名]\Downloads
へ保存されているDAISY図書が本品に読み込まれています。
異なる場所からDAISY図書を読み込みますか?
—-

と表示されます。

2. 変更する場合はタブキーで「はい」を選択して、エンターキーを押します。

3. この画面はツリー構造になっています。
上下矢印キーで、ドライブやフォルダを選択まさす。
サブフォルダがある場合は右矢印キーで展開します。
展開したフォルダを閉じるには左矢印キーを押します。

4. 目的のフォルダを選択できましたら、タブキーでOKボタンにあわせてエンターキーを押します。

○ブラウザの設定

雛菊の時間では、サピエ図書館を、既定のブラウザで閲覧するか、あるいは内部ブラウザで閲覧するかを設定できます。

既定のブラウザを選択していると、雛菊の時間が終了してしまい操作がやや煩雑になりますので、ここでは内部ブラウザを使うことにします。

1. Altキーを押してメニューを開き、下矢印キーで「環境設定を変更」を選択してエンターキーを押します。

2. 「サピエ図書館の閲覧方法 」の選択になりますので、下矢印キーで「内部ブラウザで閲覧」を選択します。

3. タブキーで「設定完了」ボタンを選択して、エンターキーを押します。

ここまで準備が出来ましたら、ダウンロード・再生編に進んでください。

NVDAヘルプデスクサポートスタッフ募集(応募者多数の為締め切りました)

4月26日更新

NVDAヘルプデスクスタッフ募集に多くの皆様のご応募を頂き、誠にありがとうございました。

応募者多数となりましたので、応募受付は終了させていただきます。

ご応募くださいました皆様には4月28日より概ね2週間以内にご連絡を差し上げます。

 

NVDAヘルプデスクでは、サポーターの随時養成を行っております。
現在NVDAをお使いで、ユーザーサポートやNVDAを使用したパソコン指導者育成に興味のある方を募集いたします。

募集内容

  • 年齢・性別は問いません
  • NVDAエキスパート取得者または取得したい方
  • 必要技術:NVDAを使用してのWindowsパソコンの使い方を熟知しており、各種ビジネス文書の作成とメールのやり取りやSkype、Zoomなどの使用が可能な程度のパソコンスキルをお持ちの方

お申込み方法

下記内容をコピーし、文末のお問い合わせにアクセスし、「お問い合わせの種類」で「会員登録や変更」を選び、「内容」に、コピーした内容を貼り付け、必要事項を追記してお申し込みください。


氏名(必須)

氏名フリガナ(カタカナ必須)

メールアドレス(必須)

視力(必須 ロービジョンの場合、見え方含む)

電話番号及び、SkypeまたはZoomのID(必須)

NVDAの使用歴(良ければどのような事にNVDAを使っているか)

志望の動機(必須 入りたいと思ったきっかけを一言でも可)


 

オンライン会議・通話アプリ「Zoom(パソコン版)」で利用できるキーボードショートカット

パソコン版Zoomアプリで通話中に利用できるキーボードショートカットを。以下に記載します。ご活用ください。

Alt+A: ミュートのON / OFF
Alt+V: ビデオのON / OFF
Alt+I: 招待ウィンドウを表示する
Alt+U: 参加者パネルを表示 / 非表示
Alt+S: 画面共有の開始 / 終了(ただし、コントロールツールバーにフォーカスされている時)
Alt+Shift+S: 新しい画面共有の開始(ただし、コントロールツールバーにフォーカスされている時)
Alt+T: 画面表有の一時停止 / 再開 (ただし、コントロールツールバーにフォーカスされている時)
Alt+R: ローカルレコーディングを開始
Alt+P: レコーディングの一時停止 / 再開
Alt+F: 全画面表示のON / OFF
Alt+H: チャットパネルを表示 / 非表示
Alt+Q: ミーティングを終了する
Alt+M: 全員をミュート / ミュート解除(ただし、ホストを除く)ホストだけの機能

F6: ポップアップしたパネルのフォーカスを移動
Ctrl+Alt+Shift: Zoomにフォーカスを移動する
ESC: 全画面表示を解除
Alt: コントロールツールバー常時表示のON /OFF

ご不明な点は、視覚障害差総合支援センターちば、IT支援担当までお問い合わせください。
電話:04-424-2546

お問い合わせフォームnvda.help/contact

4月8日から5月6日まで来所によるサポートは中止いたします

いつもNVDAヘルプデスクをご利用いただき、誠にありがとうございます。

 

新型コロナウィルスの感染拡大を受け、4月8日から5月6日までの来所によるNVDAヘルプデスクのサポート・相談を原則中止とさせていただきます。
利用者の皆様にはご不便をおかけいたしますが、何卒よろしくお願いいたします。

なお、メールや電話によるサポート、オンラインでのサポートにつきましては、通常通りの対応となります。

 

お問い合わせは
043-424-2546
または

お問い合わせフォーム

nvda.help/contact

よりお願いいたします。

NVDAでサピエを利用する -再生編 AMISでDAISY図書を再生する-

AMISの特徴

AMIS: adaptive multimedia information system(アミ)は無料で利用できるオープンソースのDAISY再生用ソフトウェアです。フルテキストおよびフルオーディオのマルチメディアDAISYの再生が可能で、DAISY 2.02規格をサポートしています。

AMISの使い方

サピエからダウンロードしたファイルまたはドキュメント及びUSBメモリなどに保存したファイルの場合

サピエからのをダウンロード方法についてはダウンロード編を参照してください。

1.Windowsキーを押し、下矢印キーで「AMIS」を選び、エンターキーを押して起動してください。
2.Altキーを押し「ファイル」と読まれたら下矢印キーで「検索」を選びエンターキーを押してください。
3.Tabキーを押し「参照」を選びエンターキーを押してください。
4.上下矢印でDAISY図書のあるフォルダー(ダウンロードフォルダーまたは展開先に指定したフォルダーやCDドライブ、USBメモリ等)を選び、エンターキーを押してください。
5.下矢印で「検索ボタン」を選び、エンターキーを押してください。
6.リストが表示されるので、上下矢印で書籍を選び、エンターキーを押してください。
7.読み込みが完了すると再生がスタートします。スペースキーで再生と一時停止です。

CDドライブの場合(最寄りの点字図書館などで借りたDAISY CDなど)

1.Windowsキーを押し、下矢印キーで「AMIS」を選び、エンターキーを押して起動してください。
2.CDドライブにDAISY-CDをセットします。
3.Altキーを押し「ファイル」と読まれたら下矢印キーで「CDから開く」を選びエンターキーを押してください。
4.リストが表示されるので、上下矢印で書籍を選び、エンターキーを押してください。
5.読み込みが完了すると再生がスタートします。スペースキーで再生と一時停止が可能です。

再生速度や音量を調整する

AMISでは再生中に以下の操作が可能です。

  • Ctrl+;またはテンキーのプラス 再生速度を上げる
  • Ctrl+- 再生速度を下げる
  • Ctrl+0 再生速度を標準に戻す
  • Ctrl+上下矢印 音量を調整する

読みたい場所にジャンプする

読み返したい場所や続きから読みたいページやご自身でブックマークを付けた所に移動する事が可能です。

  • 上下矢印 前後のセクション 
  • 左右矢印 前後ろのフレーズ
  • Ctrl+左右矢印 前後のページ
  • Ctrl+D ブックマークに追加する
  • Alt+B ブックマークメニュー/一覧を表示する

その他、AMISの詳細な操作方法はAMISを起動中にF1キーを押してユーザーガイドをご覧ください。

Firefoxでブックマークの整理方法

・FireFoxにブックマークする時、例えばNVDAのページを「他のブックマーク」ではなく、別のフォルダ(「インターネットから」にあるフォルダ)に登録したい場合、どうしたら思い通りに ブックマークすることが出来ますか?

・FireFoxのブックマークに 登録したフォルダ名やページ名の並び順を固定することは出来ますか?

メールでこのようなお問い合わせを頂きました。

1.ブックマーク時にすぐにTabキーを押すと「すべてのブックマークフォルダーを表示します」ボタンと読まれるので、スペースキーを押します。
2.上下矢印キーでレベル上位のフォルダーを選び、その中のフォルダーは右矢印で展開してから選びます。新規に作る場合、「新しいフォルダー」ボタンを押して名前を入力します。
3.「完了」ボタンでエンターを押すとブックマークが保存されます。
尚、既に作成済みのブックマークの場合、並び順の変更と同様の操作で切り取り、別のフォルダーに貼り付け可能です。

Firefoxブックマークの並び順について
以下のように操作すると、個別に並び順の変更や固定が可能です。
初めに個別に変更したい時は、表示順序を「並びかえない」にしておく必要があります。
1.Firefoxを起動し、Altキーを押して、メニューを表示します。
2.左右矢印キーで「ブックマーク」を選び、上下矢印キーで、並び順を変更したいブックマークの名前を表示します。
3.アプリケーションキーまたはAlt+F10で、コンテキストメニューを表示し、
「切り取り」でエンターを押します。
4.新しく配置したい場所を選びます。
5.アプリケーションキーまたはAlt+F10で、コンテキストメニューを表示し、
「貼り付け」でエンターを押すと、選んだブックマークの上の位置に貼り付けされます。

上記の方法で並び替えたものは、表示順の設定で並べ替えないになっていれば、位置が固定されます。
※Ctrl+XやCtrl+Vでの切り取り貼り付けは出来ませんので、必ず、アプリケーションキーまたはShift+F10でコンテキストメニューを表示してから操作してください。
※切り取った直後に無音になった時は、再度手順1から操作し、手順2の後に貼り付けを行うと正常に貼り付けされます。

NVDAの読み上げ順序でホームページの作りがわかる!?

NVDAは視覚障害当事者がパソコンの画面を読ませる目的で使用するのはもちろん、プログラマーやWebエンジニアの方々の間でアクセシビリティチェックツールとしても普及が進んでいます。
NVDAヘルプデスクでも、アクセシビリティの検証を行う事があり、気付いた事があります。
例えば「リンク 見出し レベル3 何々」のような読まれ方と、「見出し レベル3 リンク 何々」のような読まれ方の違いがあるのです。
<a href=”https://nvda.help”><h3>NVDAヘルプデスク</h3></a>では、「リンク 見出し レベル3 NVDAヘルプデスク」と読まれ、
<h3><a href=”https://nvda.help”>NVDAヘルプデスク</a></h3>では、「見出し レベル3 リンク NVDAヘルプデスク」と読まれます。
実際にHTMLで記述した結果は下記のリンクのようになります。

NVDAヘルプデスク

NVDAヘルプデスク

画面的には全く同じになっているはずですが、NVDAで読ませると読み方が変わります。
これは、htmlタグで、リンクタグの中に見出しタグを入れているのか、見出しタグの中にリンクタグを入れているのかで変わっています。
他のスクリーンリーダーでは、変化がない様子なので、NVDAならではの特徴と言えます。

参考情報

NVDAには、開発者向けの物が公開されており、ウェブアクセシビリティー基盤委員会のホームページの「W3C エディターズドラフト Understanding WCAG 2.1 解説書」や総務省の「みんなの公共サイト運用ガイドライン」の中に、アクセシビリティを確保する為に必要な基準が詳しく載っていますので、ホームページ作り等に携わられている方々でこの記事をご覧になられた際はご活用ください。
開発者の為のNVDA(NVDA日本語チームのページに遷移します※現在はWindows8.1以降が対象環境です)
WCAG 2.1 解説書(ウェブアクセシビリティ基盤委員会のページに遷移します)
みんなの公共サイト運用ガイドライン(総務省の公開しているPDFファイルです)