本文開始

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

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

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


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

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


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

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

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



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



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



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

以上のコーディングにより、画面表示に一切影響せず、音声使用時は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+NetReader2)の場合「picture01」と読み上げられ、リンク先が何のページであるかの推定が困難です。
ここを、


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