全盲の方にも来て頂けるHPの作り方とは…

Question

どなたかホームページ作成に詳しいお方、知恵をお貸し下さい。

以前、友人の依頼によりフレーム式（左メニュー右メイン）のホームページ作成をしたのですが、その友人より『全盲のお友達がHPに来るので、全盲の方でも利用できるHPにして欲しい』との修正依頼が来ました。
どうやら、その全盲の方は“音声ブラウザ”でページを閲覧されているようなのですが、私が作成したHPでは、その音声ブラウザが上手く機能せず…読み上げはするのですが、どこが何のコンテンツなのかが全然解らない状態のようです。

私自身“音声ブラウザ”という物に馴染みがなく、実際どのようにHPのコンテンツを表現しているのかが解りませんので、これから全盲の方向けにページ修正するにあたって、何に注意して修正をかければ良いのかが、まったく解らない状況です。

どうか詳しい方、どの点に留意してページの修正をしたら良いかをご指導下さいませ。どうぞ宜しくご回答の程お待ちしております。

9arabi · Accepted Answer

全盲の人でも利用できるように、ということは全盲の人だけが対象ではないということですよね。一番おすすめなのは、デザインをCSSに任せ、HTMLだけを見れば「テキストオンリーサイト」になっているのがよいかと思います。 No.1やNo.2の方が参考URLを示してくださっていますが、具体的にどうというのを探すのは少し困難かもしれませんので、書きますね。まず、HTMLを見直してください。１、タイトルは正確についていますか？　そのページを表す内容になっていますか？　→ここが不十分だと、全盲の人にはそのページがどんなページなのか全体を読むまで分かりません。　　ですから、サイトの全てのページが「○○株式会社」という同じタイトルをもっているなどは望ましくありません。２、タグの意味を知りましょう。　たとえば、タグでサイズや色を変えて見た目に訴えていたりするのは、全盲の方には分かりづらいです。音声ブラウザはタグの意味を識別して読み上げるので、fontタグでどれだけ見た目を強調しても伝わりません。そういうものは、やタグを使うと分かりやすいでしょう。　見出しにするものに関しては
や
タグを使い分けます。　参考URLを記しておきます。３、背景画像や単なる挿絵はCSSで。見せたい画像はタグを使い、ただし、title やalt といった属性を忘れないこと。ここはちょっと私も分からないのですが、altとtitleの属性を両方記しておく方がよいと思われます。４、タグ内に何をかかれていますか？　こういうのも有益な情報になります。５、
タグを使っていますか？　サイトの所有者情報を示すタグです。こんな情報も欲しいですよね。６、リンクの文字列は？お店の情報はこちらです　なんてハイパーリンクを使っていると、何のことか分からないです。　お店の情報はこちら　とかしたほうが読み上げやすいんです。７、英語の表記は？　基本的に日本語のサイトの場合、　　などと書いて、日本語であることを明記しています。　このページの中でたとえば「WEB」という文字列を書いたとします。音声ブラウザはこれを「W、E、B」と一文字ずつ読み上げます。　これを英語で読ませたい場合は、　
This site is written in Japanese only.
　や　お店の名前はCAFE MILKです。　などと、langとxml:lang属性をつけてあげることです。　これで英語読み上げしてくれます。他の言語（フランス語とかギリシア語とか）の指定方法もありますので、お調べになってください。８、リンクのショートカット　AAA 　アクセスキーをつけているとリンクも飛びやすいですね。 ※ 一番簡単なのは作成したとき、CSSを外して白黒状態のページを眺めてみることです。
タグや
タグで記された文字は自動的に大きく、やで示された文字はブラウザに応じて強調されます。それを眺めたときに読みやすければ大体大丈夫ですよ。ざっとこんなところでしょうか。あとは皆さんの参考URLなどをごらんになってくださいね。そしてCSSを覚えてください。がんばってください。参考URL：http://kanzaki.com/docs/htminfo.html

ororonchou · Answer

大手のポータルサイトとかをお手本にしてみればいいと思います。
Yahoo!とかgooとか、入口にフレームを使っているサイトは皆無ですよね？
つまりそれだけ、フレームはアクセシビリティ（アクセスのしやすさ、使いやすさ）が悪いんです。何はともあれフレームはやめたほうがいいですね。
あとは、「テキストオンリーのサイト」を作るつもりでやればいいと思います。基本的なところでは、画像にはかならずaltで説明をつける、とか…。
コチラ↓の指針番号8番以降あたりが参考になるかもしれません。

参考URL：http://jp.fujitsu.com/webaccessibility/v2/

fcrjoey · Answer

参考URLの「ウェブアクセシビリティ」→「アクセシビリティ情報の総目次」→「2.アクセシブルなウェブの作成方法を知りたいとき」とたどっていくと
お求めの情報に近い物に辿り着くと思います。
（個人的には「2-1アクセシブルなウェブの作り方」→「バリアフリーWebデザインガイド」がわかりやすいと思います。フレームについても解説されています）

それ以外にもこのサイトで
アクセシビリティについて詳細に解説しているので
今回の様に全盲の方が来られる事を前提に作るのであれば
熟読されるととても役に立つと思います。

ちなみに私は自分自身でサイト作成に携わる人間ではありませんが
仕事で作成を発注する事があるので目下勉強中です。

参考URL：http://www.aao.ne.jp/

noname#22689 · Answer

こんにちは。
ウェブアクセシビリティの中の視覚障害者に限っての話、
視覚障害者の方達のアクセスは「スクリーン・リーダー」にて内容を把握しますので、健常者が画面を一望して目的の場所をクリックするような作りですと完全なアクセスは困難かと思います。
例えば、アイコン等にはALT属性に依る説明が有ったとしても何処にそのアイコンが有るのかが分かり易い位置に配置されて居ないと見過ごされてしまいます。
又、総てのスクリーン・リーダーが一様に動作(対応)する訳でも無いので、スクリーン・リーダーの癖(特徴)等も↓に有るような種類の研究も必要らしいです。
-------------------------
スクリーン・リーダーとは

主なスクリーン・リーダー
現在、日本で市販されている主な製品には、以下のものがあります
↓
http://www.keiyu.com/access/screen.htm#reader

全盲の方にも来て頂けるHPの作り方とは…

大手のポータルサイトとかをお手本にしてみればいいと思います。

参考URLの「ウェブアクセシビリティ」→「アクセシビリティ情報の総目次」→「2.アクセシブルなウェブの作成方法を知りたいとき」とたどっていくと

全盲の人でも利用できるように、

こんにちは。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング