本文開始

当協会の会報を、バックナンバー含めて総てお読みいただけます。1999年から続く本会の歩みをぜひご覧ください。視力を使わずに自由に街路を闊歩できる技術、歩行訓練。ここではその体験者の皆様のお声をインタビュー形式でお読みいただけます。ここでは視力を用いずにパソコンを利用されている様々な当事者の方の事例をご紹介します。

見えない見えにくい方のパソコン活用&コラム

近年、内蔵部品の高性能化によりPCの情報収集に果たす役割は更に大きくなりました。
視覚障害から文字情報の入手が困難となる状況では、音声パソコンの活用により生活面は勿論仕事や学び、趣味など多方面に渡って良い方向へ大きく変化いただけます。
本コラムでは、視覚障害の方々が音声パソコンを活用されている様子やソフトをご紹介します。


視覚障害とWebアクセシビリティ

視覚障害の有無に関わらず、情報収集、ショッピング、銀行の振込、音楽やビデオ購入・レンタル、株取引等が可能となるのがインターネットの魅力です。
但し、視力に頼らないWebページの利用を円滑にいただくには、スクリーンリーダーの特性を踏まえたHTMLレンダリングが必要になります。
以下では主にWebページ開発をされている方へ、音声パソコン利用時に役立つHTMLおよびCSSのコーディング手法を紹介します。


1.正しいHTML記述を行う

見出し、テーブル、リスト、画像といったタグを正しく記述することで、音声パソコンでの利用が便利になります。


・音声パソコンではWebページを1行ずつ縦に読む

どのような画面レイアウトであったとしても、音声パソコンでは1カラムの文章としてWebページを解釈し、そのページを1行ずつ縦に読みすすめていきます。
音声パソコンでのWebページがどのような出力となるのかについてはスタイルシートを全て省くことで、近いものを確認いただけます。


・Webページをスタイルなしで表示する方法 (InternetExplorer11)

  1. InternetExplorer11を起動
  2. Altキーを押し、メニューバーを表示
  3. 「表示 (&V)」→「スタイル (&Y)」→「スタイルなし (&N)」と選択

以上の設定で、音声パソコン使用時の環境に近いWebページを表示できます。
実際の利用ではこの1行1行を、キーボードを使い移動しながら音声として聴取し内容を把握するため、例えばヘッダー部にメニューや広告、ロゴ、バナーが多量に含まれる場合、本文まで音声読み上げ位置を移動するには多くの操作が必要になると読み取れます。


・音声パソコン使用時の本文への移動

このような音声パソコンならではの不便は、本文の開始位置直後に <h2> 等の見出しタグを利用いただくことで解決可能となる場合があります。
例えばスクリーンリーダーの一つ『PC-Talker』によりWebページを閲覧中に下記ショートカットキーを利用することで、目的の内容へ少ない操作でたどり着くことが可能です。


<例> 「PC-Talker」(高知システム開発スクリーンリーダーでのWebページ移動ショートカットキー一覧)

 次のリンクへ移動・・・・・・・・・・・・・・・・・・・・・・・・・・・Tabキー
 次の見出し項目へ移動・・・・・・・・・・・・・・・・・・・・・・・Hキー
 次の箇条書き項目へ移動・・・・・・・・・・・・・・・・・・・・・Lキー
 次のテーブル要素へ移動・・・・・・・・・・・・・・・・・・・・・Tキー
 次のフォームコントロールへ移動・・・・・・・・・・・・・Fキー
 次のエディットボックスへ移動・・・・・・・・・・・・・・・Eキー
 次のプッシュボタンへ移動・・・・・・・・・・・・・・・・・・・Pキー
 次のラジオボタンへ移動・・・・・・・・・・・・・・・・・・・・・Rキー
 次のチェックボックスへ移動・・・・・・・・・・・・・・・・・Xキー
 次のコンボボックスへ移動・・・・・・・・・・・・・・・・・・・Cキー
 次のランドマーク(role属性)へ移動・・・・・・・・・・・Mキー
※「前の項目」へ移動するには、上記の操作をShiftキーを押した状態で行います。

この挙動から、見出しには <h?> 、表には <table> 、リストには <li> <dt>,<dd>、ボタンは画像リンクでなく <input type=button> などのタグの利用が重要になると読み取れます。
こうしたショートカット操作は、類似のものがNVDA、narrator、FocusTalkなど他のスクリーンリーダーにもありますので、HTMLリファレンスに準拠した正しいソースコードの記述が結果的に音声パソコン対応の開発へつながります。


2.ソースコード内のエラーの修正

画像にalt属性がない、閉じ忘れたタグがあるなどのソースで出力されるWebページは、音声パソコン使用時に正しく動作しない場合があります。
前記の通りスクリーンリーダーはhtmlタグを解析しページ内ジャンプを行います。
そのためエラーがないhtmlコードの記述が音声読み上げ時に起こる不具合を未然に防ぐことへつながります。


・html文法チェックツールを用いたソースコードのデバッグ

https://validator.nu/等のHTML文法チェックツールを用い、ソースに含まれる不具合を解決可能な場合があります。
例えば <section> タグをソースへ含めた場合、上のツールでは状況により次の警告が出力され、当該タグの直後に <h2> - <h6> を含めるよう推奨されます。
Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.
他にも <h1> タグの設置は1ページ1箇所が望ましい、 <menu> タグは互換性の観点から非推奨など、この出力から様々な情報を入手いただけます。
こうした警告を1つずつ解決することで、音声利用に適し、文法上も正しい、ブラウザのレンダリングエンジンにも負担が少ないHTMLソースを作成可能です。