どなたかホームページ作成に詳しいお方、知恵をお貸し下さい。
以前、友人の依頼によりフレーム式(左メニュー右メイン)のホームページ作成をしたのですが、その友人より『全盲のお友達がHPに来るので、全盲の方でも利用できるHPにして欲しい』との修正依頼が来ました。
どうやら、その全盲の方は“音声ブラウザ”でページを閲覧されているようなのですが、私が作成したHPでは、その音声ブラウザが上手く機能せず…読み上げはするのですが、どこが何のコンテンツなのかが全然解らない状態のようです。
私自身“音声ブラウザ”という物に馴染みがなく、実際どのようにHPのコンテンツを表現しているのかが解りませんので、これから全盲の方向けにページ修正するにあたって、何に注意して修正をかければ良いのかが、まったく解らない状況です。
どうか詳しい方、どの点に留意してページの修正をしたら良いかをご指導下さいませ。どうぞ宜しくご回答の程お待ちしております。
No.3ベストアンサー
- 回答日時:
全盲の人でも利用できるように、
ということは全盲の人だけが対象ではないということですよね。
一番おすすめなのは、デザインをCSSに任せ、HTMLだけを見れば「テキストオンリーサイト」になっているのがよいかと思います。
No.1やNo.2の方が参考URLを示してくださっていますが、具体的にどうというのを探すのは少し困難かもしれませんので、書きますね。
まず、HTMLを見直してください。
1、タイトルは正確についていますか? そのページを表す内容になっていますか?
→ここが不十分だと、全盲の人にはそのページがどんなページなのか全体を読むまで分かりません。
ですから、サイトの全てのページが「○○株式会社」という同じタイトルをもっているなどは望ましくありません。
2、タグの意味を知りましょう。
たとえば、<font>タグでサイズや色を変えて見た目に訴えていたりするのは、全盲の方には分かりづらいです。音声ブラウザはタグの意味を識別して読み上げるので、fontタグでどれだけ見た目を強調しても伝わりません。そういうものは、<em>や<strong>タグを使うと分かりやすいでしょう。
見出しにするものに関しては<h1>や<h2>タグを使い分けます。
参考URLを記しておきます。
3、背景画像や単なる挿絵はCSSで。見せたい画像は<img>タグを使い、ただし、title やalt といった属性を忘れないこと。ここはちょっと私も分からないのですが、altとtitleの属性を両方記しておく方がよいと思われます。
4、<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" />
こういうのも有益な情報になります。
5、<address>タグを使っていますか?
サイトの所有者情報を示すタグです。こんな情報も欲しいですよね。
6、リンクの文字列は?
お店の情報は<a href="koko.html">こちら</a>です
なんてハイパーリンクを使っていると、何のことか分からないです。
<a href="koko.html">お店の情報はこちら</a>
とかしたほうが読み上げやすいんです。
7、英語の表記は?
基本的に日本語のサイトの場合、
<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属性をつけてあげることです。
これで英語読み上げしてくれます。他の言語(フランス語とかギリシア語とか)の指定方法もありますので、お調べになってください。
8、リンクのショートカット
<a href="a.html" accesskey="a">AAA</a>
アクセスキーをつけているとリンクも飛びやすいですね。
※
一番簡単なのは作成したとき、CSSを外して白黒状態のページを眺めてみることです。<h1>タグや<h2>タグで記された文字は自動的に大きく、<em>や<strong>で示された文字はブラウザに応じて強調されます。
それを眺めたときに読みやすければ大体大丈夫ですよ。
ざっとこんなところでしょうか。
あとは皆さんの参考URLなどをごらんになってくださいね。
そしてCSSを覚えてください。
がんばってください。
参考URL:http://kanzaki.com/docs/htminfo.html
ご回答ありがとうございます。
丁寧に沢山、具体的にご指導頂きまして本当に頭の下がる思いです。
9arabi様が具体的に記載して下さった、1~8番をまず洗い直してみて、参考URL先の『ハンディがあっても利用できるページづくり』という部分も、特に参考にさせて頂こうと思います。
改めて、皆様が記載してご指導下さる事や参考URL先などを見ますと、titleタグやaltタグの重要性を再認識致しました。
9arabi様、大切なお時間を割いてこのように沢山ご指導頂きましてありがとうございました。全盲の方にも来て頂けるサイトが私にも作れそうです。頑張ります!
No.4
- 回答日時:
こんにちは。
ウェブアクセシビリティの中の視覚障害者に限っての話、
視覚障害者の方達のアクセスは「スクリーン・リーダー」にて内容を把握しますので、健常者が画面を一望して目的の場所をクリックするような作りですと完全なアクセスは困難かと思います。
例えば、アイコン等にはALT属性に依る説明が有ったとしても何処にそのアイコンが有るのかが分かり易い位置に配置されて居ないと見過ごされてしまいます。
又、総てのスクリーン・リーダーが一様に動作(対応)する訳でも無いので、スクリーン・リーダーの癖(特徴)等も↓に有るような種類の研究も必要らしいです。
-------------------------
スクリーン・リーダーとは
主なスクリーン・リーダー
現在、日本で市販されている主な製品には、以下のものがあります
↓
http://www.keiyu.com/access/screen.htm#reader
ご回答ありがとうございます。
ひとえに“音声ブラウザ(スクリーン・リーダー)”といっても、色々と種類があるのですね。初めて知りました。
その、現在修正依頼を受けている友人のHPには、何名か全盲の方がいらっしゃるようなので、皆さん同じスクリーン・リーダーを使用されているとは限らないのですよね…
とりあえず、回答を寄せて頂いた皆様よりのご指導を参考にHPの修正をしてから、改めて友人を介して全盲の利用者様の反応を伺いたいと思います。
違う角度からのご指導ありがとうございました。
No.2
- 回答日時:
参考URLの「ウェブアクセシビリティ」→「アクセシビリティ情報の総目次」→「2.アクセシブルなウェブの作成方法を知りたいとき」とたどっていくと
お求めの情報に近い物に辿り着くと思います。
(個人的には「2-1アクセシブルなウェブの作り方」→「バリアフリーWebデザインガイド」がわかりやすいと思います。フレームについても解説されています)
それ以外にもこのサイトで
アクセシビリティについて詳細に解説しているので
今回の様に全盲の方が来られる事を前提に作るのであれば
熟読されるととても役に立つと思います。
ちなみに私は自分自身でサイト作成に携わる人間ではありませんが
仕事で作成を発注する事があるので目下勉強中です。
参考URL:http://www.aao.ne.jp/
ご回答ありがとうございます。
参考URLの丁寧な辿り方を記載して頂き、『バリアフリーWebデザインガイド』を拝見致しました。
こちらの“教えて!goo”を利用する前に、自分なりに全盲の方にも来て頂けるHPの作成方法のヒントがないか、色々とサイトを見て回ったのですが、このようなサイトがあったとは!
とても参考になりそうです。これから熟読して、修正に反映させたいと思います。教えて頂きありがとうございました。
No.1
- 回答日時:
大手のポータルサイトとかをお手本にしてみればいいと思います。
Yahoo!とかgooとか、入口にフレームを使っているサイトは皆無ですよね?
つまりそれだけ、フレームはアクセシビリティ(アクセスのしやすさ、使いやすさ)が悪いんです。何はともあれフレームはやめたほうがいいですね。
あとは、「テキストオンリーのサイト」を作るつもりでやればいいと思います。基本的なところでは、画像にはかならずaltで説明をつける、とか…。
コチラ↓の指針番号8番以降あたりが参考になるかもしれません。
参考URL:http://jp.fujitsu.com/webaccessibility/v2/
ご回答ありがとうございます。
私の作ったページも、入口部分はフレームを使用せず、中に入るとフレーム式になっているので、入口部分は大丈夫のようですね。
後、画像についてもaltタグをつけて、その画像についての説明を入れると読み取って貰えるようですね。
参考URLを拝見したのですが、titleタグについて、フレームを使っている部分は確かにtitleがついたりついていなかったりしていました。
修正部が見えてきたのでとても嬉しいです。ご回答ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript スマホ上で、左右スワイプで次のページに移動させたいです 2 2022/11/11 17:04
- その他(ブラウザ) Edge、Chrome、FireFoxのパスワード記憶機能 2 2023/08/16 16:25
- その他(ブラウザ) ブラウザでの音量(YouTubeなどの視聴)が自動的に下がってしまう。(できれば直したいです。) 2 2023/07/15 08:52
- ホームページ作成・プログラミング ホームページ作成について。「ワードプレスではありません」。 3 2023/08/13 14:44
- Windows 10 Win10のインストールメディアの作成が上手くいかない。 5 2023/01/06 00:08
- その他(ブラウザ) IE・edgeで日増しに観られるサイトが減ってくる。 1 2022/10/04 22:40
- 美術・アート トレパク疑惑をかけられにくくするには ここ最近いわゆるトレパク警察のいいがかりがが厳しくなったようで 1 2023/08/21 09:59
- Excel(エクセル) Excelでこの式の意味をおしえていただけますでしょうか、またどのように理解したらいいのでしょうか 3 2022/11/18 00:11
- 医療費 以前、盲腸で手術をしたあと 会社から高額医療なんとか?でお金が戻ってきました これはどういった仕組み 2 2022/12/01 12:47
- アプリ 某クラウドソーシングサービスの請負契約のキャンセル後に請求された遅延損害金 1 2022/04/08 00:29
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
form action="#"
-
リンク先からリンク元の、同じ...
-
掲示板のレスへの リンクの貼り方
-
ポップアップ画面にアンカーを...
-
httpdで接続が拒否される
-
ブラウザ依存?<a name="#xxx" ...
-
a:linkのスタイルのインライン指定
-
<a target="_top" href="***.ht...
-
googleサーチコンソールで、重...
-
dreamweaverCS4で、絶対パスで...
-
<a href="/">トップへ</a> こ...
-
【docomoガラケー】ページ内リ...
-
リンクの文字とリンクの文字を...
-
ページ内の画像だけを一定時間...
-
Excel VBAを使ってHTML生成をし...
-
Excelで、社外秘(閲覧のみ)と...
-
HTMLからフォルダを開きたい
-
時間ごとにリンク先を変更させたい
-
一つのリンクに複数のURLを指定
-
Webサイトから、txtファイルを...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
form action="#"
-
リンク先からリンク元の、同じ...
-
googleサーチコンソールで、重...
-
<a href="/">トップへ</a> こ...
-
ページの途中にリンクするとそ...
-
httpdで接続が拒否される
-
画面を開いたときに指定位置ま...
-
a:linkのスタイルのインライン指定
-
iframe内の特定の場所にジャン...
-
Preタグ内URLからリンクは張れ...
-
<a target="_top" href="***.ht...
-
リンクの文字とリンクの文字を...
-
ポップアップ画面にアンカーを...
-
WEBページのヘッダーフッターを...
-
マップを使ってページをリンク...
-
ページ内の画像だけを一定時間...
-
DREAMWEAVER アンカーポイント...
-
インラインフレーム内のアンカ...
-
Excel VBAを使ってHTML生成をし...
-
フラグメント識別子によるジャ...
おすすめ情報