#blognavi
木工大工の講座ではありまっせん。b(^-^;)
ココでいうテーブルとは、ホームページ(正しくはウェブサイトというのですぞ)で多用される表組のことです。あみねこ一覧のページを作るのにも、みんな使ってますよネ。
でも多用されている割りに、正しくテーブルを作ってるサイトは(個人サイトにおいて)ほとんどないみたい。そこで、みんなのWebページ作りに役立てば、との思いで、自分の持っている知識をシェアしたいとおもいます。興味があるひとは読んでください。

さて、テーブル(表組)を利用して、あみねこ一覧を作ろうとするヒトは、たぶん、最初にこんなレイアウトにすると思います。↓
ブラウザ画面のスクリーンショット
テーブルのセル(マス目)の中に写真やねこさんの名前、誕生日その他の情報がキチンと収まってます。見た目もキレイだし、何の問題もなさそうですが

実は、こういう情報の並べ方はブーー。
うらんが「ブーー」と言ったら「あ、見出し行を設定するのを忘れた!」と、下のように手直しした生徒さんがいました。↓
ブラウザ画面のスクリーンショット

なるほど、見出し行が追加されると、いかにも表らしいです。でもこれでもまだ、ブーー!なのです。ブーー!な理由は、この表は、健康なヒトが目で見て、頭で情報を捉えるように作られていること。
健常者であれば、あみねこ一覧表が、たとえ見出し行がなくても、たとえば「このネコさんの名前はアッチーで、誕生日はいつで、身長は何センチ、、」と、一列に並べられた情報をグループ化できますよね。これが”目で見て頭で情報を捉える”状態です。

でもインターネットを利用しているのは、あみねこ一覧を見たいと思う方の中には、視覚にハンディキャップを持つ方もいます。ゲンミツに言えば、うらんもその一人です。。
そのようなユーザは、音声リーダーという、ページの内容をデジタル音声で読み上げるソフトを利用しているんですよ。
うらんは以前、人様のサイト作りにそのソフトを試用していたので切実に感じるんですが、音声リーダー、読み上げソフトでページを読む、情報を取得するのって、健常者が目でナナメ読みするのと違って、スピードや内容の把握に、かなりの格差を生じます。
一言でいって、ハード(ソフトの開発)で便利になった分、ソフト(ユーザのページの作り方が不適切というデメリット)で不便だったりします。(^_^;)

まず、ページを俯瞰することができない。
音声ソフトは、ページを上から下へと、順々に読んでいくから。
それから、テーブルの内容を正しく読み取れない。
音声ソフトは、左上から右下のセルへと、やはり順々に読み上げるのです。
視認できない不便さはココにあります。

だから、音声ソフトで上記のような表を読み上げさせると、下の画像の、セルに割り振った順番通りに読んでいくので、聴いているほうは、わけわかめです。
どの情報と、どの情報が一緒なのか、わかりません。
ブラウザ画面のスクリーンショット
実際に番号通りに読んでいってみてください。


それで、音声ソフトを利用しているヒトにも、表の内容を正確に伝えるために、以下のようにセルを組み直します。
ブラウザ画面のスクリーンショット
音声ソフトになったつもりで(^_^;)セルを左から右へ、上から下へと読み上げてみてください。どうですか?これなら、各々の情報をグループ化して聞き取ることができますね。

それと、見出し行を設定してあれば、音声ソフトはセルを読み上げる前に、そのセルに対応している見出し行の文字列を読み上げることも出来るので、途中で何の情報かわからなくなることも防げるんです。
写真-代替テキスト、名前-マッチ、誕生日-いついつ、、といったように。

ブラウザ画面のスクリーンショット 万人向けに組み直したテーブル。
セルの読み上げ順を表示しています。

このように直すだけでも、かなり万人向けのテーブル(表組)が作れます。が、まだ問題は3点残っています。それはまた次回説明しまーす。


  • そうなのよね~

    http://www.interq.or.jp/blue/ae86kai/hptukurou.htm 
    ここでえらそうに言ってても、TOPページはうらんさんの『ブーーー』なのよねw
    判っちゃいるけど、如何したらいいかってね・・・・m(._.)m ゴメン
    所詮『初心者の備忘録』なので目をつぶっていただきたいけどい、無理だよね・・・(;^_^ A フキフキ

    テーブルって、ある意味鬼門だよね@初心者から中級への
    ある意味フレームより難しいね・・・
    というか、フレームって好きなんだけど、トラウマで使えないコムでした

    えらそうなこと言ってるのにその他のオプションも、かなりぶーだよね、うちのHPw
    すんましぇ~ん、内輪受けな発言m(._.)m ゴメン

    そうか~、こういう回避方法もあるんだね~ -- コムムス (2006-06-15 23:22:57)
  • また文字化けさせちゃった、m(._.)m ゴメン -- コムムス (2006-06-15 23:26:36)
  • 前にねこやまさんの所でもテーブルとか・・読んだ気が
    未だに・・・何も解らない人で御免なさい
    そうですよね・・ついつい 自己を基準というか
    そう言う視点で物を思考していることが多いから・・・
    誰にでも解るようにと言う観点に立つと・・・・
    まだまだ 私は優しくなさ過ぎです^^;
    そう言うことも考慮しないと駄目なんですね。
    理解不足は否めないけど・・・何度も読んでいたら
    解るかなあ。 
    -- ようち (2006-06-15 23:41:44)
  • こんな時間にサッカー見ながらカスタマイズしている愚か者です(=_=;)
    ブログ1周年なのですね。これからも、マイペースで続けてくださいませ。
    あみねこの集会所でうらんさんと知り合いになって、
    こちらへお邪魔するようになり、おそるおそる書き込みをして今に至っています。
    いつもうらんさんにはご親切にしていただき、こちらこそ、ありがとうございますと
    お礼を述べさせてください。

    うらんさんとパパさんが少しでも多く笑っていられますように・・・

    ヨシコさんへ。
    ダウンロード無しで出来る似顔絵ソフトを紹介してくださって、
    ありがとうございます。
    こちらに来るたびに、ためになることばかりで感謝しています。
    好奇心だけは旺盛なので、つい試したくなります(*^^)v -- ビアンコ&ロッソ (2006-06-16 02:51:44)
  • いつもながら、勉強になります。
    テーブル、、、手抜きです、私・・・(-_-;)
    時間のある時に、(あるんだけどf(^-^;
    我が家を見直さないといけませんね~。

    ↓さりげない宣伝までしてくださってる!!
    ありがとうございました~~<m(__)m> -- リョウタロー (2006-06-16 14:18:44)

  • コムムスさん→
    あいかわらずのバカッブログで、ご迷惑かけてます。リンク文字列のお尻に余計なもんがついちゃって。(;_;)
    えーと、リンク先のページは、前に教えてくださったHTMLエディタの『そうなのら~』、ちがう!(^^;)『ソーサラー』のチュートリアルのですよね、
    うらんはページをささあっと見たことは見ましたけども、細かい内容までチェックしてないんだけど、、。(^_^;)
    テーブルは確かに鬼門です。慣れてくるとわかるのですが、、みんな最後になって、おうちが完成してから、土台が欠陥住宅であることに気がつくのだ、、。
    そうなって泣きをみないためにも、最初に覚えとくことを覚えとくと、個人リフォームもラクチンなのよね。
    ようちさん→
    もう、十年ほど前から、ウェブサイトは「見る側の気持ちになって作れ」と上から言われ、下に教えてきました。(^-^;)でも、現在では、「はじめてで何も知らないユーザ」が、一般道を子供や老人を押しのけて暴走したりしないように、ある程度規制をかけたり、交通整理したりすることは、サービス側で、システムで誘導できるとおもうんですよね。
    どこのHP無料サービスでも。
    たとえば、オンラインで「規格外のドでかい」ページを作ったとしても、保存するときに「アナタの作ったページは標準の容量を超えています。○○KBを基準に作り直してください・・」とかね。
    できれば、無料サービスの登録が完了したら、まずマニュアルを読まないと先に進めない=ページ作りが出来ない、といったシステムにすればいいのになあ、とおもうのでした。
    ビアンコ&ロッソさん→
    ビアンコさんは意欲満々ですね。HTMLがわかるようになると、ブログ運営もより小回りがきいて楽しくなるとおもいます。がんばって~。
    応援メッセージありがとうございました。
    リョウタローさん→
    早速エントリーしてきました。くじ運はゲキ悪のうらんですが、あたるといいなー。
    -- うらん (2006-06-16 17:20:54)
名前:
コメント:



カテゴリ: [インターネット] - &trackback() - 2006年06月15日 17:17:35

#blognavi
最終更新:2006年06月16日 17:23