• ベストアンサー

ハイブリッドレイアウトでどこまでアクセシビリティに対応する?

こんにちは。 現在tableとcssでレイアウトしたwebサイトにアクセシビリティ対応をして欲しいと言われたのですが、皆さんでしたらどこまで対応しますか? メイン本文は<h>タグ等で構造化しalt指定はしてあるのですが、その他として大枠tableにsummaryをいれたり、文字指定を%にしたりするほかにどのようなことをされているのか、ぜひ聞いてみたくて。 よろしく御願いします。

  • HTML
  • 回答数5
  • ありがとう数6

質問者が選んだベストアンサー

  • ベストアンサー
  • Mee-me
  • ベストアンサー率27% (5/18)
回答No.5

普通でいいと思います。 音声ブラウザ向きには 大枠tableにsummaryをアクセスキーなどの案内にすれば、構造化されていたら問題ないと思います。summaryには、メニューは1を本文は2を……とアクセスキーの案内を入れ、メニュ側には、メニューはここから。本文には、メニューはココまでここから本文と、節目に現在地がわかるようにすれば、summaryがぐんと生きます。 健常者と同じです。何のページか、今どこにいるのか、すぐ行きたいところにいける。そういうことが、伝わるaltやsummaryとアクセスキーを入れれば親切です。 大枠以外は構造化されているのであれば、テーブルに引け目を感じなくていいです。大枠をメニュー・本文・広告の表と考えれば、何の問題もありません。 色弱・若い視力の低い人には、 テキスト色の配慮はいりません。彼らは構造化されているのなら自分で調整します(テーブルの中でも見出し強調とマークがついていれば、問題ないです)。ハイコントラストなんてWinにも最初からついています。見難ければ自分用cssを当てたり、自分に使いやすいブラウザを利用したりしています。が、図や見出しで、テキストでないものには配慮してください。イメージはうまく変換できません。 JavaScriptは切っている人は少ないです。逆に切っている人は切ることの不利を承知しています。じゃんじゃん利用し、アクセスビレィテイをあげてください。先に高齢者は大きささえ変えられないと書かれてました。でも、Jsで作られている画面に文字大きくボタンがあれば押します。 私もターゲットは誰?と思います。

tobana
質問者

お礼

回答ありがとうございます。 大体が構造化してあれば、問題もないとのこと。 安心しました。 基本ターゲットはビジネスユーザなので、特にアクセシビリティに関して気にされていなかったようですが、個人の方も見ているようで・・・。 そこで「したらどう?」という話が出てきたようです。 ターゲットをもうちょっと話し合ったほうがいいですね。

tobana
質問者

補足

すみません、この場をお借りして回答いただいた皆様にお礼申し上げます。 何とか話は進み、「できうる限りやってみる」ということになりました。 こんなに真面目に調べたのは初めてだったのですが、いい勉強になりました。 また皆さんの回答に支えられました。 本当にありがとうございました。

その他の回答 (4)

  • low-hou
  • ベストアンサー率0% (0/1)
回答No.4

あのぅ、ちょっといいですか?2番の方がまさに想像で……だと思うのですが、 「情報への渇望が強く、タコなソースへの突っ込みは厳しい」方は、IE使わないです。つまり、他のブラウザ使って、px指定していても文字の大きさはちゃんと変えてます。……意味ありますか? 「論理的に表であるべき以外の場所に表は使いません」 実際に自分でお聞きになるとわかりますよ。3段程度にテーブルレイアウトくらいなら使っていても、考慮されていれば、全然聞きづらくないです。論理構造に厳密になってますアクセスビリティにおいては自己満足ですよ。 こんなのするより、自分で聞いてみて聞きやすいように句読点打つとか、文中リンクしすぎないとか、した方がよっぽどいいです。 「弱視や色盲でも読める、強調がわかる、ような色の組み合わせを基調にします。」 あーー。これやって、健常者の常連さんから、苦情が来ました。目に突き刺さるから、もう少し、コントラストを下げてくれって。健常者の方が圧倒的に多いし、その人たちに逃げられたら困るのやめました。これは、私にセンスがないだけかも知れません。私には別ページなんて熱意ありません。

tobana
質問者

お礼

回答ありがとうございます。お礼が遅くなりすみません。 弱視や色盲の方でもいろいろな方がいらっしゃるし、健常者の方でもいろいろな方がいらっしゃるし、なかなか難しいですね。 まずはテキストブラウザをインストールしました。 テーブルレイアウトしたページがどのようになるか、確認したいと思います。

回答No.3

> 現在tableとcssでレイアウトしたwebサイトにアクセシビリティ対応をして欲しいと言われたのですが、 テーブルレイアウトがクライアントからの必須条件でしょうか? 音声ブラウザとテキストブラウザを一緒にするだけでも無理が生じますから、 さらにテーブルレイアウトを使うなら、基本的にテキストブラウザと音声ブラウザは除外することになりますね。 スタイルシートを使わない設定のブラウザなら、レイアウトによっては何とかなるかも知れませんが、 完全にユーザー定義スタイルシートだけで表示しているブラウザも除外ですね。 > その他として大枠tableにsummaryをいれたり、 レイアウトテーブルのsummaryは書かないか、summary=""として空白にするのが良いと思います。 それから、やたらaltを入れると、テキストブラウザや音声ブラウザで最悪なことになりますので、 alt=""と、空白にした方が良いことも多々あります。(HTML4、XHTMLの文法ではalt属性は必須なので)

tobana
質問者

お礼

回答ありがとうございます。 >テーブルレイアウトがクライアントからの必須条件でしょうか? 現在の状態がテーブルレイアウトで、金銭的にも時間的にもないので、現在のレイアウトのままで出来る限り対応してほしいと言われました。 難しいものですね・・・・。 summaryやaltは、場合によっては空白のほうがよいのですね。 勉強になります。 アクセシビリティについてあまり気にしていなかったので、1から勉強します。

回答No.2

基本中の基本だけしかやってませんが、 ・文字サイズに限らずすべてのサイズ指定を%もしくはemで行います。 ・論理的に表であるべき以外の場所に表は使いません。 ・onclickなどの物理的なイベントに依存した動作を記述しません。 ・CSSやjavascriptを切っても読めるように厳密な論理構造で構成します。 ・弱視や色盲でも読める、強調がわかる、ような色の組み合わせを基調にします。 こんな程度ですね。弱視~色盲と四肢障害者を考慮しています。老人と 違って情報への渇望が強く、タコなソースへの突っ込みは厳しいです。

tobana
質問者

お礼

回答ありがとうございます。 とくに、具体的に気をつけている部分を教えてもらえて、とてもうれしいです。 確かに高齢者の方より、障害をもった方(多分お若い方)のほうが情報を必要としていますよね。 もっと配慮していかねば!と痛感しました。

  • DrHickey
  • ベストアンサー率25% (2/8)
回答No.1

アクセシビリティの範囲を絞ることが重要だと思います。対象者、ターゲットは誰ですか?場合によっては、別ページを必要とすることが多いです。 私自身はターゲットの以外の対応は何もしていません。 はじめはしていたのですが、例えば高齢者でも大きな文字に、好きな大きさにできると効聞いて文字の大きさを%でしていたのですが、当の高齢者はそういうもので調節できることを知らない事に気づきました。当人を前にしないと想像で対応していたことはほとんど無駄だったので、もうやめました。 ですので、大くくりのアクセシビリティではなく、指先が器用でない人がターゲットのときは大きなボタンで等、具体的な人を想定します。それと、テーブルをハイブリットだから、アクセシビリティが悪いとかweb標準完全準拠だから良いというわけでもなさそうです。人として対象者のことを考えれば、した方がいいことが見えてくると思います。 私がやっているのは万人向けをあきらめることです。みんなに大満足はありえません。みんなに、可もなく不可もなくになり、結局は魅力がなくなると考えたからです。ですので、対立する場合は同じ内容のページを2種類作っています。 それと、耳で閲覧するひとが対象の場合は目を閉じて自分の耳で確認することです。実際に彼らはかなり早送りで聞くようですが、私自身はゆっくりのスピードで聞いてみます。 役に立たないかもしれませんが、調査報告書のURLをおおしえしますね http://www.nise.go.jp/research/kogaku/twatanab/PCUserSurvey/PCUserSurveyJp.html http://japan.cnet.com/blog/webclip/2007/12/26/entry_25003404/

tobana
質問者

お礼

回答、ありがとうございます! 誰にも相談できず、もんもんと悩んでいました・・・。 確かに高齢者の方は、文字を大きくする方法をご存じな方は少ないと思います。 ターゲットを絞る、そこからもう一度考えようと思います。 そして調査報告のURLもありがとうございます。 これからじっくり読んでみます。

関連するQ&A

  • レイアウトに使ったtableタグのsummary属性は?

    TABLEタグを本来の表として使わず、レイアウトとして使っています。 この場合のsummary属性はなんと指定すればいいのでしょうか? 空白でもいいのでしょうか?

    • ベストアンサー
    • HTML
  • CSSレイアウトってなぜこんなに難しいのか?

    個人事業で、WEBデザインの仕事をしています。 恥ずかしいですが、ずーっと、テーブルレイアウトでのみHP作成してきました。 文字を整えたり、種類をまとめたりだけ、CSSを使ってました。 先日初めて、クライアントから「そろそろテーブルレイアウトはやめてくれ」と、 ダメだしを食らいました。 独学でDreamweaver MX 2004を一から学んで、仕事やって来ましたが、 ちょっと恥ずかしい質問ですが、 CSSレイアウトってなぜ、こんなに難しいのでしょうか?? みなさん、テーブルレイアウトと比べて異常に難しく感じませんか? 今の調子ではHP作成の仕事が請けられなくなっています。(涙) 例えば、テーブルレイアウトって、自由にドキュメントで確認しながらデザインできますよね。 でも、CSSレイアウトって、コードで全部書き出しますので、 ちょっとサイズや項目や要素を変更するだけでも、どのdiv?、どのクラス?のタグにそれを指定したかとか、 複雑になり解らなくなってしまい、ちょっと変更するだけでも凄い時間がかかってしまいます。 ■もしかして私、CSSレイアウトの学び方、作り方を間違ってるのでしょうか? ■今まで2~3冊位、Dreamweaverの本で、CSSレイアウトを勉強してますが、  いっこうに進歩しません。(ここに本の題名書き出すとマズイですよね?) ★CSSレイアウトが解り易く学べる、勉強本を教えて頂けますでしょうか。 ■もしかして、DreamweaverでCSSレイアウトをするから難しいのでしょうか?  HPビルダーとかなら、もっと簡単に出来るのでしょうか? ■今、私ができるCSSレイアウトの限界は、一番大まかな囲いの、 #header #side #main #footerを、#contentの中に入れて、 その中の各々の要素は、今までとおり、テーブルでレイアウトする。 (メニューや、商品スペック、写真並べなども、テーブルで。) それが精一杯ですが、これで通用するのでしょうか? HPデザイナーとして、恥ずかしい質問ですが、 ご教授どうぞ宜しくお願い致します。

  • htmlのtableレイアウトについて

    こんばんは。訳あってcssとテーブルの両方のレイアウト手法を用いた サイト作りをしています。準初心者です。 昔から受け継がれてきたサークルのサイトの更新担当をしているのですが、 テーブルレイアウトとcssレイアウトがごちゃまぜで、わけの分からないスペーサーgifなど も多用されていたりと、悲惨な有様なので、必死に修復しているところです。 テーブルレイアウトとで組まれていても、今回は抜本的な対策は留保するつもりで書いていた のですが、ある問題に突き当たりました。 divタグ内のtableタグによって作られた1×1の表ボックスが更新情報欄になっていて、 ページの左端に隙間無くくっついているようなレイアウトにしようと試みました。 <TABLE style=" border:0px;padding:0px;margin:0px;・・とするとdivのブロック要素と テーブルが完全にくっついた状態にできると思い実践してみたのですが、どうしても何pxかの隙間が生じてしまうのです。試行錯誤の末、もとのソースコードではtable要素にhtmlでwidth="400" と指定されていたものをtableタグ内に <TABLE style=" border:0px;padding:0px;margin:0px;  width:400px;> と指定し直した結果、計らずしもこの隙間は無くなりました。 そこで疑問なのですが、なぜこのような結果になったのでしょうか、ご教授ください!

    • 締切済み
    • CSS
  • tableによるレイアウトorCSSによるレイアウト

    現在HPをリニューアルしようとしております。 現状はホームページビルダーでテーブルを多用してレイアウトしておりました。 洋服関係のネットショップなのでかなり見た目ごちゃごちゃした感じで作っています。 また、「生きているサイト」を意識して頻繁に少々のレイアウトや内容の更新をしております。 *商品はコンスタントに更新してます。 このたび、dreamweaverでhtml+CSSでブロック要素のまわり込みでレイアウトして作りかけています。 がしかし、参考に他のサイトのソースを多数見ていくとレイアウト自体はテーブル(html)で行っているサイトが多く現在、レイアウト自体をテーブル( html)orCSSでコントロールする方法が良いか迷っております。 html+CSSでブロックコントロールしていく方法を多方面推奨しているようなのですがブラウザやブラウザバージョンにより崩れたり・・・とういう事は理解できております。 そこでお教え頂きたいのですが・・・ ●今後CSSがスタンダードになるとは思いますが現状、web製作の現場ではTABLEによるレイアウトとCSSによるレイアウトどちらがスタンダードでしょうか? ●また、CSSの場合、<div>のまわり込みでレイアウトを決めて<div>内のレイアウトはどのようにすればフレキシブルに内容や画像を取り扱えるでしょうか? ●その他、お気づきの点があればご意見ヨロシクお願い致します。

    • ベストアンサー
    • HTML
  • レイアウトはテーブルよりCSSですか?

    今まで、Webサイトのレイアウトは、テーブルを何重にも入れ子にして、行ってきました。 最近、「レイアウトにテーブルを使うのはよくない」「テーブルで全体を囲っているレイアウトはダサい」などの意見を聞くようになってきました。 奮起して、テーブルでつくったページをCSSに書き換えようと思いましたが、なかなか困難です。 位置を左上基点に、それぞれの<div>をabsoluteで設定すれば、比較的容易にレイアウトを組めるのですが、やはり全体を画面の中心に持っていきたい、そうなると、全体をテーブルで囲って、align="center"が簡単です。 そこで、質問です。 ・CSSでレイアウトを組むとき、左上を基点にされていますか?全体を中央に配置するようにされていますか? ・CSSで、全体を中央に配置するとき、全体を<div>で囲って、その中に<div>を入れ子にして、配置していくと思いますが、なかなか思い通りの配置になりません。このやり方であっていますか?簡単なやり方がありますか? ・やはり、レイアウトにはテーブルよりも、CSSを使ったほうがいいですか? ご意見・ご回答いただきたく、どうぞよろしくお願いします。

    • ベストアンサー
    • CSS
  • ホームページビルダーV9でのCSS対応

    ホームページの制作を請け負うことになりました。 私自身はタグを直接編集して作成しています。 普段はHTMLとCSSを組み合わせて、レイアウトにはテーブルを使わずに制作しています。 今回のクライアントは、サイトオープン後の更新をホームページビルダーV9を使って自分で作業したいと要望しています。 そこで、ホームページビルダーのサイトを確認したところ、「CSS Level1をサポート(一部を除く)/ CSS Level2をサポート(一部)」と書いてありました。 テーブルレイアウトをせずに、構造はHTML、属性はCSSという作り方をした時に、ホームページビルダー上で適切に表示されるかどうかが心配です。 体験版で試してみようと思いましたが、Mac対応していないようなのであきらめました。 ホームページビルダーで対応している/していないCSSについてご存知の方、どうぞよろしくお願いします。

  • テーブルのレイアウトがうまくいきません

    DreamweaverMXで簡単なホームページを作っています。 テーブルをつかってレイアウトをしようと思いましたが、思うようになりません。やり方が間違っているのでしょうか? まず大枠で1行3列のテーブルを作り、幅だけ800pに指定。(高さ指定はしていません) 両端の列はそれぞれ幅だけ180pに指定。 で、そのそれぞれの列の中にまた必要なテーブルを作ってレイアウトしようとしてるのですが 一番左の列の中にテーブルが3つ入っていて一番縦長になっています。真ん中と右の列にも必要なテーブルや画像を入れているのですが左の列が長いせいかそれぞれの列の一番上がそろいません。左の列の長さに合わせて一番大外のテーブルの高さが決まってしまってしまいますが、真ん中と右の列の中のテーブルたちは左の列の高さの真ん中に配置されてしまいます。 方法がまずいのでこうなってるのだとは思いますが、本を見ながら勉強しつつやっていますが思うようにいかないので質問させてもらいました。 一番上をツライチに合わせるにはどうすればいいのでしょうか? というか上記の方法の悪いところを指摘していただければと思います。よろしくお願いいたします。

  • MTでのレイアウト崩れを直したい

    Movable Type 3.34でVicuna flatスキンを使用しています。 新規エントリーを書き込む際に文字を目立たせたいと思い、 <h1>や<h2>のタグを使ったら突然レイアウトが崩れました。 <h>タグと書き込んだエントリーを削除して cssやエントリーアーカイブの内容を アップロードしなおしたのですが元に戻りません。 ブログを削除して1から入れなおすしかないのでしょうか。

  • ネットショップのレイアウトについて

    Web勉強中のものです。 楽天やyahooショッピングのネットショップを見ていて気になったのですが、tableレイアウトのサイトばかりで、CSSレイアウトのサイトを見かけません。何か理由などあるのでしょうか?

  • ホームページビルダーでcssレイアウトは可能ですか?

    Web制作初心者です。 Htmlのtableでトップページ全体をレイアウトすると、読み込みが遅くなるそうですが、ホームページビルダー9を使っているため、レイアウトを作るのは簡単にすみ、いままでtableで作成してきました。 今度、新たにサイトを作るのですが、cssでレイアウトを作りたいと思います。そこで、ホームページビルダー9はcssでtableのようなレイアウトを作ることは可能なのでしょうか? tableの場合は、「表の挿入」を選んで、「行の追加」や「列の追加」、「選択セルの結合」とかでどんどん表を作っていって、セルに画像追加や文字を書いていました。 こういうのはcssでは(ホームページビルダー上では)どのようにするのでしょうか? あと、tableを作って、その下にもtableを追加していくと、ページをプレビューした場合、下のほうに行くにつれてそれぞれの表がズレていきます。cssではズレないようにできるのでしょうか?

専門家に質問してみよう