Smart Communication Design Company
ホーム > ナレッジ > Blog > アクセシビリティBlog

アクセシビリティBlog

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

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

スクリーン・リーダーのページ内検索機能について

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

私は普段、スクリーン・リーダーを使って目的の情報を探す際、ページ内に設定されている見出しを使って探している情報に近いところから内容を読むように心がけています。 これまでの経験から、その方が効率よく探している情報をみつけだすことができると考えているからです。

例えば、当社ミツエーリンクスのページを例に考えますと、アクセシビリティBlogの最新情報はおそらく「Blog更新情報」という見出しの中にあることが予想できますので、ページの先頭からHキーを何度か押して該当する見出しへ移動し、下矢印キーを何度か押せばアクセシビリティBlogの記事タイトルに効率よくたどり着くことができます(記事が更新されるタイミングによっては一覧にアクセシビリティBlogの記事がないこともあります)。

また、Google ニュースのページでは、見出しが以下のように規則的に使用されているので、これを活用して探しているジャンルのニュースタイトルに効率よくアクセスすることができます。

それでは、見出しが設定されていないページでは、探している情報を効率よくみつける方法はないのでしょうか? スクリーン・リーダーのページ内検索機能を使えば、ある程度このニーズを満たすことができます。

例えばまちBBS東京23区掲示板には、たくさんのスレッドへのリンクが掲載されていますが、効率よくページ内を移動するための見出しは設定されていません。

私がこの一覧で「西新宿」に関するスレッドを探す場合には、スクリーン・リーダーのページ内検索機能を使用します。

NVDAでは、NVDAキー(テンキー0やインサートキー)+Ctrl+Fでページ内検索機能のダイアログを表示し「西新宿」と入力してEnterキーを押すことで『~西新宿・渋谷区本町・中野区本町』という文字列を含んだスレッドへのリンクを探し出すことができます。

執筆時点では、この一覧に「西新宿」をタイトルに含んでいるスレッドが2件ありますので、NVDA+F3キーを押して次の検索結果に、NVDA+Shift+F3を押して前の検索結果に移動して情報を参照します。

最後に、読みたいスレッドのリンクを開くことで目的のスレッドの内容を参照することができますが、探しているキーワードがあらかじめわかっている場合は、もしかしたらページ内検索を使用した方が情報に早くたどり着けることもあるかもしれません。

スクリーン・リーダーでは画面全体の情報を一度に把握することができないので、探している情報を効率よくみつけだすテクニックを覚えておくことは非常に重要です。

もちろん、ページ内に一貫性のある見出しが設定されていれば情報を効率よく探す手がかりになりますが、ページ内検索も私たちスクリーン・リーダー利用者の強い味方です。

個人的には、現在日本語の文字列が検索できないiOSのSafariのページ内検索機能が早く日本語に対応してくれることを期待しています。

NVDAをより快適に使用するためのアドオン

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

近年私は、会社と自宅の両方で、無料でオープンソースのWindows用スクリーン・リーダーであるNVDAをメインのスクリーン・リーダーとして使用しています。

NVDAの素晴らしいところは、私のような実際のスクリーン・リーダーユーザーだけでなく、Webやアプリケーションなどを制作する方がスクリーン・リーダーで自身のコンテンツがどのように読み上げられるかを確認するためのツールとして活用できるところです。

本日は、このNVDAをもっと便利に使っていただくためのアドオンをいくつかご紹介します。

NVDAの機能を拡張するアドオンは、NVDA コミュニティによるアドオン紹介で公開されており、ダウンロードしたファイルを実行することでNVDAにインストールして使用することができます。

Speech History

Speech Historyでは、NVDAが読み上げた内容をクリップボードにコピーすることができます。 Shift+F11とShift+F12キーを押して読み上げ履歴の間を移動し、コピーしたい内容が読まれたところでF12キーを押します。 「ピー」というビープ音が聞こえた後、エディタなどにクリップボードの内容を貼り付ければ耳で聞いただけではわかりにくかった内容を文字として確認することができます。

例えば、一度聞いただけでは覚えられないのに、OKボタンを押すと閉じてしまうようなダイアログの内容も、このアドオンがあれば後でゆっくり参照することができるのでとても便利です。

Focus Highlight

Focus HighlightはNVDAのナビゲーターオブジェクトや、フォーカスのあるオブジェクト・コントロールの場所を、色のついた長方形で強調して表示できるアドオンで、画面の見えにくい人、晴眼の指導者、開発者にとって有用です。

私は、デモンストレーションを行うPCにこのアドオンをインストールしておき、お客様に私がNVDAで読み上げている場所を画面上で確認していただくときに活用しています。

Mozilla Apps Enhancements

Mozilla Apps EnhancementsはMozillaのアプリケーションをより使いやすくできるアドオンです。

私が特に便利だと感じているのは、Thunderbirdでメッセージの添付ファイルの一覧にフォーカスを移動する「Ctrl+Shift+A」という操作と、メッセージリストのコラムの順序を変更する「NVDA (テンキー上の0等)+H」という操作です。

特に後者は、これまでキー操作では難しかったThunderbirdのメッセージ一覧での読み上げ順序を変更するときに便利に使用しています。

今回ご紹介したのはアドオンの一例ですが、ブラウザをカスタマイズするのと同じように、スクリーン・リーダーもニーズに合わせて機能拡張できることがとても素晴らしいと思います。 アドオン紹介のページで、ご自身のNVDAの使用方法に合った便利なアドオンを探してみてはいかがでしょうか?

スクリーン・リーダーを使ってアクセシブルなPDFを作成する

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

今回は、全盲でスクリーン・リーダー利用者の私が、お客様に提出するPDFの資料をどのように作成しているかをご紹介します。

一昔前、PDFは私をはじめとしたスクリーン・リーダー利用者にとって苦手な情報源でした。 内容を読みたくてもアクセシビリティの設定が適切に行われていないために中身がうまく読み上げられなかったり、読み上げられたとしても文書構造が分かりにくくて目的の情報が把握できなかったりと、できれば避けて通りたいような存在でした。

そのPDFを、まさか自分自身がスクリーン・リーダーを使って作成できる日が来るとは、そして私にとってアクセシブルなPDFが比較的簡単に作成できるようになるとは、10年ほど前は想像すらできませんでした。

今回ご紹介する方法では、以下のような手順でPDFを作成します。

  1. Markdownで原稿を作成する
  2. Pandocを用いて原稿をMicrosoft Wordのドキュメントに変換する
  3. Microsoft WordでドキュメントをPDFに変換する

Markdownで原稿を作成する

Markdownの詳細説明は省略いたしますが、例えばお客様との打ち合わせのためのアジェンダを作成する場合、Markdown記法を用いて以下のようなファイルを作成してagenda.md(UTF-8形式)のような名前で保存します。

% 株式会社Hogehoge様\
    2018年7月お打ち合わせアジェンダ
% 株式会社ミツエーリンクス
% 2018年7月3日

- 日時
    - 2018年7月5日 (木) 16時00分~17時00分
- 場所
    - 株式会社Hogehoge会議室
- 資料
    - 本アジェンダ
    - 添付資料1

# 今月の議題

1. 議題1
2. 議題2
3. 議題3
4. その他
    - 次回打ち合わせ日程
    - その他確認事項

全文を読む

最近気になったアプリケーションの操作方法の変更について

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

バージョンアップなどに伴い、アプリケーションの操作方法が変わってびっくりした経験をお持ちの方はいらっしゃるでしょうか?

例えば「このメニューを開いて次にこの手順で操作すれば簡単に目的が達成できる」と操作方法をしっかり覚えていたつもりでも、ときどきそれがうまく機能しないことがあります。

スクリーン・リーダーを日常的に使用している私も、頻繁に使用しているアプリケーションの操作方法が急に変わってびっくりする経験をしましたので、本日はその事例を二つご紹介します。

Microsoft Teamsのショートカットキーの変更

当社では、同僚とコミュニケーションを取るツールとしてMicrosoft Teamsを使用しています。 特に私は、普段イヤホンをつけてスクリーン・リーダーの音声を聞きながら仕事をしているため、同僚との会話にはこのツールをよく利用します。話しかけたい相手がどこで作業しているのか探し回らなくても、相手に用件を伝えることができるからです。

ある日、これまで使えていたショートカットキーでアプリケーションを操作しようとしたところ、キー操作を受け付けなくなってしまったことがありました。

うっかりしてショートカットキーを押し間違えたのではないか、新しいバージョンではショートカットキーが無効化されたのではないだろうか等、しばらくの間いろいろ悩みましたが、ショートカットキーの一覧を確認することにしました。

結論を申しますと、これまではAltキーとの組み合わせで動作するようになっていたショートカットキーが、更新されたバージョンではCtrlキーとの組み合わせで動作するように変更されていた、ということだったのですが、その事実に気がつくまで数時間かかってしまいました。

このバージョンを使い始めて一週間以上が経過し、新しいショートカットキーもある程度手になじんではきましたが、しばらくの間は古いショートカットキーを押してしまってはっとするような状態が続きました。

今回のようにショートカットキーをはじめとしたアプリケーションの操作方法に大きな変更がある場合、アプリケーションが更新された後にそれをダイアログなどで通知してもらえるようになると便利なのではないかと感じたできごとでした。

NVDA 2018.2で変更された設定ダイアログ

去る6月13日にリリースされたNVDA 2018.2と、日本語Windows向けの改良を行ったNVDA 2018.2jpでは、NVDAの動作方法などを変更する設定ダイアログに大きな変更がありました。

これまでは個別のダイアログとして表示されていた「一般」「音声」「点字」等の設定ダイアログが一つのダイアログに集約されて表示されるようになったことで、個別の設定を探し回る必要がなくなったことは大変便利だと思います。 一部の設定項目にはショートカットキーも用意されているので、例えば一般設定であれば、NVDAキー+Ctrl+Gを押すことで簡単に設定にアクセスすることもできます。

ところが、複数の点字ディスプレイを切り替えて使用している私は、少なからずこの変更の影響を受けることになってしまいました。 点字ディスプレイの設定ダイアログにはそれを簡単に開くためのショートカットキーが用意されていないため、私はこれまで、「NVDAキー+N」を押してNVDAメニューを開き、続けて「P R」を押すことで点字ディスプレイの設定ダイアログを開いていました。

しかし、新しいバージョンのNVDAでは多くの設定が一つの設定ダイアログに集約されたため、「NVDAキー+N」を押してNVDAメニューを開き、「P S」を押して設定ダイアログを開いた後、「カテゴリ」の一覧から「点字」を選択しなければ点字ディスプレイの設定が変更できなくなったので、ほんの少しではありますがこれまでよりも設定変更に手間がかかるようになってしまったのです。

もしかしたらこれも、操作方法に慣れていくことで解決できる問題なのかもしれませんが、これまで慣れ親しんできた操作方法で展示ディスプレイの設定が変更できなくなったことは、実は私にとってはこのバージョンのNVDAにおける大きなインパクトのある変更でした。

このように、操作性の向上や機能拡張を目的として行われる変更は、時として利用者に大きな影響を与えるものなのだなと言うことを改めて実感いたしました。

追記

記事の後半で取り上げたNVDAの点字ディスプレイの設定変更につきまして、読者の方より情報をいただきました。 NVDA 2018.2からは、NVDA+Ctrl+Aというショートカットキーが追加されており、これを使用することで点字ディスプレイを切り替えるためのダイアログを簡単に呼び出せるようになったそうです。

今後は、点字ディスプレイを切り替える際にこのショートカットキーを便利に活用させていただきたいとおもいます。 ご指摘いただきましてどうもありがとうございました。

進化を続けるWindowsのNarrator

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

Windowsに標準で搭載されているNarratorというスクリーン・リーダーをご存じでしょうか? Narratorの歴史は古く、なんとWindows 2000が発表された頃からOSとともにインストールされるようになったスクリーン・リーダーなんです。

近年普及しているWindows 10においてはこのNarratorの機能も進化しており、簡単な作業であれば他のスクリーン・リーダーにも遜色なく利用できるものになったと思います。

特に、今年4月にリリースされたWindows 10 (1803)では、WindowsのセーフモードでもNarratorが使用できるようになり、私たちスクリーン・リーダーのユーザーがこれまで操作を諦めざるを得なかったWindowsのセーフモードの操作が可能になりました。

前置きが長くなりましたが、今回は6月14日に公開されたWindows 10 Insider Preview Build 17692で強化されたNarratorの機能についてご紹介します。

キーボードレイアウトの変更

Narratorの読み上げを制御するキーボードコマンドのレイアウトが、他のスクリーン・リーダー利用者にもなじみのあるものに変更されました。 レイアウトの詳細はIntro to New Narrator Keyboard Layout docで紹介されています。

表示されたダイアログの自動読み上げ

Narratorを使用中に新しいダイアログが前面に表示された場合に自動的に読み上げができるようになりました。 例えば、Wordで文書を保存しないで終了しようとすると『Microsoft Word ダイアログ "文書 1" に対する変更を保存しますか?』のようなメッセージが表示されますが、これが自動的に読み上げられるようになったようです。

文字列検索機能の追加

スクリーン・リーダーのユーザーはしばしば、画面上の文字列を検索してその画面に自分が探している情報があるかどうかを確認することがあります。 私はJAWSやNVDAでこの機能に頼ることが多く、Webページで自分が探している情報に素早くアクセスするために使用しています。 Narratorでも、この検索機能が使用できるようになったようです。

オブジェクト一覧の生成

アプリケーションやコンテンツ内で使用されているリンクや見出し、ランドマークの一覧を作成できるようになりました。

スキャンモード内でのテキスト選択機能の強化

スキャンモード内でShiftキーを押してテキストを選択するだけでなく、始点と終点を指定してブロック単位でテキストを選択できるようになりました。 例えば、選択したいテキストの始点でF9を押し、テキストの終点でF10を押すと、2点の間のテキストが選択されます。

スキャンモード内のコントロールで読み上げを停止する機能

スキャンモードはNarratorで画面内を簡単なキー操作で移動する機能で、Edgeではデフォルトで有効になっており、上下のカーソルキーで表示されているページを読み上げることができます。 この機能では、上下カーソルで読み上げ中に操作可能な要素がみつかると、そこで読み上げを停止します。 例えば、複数のリンクがあるパラグラフを読んでいるとき、リンクが出てくると読み上げが停止されます。

これまでは、Windowsである程度高度な作業をするためには、自分でスクリーン・リーダーをインストールする必要がありましたが、標準で搭載されているNarratorでもWindowsを便利に活用できるようになったことが素晴らしいと感じています。 今後のNarratorの進化にも期待したいですね。

Firefox Developer Editionでアクセシビリティインスペクターが利用可能に

取締役 木達

4月にお知らせしたFirefoxの開発者ツールにアクセシビリティインスペクターが追加される件の続報です。New in Firefox 61: Developer Edition - Mozilla Hacks - the Web developer blogという記事で、同機能がFirefox Developer Editionで利用できるようになったことを知りました。

Developer Editionは、その名の通り開発者向けに作られたFirefox。その61.0betaバージョンにおいて、アクセシビリティインスペクターが利用可能になっています。

Firefox Developer Editionの「Firefoxについて」画面

以下は、開発者ツールの設定画面です。「標準の開発ツール」に、Nightlyバージョンでは英語表記(「Accessibility」)だったのですが、「アクセシビリティ」という項目が加わりました。

開発者ツールの設定画面

全文を読む

「CSUN 2018 参加報告セミナー」のフォローアップ 第二弾

取締役 木達

第一弾に引き続き、4月24日に開催しましたCSUN 2018 参加報告セミナーのフォローアップをお届けします。第二弾では、パネルディスカッションの内容をご紹介します(思いのほか長文の記事になりましたので、アンケートの集計結果のご紹介については記事を改めます)。

パネルディスカッション

パネルディスカッションは、あらかじめ用意したキーワードごとに登壇者全員でフリートークを行う方式で、私が進行役を務めました。

パネルディスカッションの様子(左から小林氏、秋山氏、スクリーンを挟んで植木氏、木達の各登壇者)
WCAG

前半の各セッション報告で触れられた、W3C/WAIの策定するガイドライン、Web Content Accessibility Guidelines(WCAG)が最初のキーワードでした。WCAG 2.1の勧告に向け何か準備をしていますか? との問いかけから、ディスカッションをスタートしました。

また、2.xと並行して検討されているガイドライン「Silver」について、果たして将来勧告されるだろうか? との疑問を植木氏に投げかけたところ、2.1の勧告後には(Silverより前に)2.2を勧告することになるのでは、とコメント。また、2.1が勧告されたからといってJIS X 8341-3がそれに追随することにはならない、いたちごっこを避けるためにも慎重な判断が必要との見解を示しました。

全文を読む

Pick Up