アクセシビリティBlog
Webサイトのアクセシビリティを高めるための方法や国内外の関連情報など、さまざまな角度からWebアクセシビリティに関する話題をご提供していきたいと思います。
当Blogの更新情報は、Twitter経由でも配信しています。興味のある方はぜひ、@mlca11yをフォローしてください。
スクリーン・リーダーを使ってWebページのスクリーンショットを撮る方法
8月の記事「いちスクリーン・リーダーユーザーのFirefox最新版の利用環境について」では、普段スクリーン・リーダーを使用している私がようやくFirefoxの最新版を使い始めた話を紹介しました。
今回ご紹介するスクリーン・リーダーを使ってWebページのスクリーンショットを撮る方法は、実は私が旧バージョンのFirefoxで操作方法をなかなか覚えられなくて困っていた作業です。
全盲の私がなぜスクリーンショットを撮る必要があるのか不思議に感じられる方もいらっしゃるかもしれませんが、お客様とWebページについてのやりとりをする際、このスクリーンショットが思いのほか役に立つことがあります。
例えば、お客様からお知らせいただいたページが私の手元で開けないなどのエラーが発生した場合、エラーの詳細を含んだスクリーンショットを見ていただいた方が、ページに表示されているテキストだけをメールに書くよりも状況を伝えやすいことがあります。
現在私が使用しているスクリーン・リーダーNVDA 2018.3.2とFirefox 62.0.3では、以下のような手順でページのスクリーンショットを取得してダウンロードすることができます。
- スクリーンショットを撮影したいページを開きます。今回は例として、当社のコラム「「アクセシビリティガイドライン（WCAG/JIS X 8341-3）の活用 解説セミナー」のご案内」のスクリーンショットを撮ることにします。
- Ctrl+Lを押してロケーションバーに移動し、一度Tabキーを押します。『「アクセシビリティガイドライン（WCAG/JIS X 8341-3）の活用 解説セミナー」のご案内 | コラム | ミツエーリンクス』のように読み上げられるかと思います。
- 『アプリケーションキー』を押してメニューを表示し、『スクリーンショットを撮る』というメニュー項目を選択します。
- 『M』キーを押して次のフレームに移動します。『ページをドラッグまたはクリックして範囲を選択してください。ESC キーを押すとキャンセルできます。』というテキストが読み上げられ、以下の選択肢のボタンが表示されています。
- キャンセル
- 自分のショット
- 表示範囲を保存
- ページ全体を保存
- 『ページ全体を保存」を押すと、さらに4つの選択肢が利用できるようになります。
- キャンセル
- コピー
- ダウンロード
- 保存
- 『ダウンロード』を押すと、Firefoxのダウンロードフォルダ（CTRL+Jで表示できます）にページのスクリーンショットが保存されます。
前述の通り、旧バージョンのFirefoxでもスクリーン・リーダーを使用してページのスクリーンショットを保存することはできましたが、新しいFirefoxでは操作方法がよりわかりやすくなったことでこの機能を利用しやすくなったように思います。
今回はNVDAを使用した場合の操作方法をご紹介しましたが、他のスクリーン・リーダーを使用されている方や主にキーボードを使用されている方にも同じような手順がご利用いただけると思います。
お試しいただけますと幸いです。
NVDAのアドオンを最新状態に保てるAdd-on Updater
本年7月の記事「NVDAをより快適に使用するためのアドオン」では、スクリーン・リーダーNVDAをより快適に活用するためのアドオンをいくつかご紹介しました。
これらの便利なアドオンですが、快適に利用し続けるためには最新版に更新しなければならないことをご存知でしょうか？
今回ご紹介するAdd-on Updaterは、お使いのNVDAのアドオンを最新の状態に更新してくれるアドオンです。
NVDAにこのアドオンをインストールして再起動した後、「NVDAメニュー」の「ツール」内の「Check for add-on updates」を実行すると、インストールされているアドオンが最新版かどうかを確認して更新することができます。
また、NVDA起動時にもアドオンが最新版かどうかを確認し、更新できるアドオンがあればそれを表示することができます。
このアドオンは将来的にはNVDAの機能として取り込まれる予定とのことですが、それまでの間は常にアドオンを最新の状態に保つのに役立ちそうです。
ニュースサイトにおける画像の代替テキストについて
私がインターネットを通じて様々なデータにアクセスできるようになって最もうれしかったことの1つに、スクリーン・リーダーを使用してほとんどタイムラグなくニュース記事を読めるようになったことがあります。
近年、主要なニュースサイトのアクセシビリティも向上し、私自身も様々な選択肢の中から自分が読みたい記事を読むことができるようになりました。
たくさんの記事が読めるようになったことはとてもありがたいのですが、最近、ニュース記事に登場する画像の代替テキストが耳について困ることがあります。
本来、記事中に登場する画像の説明を提供する目的で使用してほしい代替テキストが、スクリーン・リーダーの利用者をはじめとした読み手の意図に反して使用されていることが多いからです。
今回はその一例をご紹介したいと思いますが、具体的な媒体名を挙げてその代替テキストの使い方を批判する目的ではなく、記事執筆に携わる方に、自社の記事を見直すきっかけにしていただければと考えています。
任意の文字列が代替テキストになっている例
記事中に画像が登場するたびに任意の文字列が代替テキストとして設定されている例によく遭遇します。
例えば、新商品を紹介するような記事には以下のような文章がよく登場します。
今回発表されたのはエントリーモデルからプロフェッショナルモデルの3機種で、それぞれの特徴は以下の通り。
ihhflWBCMFN1uopV.jpg
発売日: 9月9日
価格: 15,000円
WUqGxt616MbpY9ruXHxRIkVw7yI3ge1n.jpg
発売日: 9月9日
価格: 21,000円
XlCILCVL138gyRPrdWYlirohmOP4DqVy.jpg
発売日: 9月25日
価格: 75,000円
この例では、画像の代替テキストとして任意の長い文字列が読み上げられるのを待つか、その部分を読み飛ばして先に読み進めなければなりません。
記事を読み終えるまでに時間がかかることはもちろん、内容の理解に支障を来す場合もあります。
記事タイトルを代替テキストに設定している例
画像が登場するたびに記事タイトルが何度も読み上げられるニュースサイトも少なくありません。
記事のタイトルが長い場合、記事を読んでいるときに何度もその記事タイトルが読み上げられるので、本文の理解に支障を来す場合もあります。
「画像には代替テキストを設定しなければならないけど、何を設定したらいいのだろう？悩ましいけど締め切りが！そうだ、取り急ぎ記事タイトルなら間違いではないだろう。」と考えながら記事を書いている方がいらっしゃるかどうかはわかりませんが、もしその画像を説明する必要がある場合は適切な情報を設定していただけるともっと記事が読みやすくなるように思います。
画像の前後のテキストが重複して読み上げられる例
記事を読んでいるとき「あれっ、今の文、さっきも聴いたような気がする！」と気になることがあります。
代替テキストに本文と同じテキストが入っている場合、画面上では記事の本文を違和感なく読むことができるとしても、スクリーン・リーダーでは同じ文言が2度読み上げられてしまうのです。
記事が長くなればなるほど、2度読み上げられる文言が記事の理解を妨げてしまうことがあるので、このようなケースでは代替テキストは空（alt=""）にしていただく方が良いと思います。
今回は、ニュースサイトで私がよく耳にする問題のありそうな代替テキストの例をご紹介しましたが、これらの多くは改善が難しいものではないと考えられます。
記事の内容がより多くの読者に過不足なく伝わるよう、記事を執筆・編集されている方、ニュースサイトを管理・運営されている方に改善をご検討いただけますと幸いです。
いちスクリーン・リーダーユーザーのFirefox最新版の利用環境について
私は、昨年11月にFirefox 57.0とスクリーン・リーダーの読み上げについてという記事を書いて以降、数日前までFirefoxの延長サポート版を使い続けてきました。
私が普段使用しているアドオンの中に最新版のFirefoxでは利用できないものが少なからずあったこと、仕事で使用している一部のWebアプリケーションのフォームが、NVDAとの組み合わせで意図したとおりに読み上げられなかったことなども相まって、これまで特に仕事の場面では最新版のFirefoxを避けていました。
ところが先日、私が愛用しているアドオン「Tab Mix Plus」で便利だと感じている以下の3つの機能がFirefox 61.0.2では高度な設定を変更することで実現できることを知り、仕事の場面でも積極的にFirefoxの最新版を使っていくことにしました。
- ロケーションバーを別のタブに開く機能
- ブックマークを別のタブに開く機能
- 最後のタブを閉じてもFirefoxのウインドウを閉じないようにする機能
実際に変更した設定項目
それでは、私がFirefox最新版を利用するために変更した高度な設定の項目を具体的に紹介します。
現在のところ、私が設定を変更したFirefoxは問題なく動作しておりますが、これらの設定を変更することで予期しない問題が発生する可能性もあります。
Firefox の設定エディターもご確認いただき、設定を変更いただく際は十分にご注意ください。
Firefoxの高度な設定を変更するには、ロケーションバーに「about:config」と入力してEnterキーを押します。
ロケーションバーを別のタブに開く
私は、ページを閲覧中にロケーションバーから別のページを開いたり、何かを検索したりしたときの検索結果が新しいタブに表示された方が便利だと考えています。
この設定を変更すると、例えば調べ物をしているときなど、タブを切り替えることで元のページと検索結果の間を行き来できます。
設定エディターで以下の項目を検索し、Enterキーを押して値を「True」に変更します。
browser.urlbar.openintab
ブックマークを別のタブに開く
ブックマークしておいたページも、ロケーションバーと同じように別のタブに開けると便利です。
この設定を変更するには以下の項目を検索し、Enterキーを押して値を「True」に変更します。
browser.tabs.loadBookmarksInTabs
最後のタブを閉じてもFirefoxのウインドウを閉じなくする
私はCtrl+Wを押して複数のタブを閉じているとき、誤ってブラウザーのウインドウを閉じてしまうことがよくあります。
もちろん、Firefoxを立ち上げ直せば問題はないのですが、できれば最後のタブが閉じてしまってもウインドウが残っていると便利だなと感じています。
この設定を変更するには以下の項目を検索し、Enterキーを押して値を「True」に変更します。
browser.tabs.closeWindowWithLastTab
今回は最新版Firefoxを私にとって使いやすくするための設定を紹介しましたが、この設定変更はスクリーン・リーダーを使って問題なく行うことができます。
NVDA等のスクリーン・リーダーでFirefoxを利用している方で、同じような問題で最新版のFirefoxを使用することを諦めていた方のお役に立てれば幸いです。
エクストラの最新支援機器セミナーに参加しました
去る8月19日に都内で開催された、音声・点字携帯情報端末 ブレイルセンスポラリス日本語版を紹介するセミナーに参加してきました。
これは文字通り、音声と点字で情報を表現する携帯型の支援技術で、7月末に有限会社エクストラから発売されている製品です。
私は古いモデルのブレイルセンスを所有していますが、最近内蔵されているWebブラウザーでWebサイトにアクセスできなくなってしまったこともあり、その最新動向が気になっていました。
セミナーは2部構成になっており、前半は開発元であるHIMSのテクニカルサポートマネージャーであるジェニファー・アクスラー氏の講演、後半は静岡県立大学国際関係学部の石川准教授によるブレイルセンスポラリス日本語版の機能紹介でした。
ブレイルセンスポラリス（Braille Sense Polaris）とは
今回紹介されたブレイルセンスポラリスは多機能な点字ディスプレイで、32セルのディスプレイと文字を入力したり機器を制御したりするためのキーで構成されています。
音声と点字を出力できるので、利用者は用途に応じてどちらか一方、または両方を活用して情報にアクセスすることができます。
様々な形式のファイルに対応しており、PDFやEPUBのドキュメントを読むことができたり、様々な形式の音声ファイルを再生できるとのことでした。 また、気になっていたWebサイトへのアクセスも問題なくできるようになったとの説明を聞いてとても安心しました。
オペレーティングシステムにはAndroid 5.1が使用されており、ワードプロセッサーや電子メール、Webブラウザやメディアプレーヤーといった基本機能を始め、一般的に普及しているAndroid向けのアプリケーションを使用することもできます（アプリケーション側のアクセシビリティの対応状況によっては利用できない可能性もあります）。
本体底面にはカメラが内蔵されており、商品検索や文字認識などに利用することができるそうです。
印象に残ったデモンストレーション
私が使用している旧型のブレイルセンスは、メーカーから提供されているアプリケーションでできる以上のことはできませんが、セミナーで紹介されたブレイルセンスポラリスは基本機能は少なくなったものの、様々なAndroidアプリが使用できるようになったことで、可能性が広がったような印象を受けました。
GoogleやAmazonの音声アシスタントを使用して現在地の情報や天気を確認するデモ、Apple Musicのアプリを操作するデモなどが興味深いと感じました。
また、AbemaTVのアプリを使用してインターネット放送局の音声を聞くことができたり、SkypeやLINEでコミュニケーションを取ることができたりすることが確認できたのもとても参考になりました。
これまでのブレイルセンスはどちらかというと単体で使用する機器のイメージが強かったのですが、アプリケーションを介してGoogle カレンダーなどとデータを同期させることができるようになったところも便利そうだと感じました。
会場の様子
セミナーが開催されたのは日曜日の午後でしたが、大変多くの方々が参加されていたことからも、このデバイスへの注目の高さがよくわかりました。
特に、視覚と聴覚の両方に障害のある盲聾の参加者から活発に質問が出ていたことが印象に残りました。
今回紹介されたブレイルセンスポラリスに加えて、秋にはもう少しサイズの小さなモデルの発表も予定されているとのこと、さらに選択の幅が広がりそうです。
Microsoftが公開しているアクセシビリティ関連のヘルプ動画について
すでにご存じの方もいらっしゃるかもしれませんが、Microsoftがアクセシビリティ関連のヘルプ動画（英語）を公開しています。
現在は以下の12項目が提供されており、Narratorをはじめとしたスクリーン・リーダーやキーボードショートカット、視線コントロール等に関する操作説明を確認することができます。
この記事では動画のタイトルを意訳してご紹介しますが、翻訳の正確性は保証いたしませんので、必要に応じて元のタイトルをご参照ください。
- テキストサイズを変更する（2分18秒）
- Officeアプリケーションが支援技術で読み上げられない（2分46秒）
- 動作しないショートカットキーを修復する（3分27秒）
- 支援技術に関するTips（2分39秒）
- JAWSがいくつかのOfficeアプリケーションを読み上げない（2分19秒）
- Narratorを用いたWindowsのクリーンインストール（3分35秒）
- PCに視線コントロールをセットアップする（2分18秒）
- PCで視線コントロールを使用する方法（3分6秒）
- Windows 10のセーフモードでNarratorを使用する（2分26秒）
- Windows 10のNarratorで点字ディスプレイを使用する（2分58秒）
- Windows 10のNarrator入門（5分11秒）
- Microsoftの2018年4月のアップデートにおける簡単アクセスの変更点（2分18秒）
今回この再生リストをご紹介しようと考えた理由は以下の2点です。
- 動画の説明が簡潔でわかりやすいこと
- 画面情報の音声解説もいっしょに提供されていること
今後は日本語を含む多言語での提供にも期待したいと思います。
防災情報とアクセシビリティ
今年は大きな災害がいくつも発生しており、それに伴って防災情報を見聞きする機会も多くあったのではないでしょうか。 私もここ数年、住んでいる地域の防災情報をメールで受け取れるように登録したり、気象警報などが発表された際に通知を受け取れるアプリをインストールしたりして、できるだけ災害に備えるようにしています。
iPhoneのVoiceOverはメールやアプリの通知内容を読み上げることができるので、届いた情報はほぼタイムラグなく受け取ることができます。 雨雲が近くまで接近してきていること、警報が発表されたこと、避難準備情報が発表されたことなど、近隣の情報を手に入れられるようになったことはスクリーン・リーダーなどの支援技術を活用しながら生活している私にとってとてもありがたいことです。
とはいえ、中には私が把握できない (スクリーン・リーダーで内容を読み上げられない)情報も少なからずあります。 代表的な物は、危険がある地域と避難先の情報が掲載されているハザードマップで、多くの場合は画像だけで情報提供されているようです。
先日、台風12号が接近した際、私が住んでいる自治体からも防災情報のメールが配信されました。 文面には、土砂災害警戒区域や浸水想定区域が記されたハザードマップのリンクをホームページのトップ画面に掲載しているので詳細を確認してほしい旨が記載されておりましたので、私も近隣の情報を確認できればとホームページにアクセスしてみました。
困ったことに、掲載されていたハザードマップは画像だけで構成されており、代替情報も提供されていなかったのでスクリーン・リーダーでは必要な情報を得ることができませんでした。 幸いにも今回、私の住んでいる近隣地域では大きな災害が発生しなかったので事なきを得たのですが、防災情報はそれを必要としている人に過不足なく伝えられるような仕組みが必要だなと感じました。
私の知る限り、現在は防災情報をアクセシブルに提供するためのガイドラインや仕組みがまだありません。 しかしながら、災害はいつどこで発生するかが予想できないので、できるだけ早く情報を整備していく必要があると思います。
今回例に挙げたハザードマップも、例えば表や定義リストを使用したり、地域名から近隣の危険箇所をテキスト情報で提供するような検索システムなどを作ることで、画像以外の手段で情報を発信することも不可能ではないと思います。
とはいえ、私の不十分な知識だけではどうすれば防災情報をアクセシブルな状態で多くの人に届けられるかがわかりません。 機会があれば、皆さんと一緒に防災情報のアクセシビリティについて検討していけたらと考えているところです。
Pick Up
アクセシビリティ障害者差別解消法への対応が気になるかた必見、これから取り組むWebアクセシビリティとは