次の行からページの本文がはじまります

会報 アイライト通信歩行訓練体験記音声パソコン体験記

見えない見えにくい方のICT活用&コラム

視覚障害から文字情報の入手が困難となる状況では、音声パソコンやスマートフォンの活用により生活面は勿論仕事や学び、趣味など多方面に渡って良い方向へ大きく変化いただけます。
このページではWebサイトを開発される方へ向け、実際に視覚障害当事者が直面する不便を解決することを主にした簡単なご案内を掲載しています。
お役立て頂けましたら幸いです。


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

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


1.正しいHTML記述を行う

見出し、テーブル、リスト、画像といったタグを正しく記述することでスクリーンリーダーでの利用が便利になる場合があります。


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

PC用のスクリーンリーダーの場合、Webページ自体がどのような画面レイアウトでも、1カラムの文章としてWebページを解釈し、1行ずつ縦に読み進めます。
音声パソコンでのWebページがどのような出力となるかはスタイルシートを全て省いて表示することで擬似的なイメージを確認いただけます。
実際にご自身のWebページの外部スタイルシート(可能なら内部のスタイル記述も)を全て外した表示をぜひ一度ご覧ください。
ご覧をいただけましたでしょうか。これが音声でのPCでのWebブラウジングの世界です。
実際はこの表示結果の1行1行をキーボードを使いながら移動し、音声として聴取して理解するため、ここからヘッダー部にメニューや広告、ロゴ、バナーが多量に含まれる場合、本文まで音声読み上げ位置を移動するには多くの操作が必要になると読み取れます。
また、レイアウトはタッチで再現されるスマートフォンの音声利用でも、「どこになにが書かれているかわからない画面をタッチする」のは難儀の中行うものであり、細かなプッシュボタンやスクロールで変化する画面といったアクション要素は大変な負担となります。
iOSデバイスをご利用の方は、「設定」「アクセシビリティ」「VoiceOver」で、音声読み上げでの自サイトの利用をぜひお試しください。


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

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


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

 次のリンクへ移動・・・・・・・・・・・・・・・・・・・・・・・・・・・Tabキー
 次の見出し項目へ移動・・・・・・・・・・・・・・・・・・・・・・・Hキー
 次の箇条書き項目へ移動・・・・・・・・・・・・・・・・・・・・・Lキー
 次のテーブル要素へ移動・・・・・・・・・・・・・・・・・・・・・Tキー
 次のフォームコントロールへ移動・・・・・・・・・・・・・Fキー
 次のエディットボックスへ移動・・・・・・・・・・・・・・・Eキー
 次のプッシュボタンへ移動・・・・・・・・・・・・・・・・・・・Bキー
 次のラジオボタンへ移動・・・・・・・・・・・・・・・・・・・・・Rキー
 次のチェックボックスへ移動・・・・・・・・・・・・・・・・・Xキー
 次のコンボボックスへ移動・・・・・・・・・・・・・・・・・・・Cキー

※「前の項目」へ移動するには上記操作をShiftキーを押しながら行います。

この挙動から、見出しには <h?> 、表には <table> 、リストには <li> <dt>,<dd>、ボタンは画像リンクでなく <input type=button> などのタグの利用が重要になると読み取れます。
類似の操作がNVDA、narrator、VoiceOverなど他のスクリーンリーダーにもあります。
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ソースを作成可能です。


本分終了