以下本文

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

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

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


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

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


1.リンク先は、本文開始位置へ

ページAへページBからリンクを張るとき、ページBのリンク先を、ページAの本文開始位置に設置したIDへ設定することでページAの表示完了と同時にすぐに音声パソコンによるページAの本文部分の読み上げを開始が可能です。
この処理によりバナーや広告、ヘッダやメニューの設置と快適なスクリーンリーダー利用を両立いただけます。
多くのニュースサイトには、ページの最初に画面へ表示されない形で「本文へ移動」のリンクが設置されています。
この「本文へ移動」のリンク先を、別ページから張るリンクに利用することで、音声パソコンでの利便性を向上するのがこの方法です。

以下はコーディングのサンプルです。
手順1.リンク先ページのhtmlソースへの音声読み上げ開始専用IDの作成



手順2.先ほど設置したID「readstart」のスタイルシートを以下のように定義し、画面最上部、画面左外へ描画



手順3.リンク元ページの記述を



のように、IDの部分を「#r」として指定

以上のコーディングにより、画面表示に一切影響せず、音声使用時はWebページの表示直後に本文へ移動済みとなるWebページとなります。


2.<head>内の <title> タグには、重要な情報から順に記載する

多くの場合、 <title> </title> で囲まれた内容が、インターネット検索の結果画面で、各ページへのリンクとなります。
また、ブラウザのお気に入り(ブックマーク)へ登録する時も、この <title>の内容がページの名前になります。
ところで、全てのスクリーンリーダーは画面上の内容を文章として解釈する性質から、あらゆる行を「左から右」に向けて読みます。
したがってスクリーンリーダー利用環境で検索エンジンを利用する場合、検索結果にヒットしたページが目的のものであるかを判断するための情報は、<title>の最初に書いてあればあるほど、耳へ入りやすいと言えます。
SEOにも役立つ <title> の内容ですが、同時に音声利用環境時ならではの便利な活用ができます。


3. title="***" 属性を<input>や<img>へ用いる

<input> タグや <select> タグへ title="***" 属性を含めることで、その内容が音声パソコン専用の音声ガイドになります。


・メール入力ボックスの記述例

たとえば、


と記述するとメールアドレス入力用の1行エディットボックスが出力されますが、ここを


と記述いただくことで、title=の後にある「メールアドレスを入力」の文字列がスクリーンリーダーに読み上げられ、音声ガイドの役割を果たします。
ちょうど、imgタグのalt=属性に近い動きですが、Windows Narratorはalt=属性を読みませんので、重視するスクリーンリーダーの種類によっては敢えて代替えテキストをtitle=属性で指定いただく方法が適する場合があります。


4.リンク要素に用いる画像のファイル名を音声パソコン利用に最適化する

代替えテキストがない画像のファイル名をわかりやすくすることで音声パソコンでの利用が快適になる場合があります。

Webサイト作成ソフトやCMSの仕様で、どうしてもalt属性やtitle属性を挿入できない画像について、PC-Talkerで自動OCR機能をOffにした場合、特にリンクになっている画像はそのファイル名が読み上げられます。
例えば、


上のソースでは、音声パソコン(PC-Talker Neo+NetReader Neo)の場合「picture01」と読み上げられ、リンク先が何のページであるかの推定が困難です。
ここを、


と記述することで、音声では「top-page」と読み上げられることとなり、alt属性のない場合でもリンク先のページ内容の推定が可能となります。


本分終了