見えない・見えにくい方のIT活用

• はじめに
• 便利なパソコンソフト
  　　・画面読み上げソフト
  　　・読書支援ソフト
  　　・ワープロソフト
  　　・ネット閲覧ソフト
  　　・メールソフト
  　　・ニュースソフト
  　　・辞書ソフト
  

音声パソコン個別講習を受けて

• パソコンで開けた世界
• 初めてのパソコンと競馬
• 蘇った趣味の世界
• ネットショッピング

視覚障害とWebアクセシビリティ
(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ソースを作成可能です。