Smart Communication Design Company
ホーム > ナレッジ > Blog > アクセシビリティBlog > 2018年10月 > スクリーン・リーダーを使ってWebページのスクリーンショットを撮る方法

アクセシビリティBlog

Webサイトのアクセシビリティを高めるための方法や国内外の関連情報など、さまざまな角度からWebアクセシビリティに関する話題をご提供していきたいと思います。

当Blogの更新情報は、Twitter経由でも配信しています。興味のある方はぜひ、@mlca11yをフォローしてください。

スクリーン・リーダーを使ってWebページのスクリーンショットを撮る方法

アクセシビリティ・エンジニア 辻

8月の記事「いちスクリーン・リーダーユーザーのFirefox最新版の利用環境について」では、普段スクリーン・リーダーを使用している私がようやくFirefoxの最新版を使い始めた話を紹介しました。

今回ご紹介するスクリーン・リーダーを使ってWebページのスクリーンショットを撮る方法は、実は私が旧バージョンのFirefoxで操作方法をなかなか覚えられなくて困っていた作業です。

全盲の私がなぜスクリーンショットを撮る必要があるのか不思議に感じられる方もいらっしゃるかもしれませんが、お客様とWebページについてのやりとりをする際、このスクリーンショットが思いのほか役に立つことがあります。

例えば、お客様からお知らせいただいたページが私の手元で開けないなどのエラーが発生した場合、エラーの詳細を含んだスクリーンショットを見ていただいた方が、ページに表示されているテキストだけをメールに書くよりも状況を伝えやすいことがあります。

現在私が使用しているスクリーン・リーダーNVDA 2018.3.2とFirefox 62.0.3では、以下のような手順でページのスクリーンショットを取得してダウンロードすることができます。

  1. スクリーンショットを撮影したいページを開きます。今回は例として、当社のコラム「「アクセシビリティガイドライン(WCAG/JIS X 8341-3)の活用 解説セミナー」のご案内」のスクリーンショットを撮ることにします。
  2. Ctrl+Lを押してロケーションバーに移動し、一度Tabキーを押します。『「アクセシビリティガイドライン(WCAG/JIS X 8341-3)の活用 解説セミナー」のご案内 | コラム | ミツエーリンクス』のように読み上げられるかと思います。
  3. 『アプリケーションキー』を押してメニューを表示し、『スクリーンショットを撮る』というメニュー項目を選択します。
  4. 『M』キーを押して次のフレームに移動します。『ページをドラッグまたはクリックして範囲を選択してください。ESC キーを押すとキャンセルできます。』というテキストが読み上げられ、以下の選択肢のボタンが表示されています。
    • キャンセル
    • 自分のショット
    • 表示範囲を保存
    • ページ全体を保存
  5. 『ページ全体を保存」を押すと、さらに4つの選択肢が利用できるようになります。
    • キャンセル
    • コピー
    • ダウンロード
    • 保存
  6. 『ダウンロード』を押すと、Firefoxのダウンロードフォルダ(CTRL+Jで表示できます)にページのスクリーンショットが保存されます。
上記手順で撮影したページのスクリーンショット

前述の通り、旧バージョンのFirefoxでもスクリーン・リーダーを使用してページのスクリーンショットを保存することはできましたが、新しいFirefoxでは操作方法がよりわかりやすくなったことでこの機能を利用しやすくなったように思います。

今回はNVDAを使用した場合の操作方法をご紹介しましたが、他のスクリーン・リーダーを使用されている方や主にキーボードを使用されている方にも同じような手順がご利用いただけると思います。
お試しいただけますと幸いです。

Pick Up