- ベストアンサー
全盲の方にも来て頂けるHPの作り方とは…
- 全盲の方でも利用できるHPを作成するためには、音声ブラウザに対応したコンテンツ表現が重要です。
- 全盲の方向けにページ修正をする際には、音声ブラウザの読み上げ機能の問題を解決する必要があります。
- 全盲の方に対応したHPを作成するためには、音声ブラウザの動作やコンテンツ表現についての理解が必要です。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
全盲の人でも利用できるように、 ということは全盲の人だけが対象ではないということですよね。 一番おすすめなのは、デザインをCSSに任せ、HTMLだけを見れば「テキストオンリーサイト」になっているのがよいかと思います。 No.1やNo.2の方が参考URLを示してくださっていますが、具体的にどうというのを探すのは少し困難かもしれませんので、書きますね。 まず、HTMLを見直してください。 １、タイトルは正確についていますか？ そのページを表す内容になっていますか？ →ここが不十分だと、全盲の人にはそのページがどんなページなのか全体を読むまで分かりません。 ですから、サイトの全てのページが「○○株式会社」という同じタイトルをもっているなどは望ましくありません。 ２、タグの意味を知りましょう。 たとえば、<font>タグでサイズや色を変えて見た目に訴えていたりするのは、全盲の方には分かりづらいです。音声ブラウザはタグの意味を識別して読み上げるので、fontタグでどれだけ見た目を強調しても伝わりません。そういうものは、<em>や<strong>タグを使うと分かりやすいでしょう。 見出しにするものに関しては<h1>や<h2>タグを使い分けます。 参考URLを記しておきます。 ３、背景画像や単なる挿絵はCSSで。見せたい画像は<img>タグを使い、ただし、title やalt といった属性を忘れないこと。ここはちょっと私も分からないのですが、altとtitleの属性を両方記しておく方がよいと思われます。 ４、<head>タグ内に何をかかれていますか？ <link rev="made" href="mailto:xxx@xxx.com" /> <link rel="contents" href="index.html" /> <link rel="index" href="index.html" /> <link rel="next" href="nextpage.html" /> <link rel="copyright" href="about_site.html" /> <link rel="search" href="websearch.html" /> <link rel="help" href="navi.html" /> こういうのも有益な情報になります。 ５、<address>タグを使っていますか？ サイトの所有者情報を示すタグです。こんな情報も欲しいですよね。 ６、リンクの文字列は？ お店の情報は<a href="koko.html">こちら</a>です なんてハイパーリンクを使っていると、何のことか分からないです。 <a href="koko.html">お店の情報はこちら</a> とかしたほうが読み上げやすいんです。 ７、英語の表記は？ 基本的に日本語のサイトの場合、 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> などと書いて、日本語であることを明記しています。 このページの中でたとえば「WEB」という文字列を書いたとします。音声ブラウザはこれを「W、E、B」と一文字ずつ読み上げます。 これを英語で読ませたい場合は、 <p lang="en" xml:lang="en">This site is written in Japanese only.</p> や お店の名前は<span lang="en" xml:lang="en">CAFE MILK</span>です。 などと、langとxml:lang属性をつけてあげることです。 これで英語読み上げしてくれます。他の言語（フランス語とかギリシア語とか）の指定方法もありますので、お調べになってください。 ８、リンクのショートカット <a href="a.html" accesskey="a">AAA</a> アクセスキーをつけているとリンクも飛びやすいですね。 ※ 一番簡単なのは作成したとき、CSSを外して白黒状態のページを眺めてみることです。<h1>タグや<h2>タグで記された文字は自動的に大きく、<em>や<strong>で示された文字はブラウザに応じて強調されます。 それを眺めたときに読みやすければ大体大丈夫ですよ。 ざっとこんなところでしょうか。 あとは皆さんの参考URLなどをごらんになってくださいね。 そしてCSSを覚えてください。 がんばってください。
その他の回答 (3)
こんにちは。 ウェブアクセシビリティの中の視覚障害者に限っての話、 視覚障害者の方達のアクセスは「スクリーン・リーダー」にて内容を把握しますので、健常者が画面を一望して目的の場所をクリックするような作りですと完全なアクセスは困難かと思います。 例えば、アイコン等にはALT属性に依る説明が有ったとしても何処にそのアイコンが有るのかが分かり易い位置に配置されて居ないと見過ごされてしまいます。 又、総てのスクリーン・リーダーが一様に動作(対応)する訳でも無いので、スクリーン・リーダーの癖(特徴)等も↓に有るような種類の研究も必要らしいです。 ------------------------- スクリーン・リーダーとは 主なスクリーン・リーダー 現在、日本で市販されている主な製品には、以下のものがあります ↓ http://www.keiyu.com/access/screen.htm#reader
お礼
ご回答ありがとうございます。 ひとえに“音声ブラウザ（スクリーン・リーダー）”といっても、色々と種類があるのですね。初めて知りました。 その、現在修正依頼を受けている友人のHPには、何名か全盲の方がいらっしゃるようなので、皆さん同じスクリーン・リーダーを使用されているとは限らないのですよね… とりあえず、回答を寄せて頂いた皆様よりのご指導を参考にHPの修正をしてから、改めて友人を介して全盲の利用者様の反応を伺いたいと思います。 違う角度からのご指導ありがとうございました。
- fcrjoey
- ベストアンサー率35% (20/57)
参考URLの「ウェブアクセシビリティ」→「アクセシビリティ情報の総目次」→「2.アクセシブルなウェブの作成方法を知りたいとき」とたどっていくと お求めの情報に近い物に辿り着くと思います。 （個人的には「2-1アクセシブルなウェブの作り方」→「バリアフリーWebデザインガイド」がわかりやすいと思います。フレームについても解説されています） それ以外にもこのサイトで アクセシビリティについて詳細に解説しているので 今回の様に全盲の方が来られる事を前提に作るのであれば 熟読されるととても役に立つと思います。 ちなみに私は自分自身でサイト作成に携わる人間ではありませんが 仕事で作成を発注する事があるので目下勉強中です。
- 参考URL：
- http://www.aao.ne.jp/
お礼
ご回答ありがとうございます。 参考URLの丁寧な辿り方を記載して頂き、『バリアフリーWebデザインガイド』を拝見致しました。 こちらの“教えて！goo”を利用する前に、自分なりに全盲の方にも来て頂けるHPの作成方法のヒントがないか、色々とサイトを見て回ったのですが、このようなサイトがあったとは！ とても参考になりそうです。これから熟読して、修正に反映させたいと思います。教えて頂きありがとうございました。
- ororonchou
- ベストアンサー率40% (161/396)
大手のポータルサイトとかをお手本にしてみればいいと思います。 Yahoo!とかgooとか、入口にフレームを使っているサイトは皆無ですよね？ つまりそれだけ、フレームはアクセシビリティ（アクセスのしやすさ、使いやすさ）が悪いんです。何はともあれフレームはやめたほうがいいですね。 あとは、「テキストオンリーのサイト」を作るつもりでやればいいと思います。基本的なところでは、画像にはかならずaltで説明をつける、とか…。 コチラ↓の指針番号8番以降あたりが参考になるかもしれません。
お礼
ご回答ありがとうございます。 私の作ったページも、入口部分はフレームを使用せず、中に入るとフレーム式になっているので、入口部分は大丈夫のようですね。 後、画像についてもaltタグをつけて、その画像についての説明を入れると読み取って貰えるようですね。 参考URLを拝見したのですが、titleタグについて、フレームを使っている部分は確かにtitleがついたりついていなかったりしていました。 修正部が見えてきたのでとても嬉しいです。ご回答ありがとうございました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ご回答ありがとうございます。 丁寧に沢山、具体的にご指導頂きまして本当に頭の下がる思いです。 9arabi様が具体的に記載して下さった、1～8番をまず洗い直してみて、参考URL先の『ハンディがあっても利用できるページづくり』という部分も、特に参考にさせて頂こうと思います。 改めて、皆様が記載してご指導下さる事や参考URL先などを見ますと、titleタグやaltタグの重要性を再認識致しました。 9arabi様、大切なお時間を割いてこのように沢山ご指導頂きましてありがとうございました。全盲の方にも来て頂けるサイトが私にも作れそうです。頑張ります！