バリアフリーなサイトで、フレームのような効果を出す

HTMLを、少し読み書きできる程度の者です。

このたび、とある福祉団体のために、既存のサイト体裁をもう少し整えようという事になったのですが、左にメニュー、右にコンテンツというおなじみのかたちにしたいと思っています。
しかし、フレームを使うと色々と問題があると聞きます。CSSでもフレームと同じような効果を作れると聞いた事がありますが、根本の体裁をCSSに頼ったら、環境によっては表示がめちゃくちゃになってしまうのでは…？と心配です。
福祉団体なので、できるだけバリアフリーな仕様にしたいのです。

調べてみましたのですが、情報が錯綜してよくわかりません。
ご意見お聞かせいただければ幸いです。
また、モデルサンプルのようなものがありましたら教えてください。

No.1 回答者： taloo 回答日時： 2011/04/18 13:59

>根本の体裁をCSSに頼ったら、環境によっては表示がめちゃくちゃになってしまうのでは…？と心配です。

そうならないための対策として、CSSハックというものがあります。
非常に複雑になりますが、見やすさを追求すれば制作者が苦労するのは当然です。

苦労するのが嫌なら、
デザインをあきらめて、環境依存の少ないスタイルだけを使用する、
または、IE6は切り捨て、とか、音声ブラウザではアクセスしないで下さい、
などとすればいいです。


もうちょっと簡単な方法で、
IE6専用ページはこちら、音声ブラウザはこちら、と、ブラウザごとに表示ページを振り分ければいいです。

この回答へのお礼

ありがとうございます。

基本的にはCSSを使用する方向性が良いのでしょうね。
デザイン性はあまり追及しません。バリアフリーというのが何を目指すのか具体的に質問文に書かずすみませんでしたが、弱視の方にも見やすく、どのブラウザでも読めて読み上げ対応が好ましいです。

手がかけられるなら振り分け案も良いですね。

お礼日時：2011/04/19 11:57

No.2 回答者： abacabu 回答日時： 2011/04/19 01:15

趣味でWEBサイトを制作しているものです。

恐らく段組みレイアウトの事だと思いますので、参考サイトを乗せときます。
CSSは慣れるまでちょっと難しいです。特に段組みと、プルダウンメニュー（JavaScriptちょっと有り）は。
プルダウンに至っては偶然の産物というのが結構参考サイトには有ったりします…。
ともかく根気よくいじって、要素とか属性とかの事を理解しながら作って行けばちゃんと出来あがります。
CSSは基本的に階層構造（レイヤ：ボックス要素に関して）で捉えるのでそこらへんの感覚をつかめれば結構普通に使えます。
大きな箱<table>に小さな箱<tr>にさらに小さな箱<td>…みたいな感じです。
そしてそのどの箱で指示を出せば自分の思った形を実際に処理できるかが結構最初は躓いたりします。
最初は参考サイトさんでそのままコピーして来てそれが動けばちょこちょこいじって覚えた方が早いと思います。
一応参考サイト貼っときます。
それでは頑張って下さい。

参考URL：http://desperadoes.biz/style/dan/

この回答へのお礼

ありがとうございます。

基本的にはCSSを使用する方向性が良いのでしょうね。

しかしボランティアベースの団体で、しかも精神に病気のある人や60代くらいの人がが関わりやすい性質のところなので、あまり複雑にすると他のスタッフが更新できなくなっちゃうので考えどころです。

デザイン性はあまり追及しません。バリアフリーというのが何を目指すのか具体的に質問文に書かずすみませんでしたが、見やすく、どのブラウザでも読めて読み上げ対応が好ましいです。

お礼日時：2011/04/19 12:00

No.3 回答者： DrFell 回答日時： 2011/04/19 07:56

>根本の体裁をCSSに頼ったら、環境によっては表示がめちゃくちゃになってしまうのでは…？と心配です

cssに頼らず何に頼るのでしょうか？
文章構造はhtmlで表示の仕方はcssで行う事が、バリアフリーなページになります。人によりバリア（障壁）はさまざまですが、web標準に準拠することである程度の利用が可能になります。情報が錯綜していたのは、バリアが人により違うから、誰かに合わせると、誰かには合わなくなったのではないでしょうか？見た目だけを考えるとそうなりますが、文章構造を正しく伝えることを考えると、可能です。

たとえ、画面の上でデザインが崩れても、部分としては見えるように作成すれば、その情報を求めてやってきた人に「情報」は伝わります。例えば、右にあるはずの本文が下に落っこちてしまっていても利用はできますが、右の文字と左の文字がかさなってしまったら、読めなくなります。それでも、正しくhtmlを書いていればｃｓｓを外して、素のｈｔｍｌにしたら、情報は伝わります。

バリアフリーをもっと真剣に考えてください。uekidoさんの考えておられるのは、バリアフリーをだしにした、自分好みのサイトの作り方のような気がします。バリアフリーはもっと根本的な作り方の問題です。

ご参考にしていただけるとありがたいのです。

ユニバーサル・ウェブ誰もが使いやすい，標準準拠のウェブを簡単に構築する方法http://www.comm.twcu.ac.jp/~nabe/lec/UAI/

私のウェブの使い方（弱視の方です）
http://cocktailz.jp/column/viewpoint/usingweb.html

動画で学ぶWebアクセシビリティ Open Accessibility Library Project
（シニア・高齢者 /外国人 /肢体不自由 /視覚障害の方にインタビューしながら使い方を見せてもらう動画です ）
http://oalp.org/video/

バリアフリー大変でしょうけど、がんばってください。

この回答へのお礼

ありがとうございます。

バリアフリーというのが何を目指すのか具体的に質問文に書かずすみませんでしたが、見やすく、どのブラウザでも読めて読み上げ対応が好ましいという事です。デザイン性はあまり追及しません。

HTML構造をしっかりして、CSSで体裁を補助的に整える、という方向性で考えてはおりました。
ただ、ボランティアベースの団体で、しかも精神に病気のある人や60代くらいの人がが関わりやすい性質のところなので、あまり複雑にすると他のスタッフが更新できなくなっちゃうので考えどころです。つくり手側のバリアフリー・・・。無理ですかね・・・。

基本的にはCSSを使用する方向性が一番機能的なのかなと思うようになりました。
数多くの情報ありがとうございます。参考になります。
バリアフリーをダシに自分好み？というのがよくわからないのですが、自己満足だけにならないよう気をつけますね。

お礼日時：2011/04/19 12:11

No.4 ベストアンサー 回答者： DrFell 回答日時： 2011/04/19 20:21

#3です。

>弱視の方にも見やすく、どのブラウザでも読めて読み上げ対応が好ましいです。
これが、どのブラウザでも、同じように見えるという意味なら、不可能です。が、文字が読めるという意味では、簡単です。読み上げ対応は普通に作っていたらできますが、見た目をhtmlで制御しようとすると、理解しにくいサイトになるでしょう。読み上げソフトや、音声ブラウザを視野にいれるなら、アクセスキーなども入れると、よいでしょう。

例えば、フレームのようなデザインを弱視の方に強要するのは無理です。2つ目に紹介したリンク先では、弱視の方のホームページ利用方法が写真で紹介されていますが、1行10文字あるかないかの画面に顔をつけるようにして読まれます。これにフレームが居座っていたら、読みやすいでしょうか？段組とバリアフリーなホームページは関係ないと思います。

>精神に病気のある人や60代くらいの人がが関わりやすい性質のところなので、あまり複雑にすると他のスタッフが更新……
構造とデザインの分離がしっかりできていれば、ｃｓｓは複雑になっても、htmlは簡単に更新できます。精神に病気のある方も広いのでどのような方を指すかわかりませんが、てんかん患者なら、色や形が発作を誘発しますし、識字障害（発達障害の1つです）のある方なら、晴眼者であっても、読み上げソフト愛用者も大勢おられます等、配慮は必要不可欠です。また、人生の達人は弱視者ほどでないにしろ、大きな文字を好みます。cssで段組するなら、positionを使わない方法をお勧めします。positionは文字の大きさを変更すると簡単に文字が重なり読めなくなります。

何らかのハンディキャップのある方の使いにくいは、健常者の使いにくいの延長線上にあることが多いです。みんなに使いやすいサイトづくり、がんばってください。

この回答へのお礼

ありがとうございます。

有意義なアドバイスをいただきありがとうございます。

フレーム様のデザインは使いやすいと思い込んでたんですが、違うんですね・・・。他の方からも指摘いただき、良い気づきとなりました。

色々な障害を想定して、ひとつひとつ試みてみたいと思います。

お礼日時：2011/04/21 10:51

No.5 回答者： ORUKA1951 回答日時： 2011/04/20 08:23

＞左にメニュー、右にコンテンツというおなじみのかたちにしたいと思っています。

　見出し、目次を固定してそれをクリックすると内容が右に表示されるのは、確かに【スクリーン端末】でかつ【マウスをポインティングデバイスに使える人】には使いやすいものです。★【】の条件に適合する人だけということを忘れない。
　しかし、ＨＴＭＬの利用者はそのような人ばかりではありません。


【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Webページのプレゼンテーションを向上させようという志は素晴らしいものではあったが、そのためのテクニックには思わぬ副産物があった。
・・・【中略】・・・
　こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

（上記記事の前後を含めてよく読んでおくこと）

　私も同様なサイトを運用していますが、基本はＨＴＭＬで文書構造に従ってマークアップし、端末によってスタイルシートを使い分けています。スクリーン(いわゆるパソコンのディスプレイ)、ＰＤＡなど簡易端末、点字端末、読み上げソフト、そして印刷用のスタイルシート、そして色覚弱者のための代替スタイルシートも用意するようにしています。

　最近は、ＸＭＬ記述してＸＳＬＴでHTMLに書き換えてCSSを適用という手法もとることがあります。

例＞そのサイトで使用する要素を選択して「わかりやすいもの」にしておく

<?xml version="1.0" encoding="UTF-8"?>
<DOC>
<TITLE>Title Here</TITLE>
<AUTHOR>
<FIRSTNAME>Firstname</FIRSTNAME>
<LASTNAME>Lastname</LASTNAME>
</AUTHOR>
<章>
<見出し></見出し>
<段落>
　・・・・・・<画像 type="GIF" SIZE="240*３６０"/>・・・・
</段落>
</章>
</DOC>

これだと、誰でも書ける。必要なら追加すればよい。

この回答へのお礼

ありがとうございます。

まだきちんとご紹介のリンクを読んでいないのですが、とり急ぎお礼まで。

有意義なアドバイスをいただきありがとうございます。
例もあげてくださり大変参考になります。

お礼日時：2011/04/21 10:44

No.6 回答者： taloo 回答日時： 2011/04/20 15:20

調べればこれくらいのサンプルは出てくると思いますが。

----------------
<div>
<ul>
<li><a>「項目１」について</a></li>
<li><a>「項目２」について</a></li>
</ul>
</div>
<div>
<h2>項目１</h2>
<p>あいうえおあいうえお</p>
</div>

--------------
<div>
<h2>項目１</h2>
<p>あいうえおあいうえお</p>
</div>
<div>
<ul>
<li><a>「項目１」について</a></li>
<li><a>「項目２」について</a></li>
</ul>
</div>


--------------
上記２つは、<ul>の順番を変えただけですので、文法はどちらでも１００点が取れるでしょう。

ですが、これだけでユーザビリティー、アクセシビリティーは全く違う物になります。

グラフィカルブラウザにおけるアクセシビリティーと、テキストブラウザ、音声ブラウザにおけるアクセシビリティーを考慮するなら、
場合によっては、グラフィカルブラウザでは前者が優れている、音声ブラウザでは後者が優れている、
という状態も、たくさん出てきます。


そういう場合、スタイルシートが使えない音声ブラウザ用に作っておいて、
スタイルシートでグラフィカルブラウザでのアクセシビリティー（表示位置によるもの）に対応すれば、
おおくの場合、どちらにも対応できるページになります。


スタイルシートで振り分けるのであれば、スタイルシート対応ブラウザの個々の問題が出てきます。
Netscapeや、IE6以前、最新のブラウザ、携帯電話、最近ではスマートフォンも出てきましたし、
10インチ程度の小さな画面、24インチ以上の大きな画面、
そういうさまざまな環境に合わせるために、CSSハックが使われます。

・最新のブラウザでのデザインを優先し、CSSハックでさまざまなブラウザに対応するか。
・デザインをあきらめて、CSSも最低限にとどめるか。
そういうCSSハックで苦労したくないなら、HTMLを分けるのも一考だということです。
（私はページ振り分けをお奨めしますが）


ブラウザごとにアクセス先を振り分けるのではなく、
音声ブラウザがフレーム未対応なのを利用して、<noframes>でブラウザを振り分けるという方法もあります。
この方法は、「全てのページに同じメニューが出てくるという問題」に対して、
・音声ブラウザでは同じメニューを何度も読み上げなくて済む、
・グラフィカルブラウザでは、常にメニューが表示されていて、マウス操作でページ移動がすぐに出来る
という、どちらにも対応したページを１つのページ（フレームセットなので実質３ページですが）で作ることが出来るようになります。


方法を知っているから、技術があるから使わなければならないというわけではありません。
無駄なギミックは邪魔になることがあります。
フレームを使う方が良いか、使わない方が良いかは、その時々で異なります。


サンプルになるようなページを探してみましたが、、、
http://www.sugai-clinic.or.jp/jpt/jpt.htm
http://www.city.hirakata.osaka.jp/freepage/gyous …
１つのページに大量につめこむと頭に残りませんから、このくらいのページサイズが（私にとっては）ちょうどいいですね。


ちなみに私はこちらの音声ブラウザを使わせて頂いています。
ALTAIR for Windows
http://www.normanet.ne.jp/~altair/index.html

音声ブラウザでの動作チェックをするなら、ちゃんと目を閉じるか目隠しをした方が良いですよ。
目が見える状態での音声ブラウザと、目が見えない状態での音声ブラウザは、その操作性が全く違います。


ご参考まで。

この回答へのお礼

ありがとうございます。

まだきちんとご紹介のリンクを読んでいないのですが、とり急ぎお礼まで。
有意義なアドバイスをいただきありがとうございます。
私にもすぐに実践できそうな事が多く大変ためになりました。

お礼日時：2011/04/21 10:43