しのぶろぐ/2006年06月16日/テーブルの正しい作り方(2) - オンラインソフト＠メモリーズ

#blognavi

テーブルの正しい作り方(1)の最後で、まだ問題は３点残っていますと書きました。
テーブル（表組）としてのチューニングはまだ途中ですが、今回はここまでとし、残りの問題点を説明していきます。

問題の１点目、
この表にはキャプション（表題）がついていません。
健常者にはひと目で何の表かがわかる表も、視覚にハンディのある方にはわかりません。キャプションか概要文が設定されていれば、それを音声ソフトで読み上げることができます。

表題の付け方は、市販・オンラインソフトを問わず、HP作成ソフトには設定ダイアログに入力する欄が用意されているので、その欄に書き込めばい～～んです。

キャプション（表題）はページレイアウトの関係で付けたくない、、という場合は、サマリー（表の概要文）を設定しませう。設定したサマリーはブラウザ画面には表示されません。
サマリー設定は市販ソフトには用意されていますが、オンラインソフトはそのソフトの仕様によります。下の画面は、うらんが以前使わせてもらっていたHTMLエディタ、TTT Editorの属性補完機能を利用して、リストからsummary属性を選択しているところ。

問題の２点目。
リンクの表示位置です。
前回作った表は、リンクを張ったイメージが一列目にきていますね。

画像の周りに見える紫色の枠線はリンクカラーです。

あみねこの一覧だから、まず画像を先に見てもらいたい、、との思いが、画像を一列目に持ってきた理由なんだけど、、健常者がリンクをクリックする時は、そのリンクに関する情報を先に確認してから、ですよね。
でも音声ソフトでは左のセルから順次読み上げていくので、リンクが先で説明が後というのは、人間の意志決定順路に反するコース取りをしてるワケです。

そこで、写真の列は表の最後尾に移動させます。ついでに見出しのラベル「写真」は「リンク」に変更。

これで、あみねこの名前→誕生日→使用糸と針→身長という情報を読み上げたあとにリンクが来るので、リンク先のページを見る（読み上げる）かどうか決めることができます。

そして問題の３点目。
画像に代替テキストが設定されていません。
Webページ内の、テキスト以外の要素にはすべからく代替テキストを設定しましょう、といわれています。これはやはりインターネットを利用する万人への配慮です。
テキスト以外の要素だから、画像や、プラグインを要求するFlashコンテンツもそうですね。
MIDIの再生も同じです。利用できないヒトがいるにしても、そこに何があるのかを、テキストで示しておくのが親切。

それが代替テキストといわれるものです。
画像の代替テキストは諸事情でWebページ上の各種画像を見れない、又はわざと見えないようにブラウザを設定している利用者のために、その画像が何なのか、たとえば、写真なのかイラストなのかアニメーションなのか、を文字（テキスト）でフォローするものです。

画像表示が無効になっているブラウザの画面。 画像に代替テキストが設定されていないので、枠内は真っ白け。

画像が表示されなくても代替テキストが設定してあれば

上の画像のように、代替テキストとタイトルが表示されます。

代替テキストはわかったけど、タイトルとは？
代替テキストが、その画像の種類（写真なのかイラストなのかアニメーションなのか）を示す文字列なら、タイトルはその代替テキストの内容を補足するもの。

代替テキストとタイトル両方を設定した場合はタイトルに設定した情報が表示されます。 IEとFirofoxなど、表示されるブラウザは限られます。

代替テキストやタイトルの設定も、キャプション（表題）と同じく、たいていのソフトには設定欄が設けられています。下の画面はTTT Editorのイメージ設定ダイアログ。

これで３つあった問題点はクリアできました。でも、この表をインターネットに公開するとしたら、もうひとつ、修正しなきゃいけないところがあるのです。
それはまた次回でございます～。

• ＡＬＴオプションですよね？代替テキストって？
  テーブルって言うより、画像やクリッカでも表示させるのは基本のように思っています
  先日の師匠ではなく、ＨＴＭＬの手引きをＤＬして使っていた
  ｎｏＲｉさんの『ＨＴＭＬ入門』にも、そう書いてあったような
  ＠ＶＡＩＯに落としたんですが、今は使ってないので・・・
  実は、クリッカブルマップにも、ＡＬＴオプション使えたのには驚きでしたｗ
  
  って、また暴走突っ走り状態ｗ
  
  前回のかきこは、うちの大元ＨＰのＩＮＤＥＸの話でした・・・
  やっちゃダメだと判っているのに、テーブルで位置決めしちゃったんです・・・
  http://www.interq.or.jp/blue/ae86kai/　
  ここの事です・・・↑
  おまけに、その頃はＡＬＴをわざと消してました、ｍ（.＿.）ｍ ゴメン
  
  それから、ソーサラーのチュートリアルですが
  一応、別ソフトでも流用可能なようにｎｏＲＩさんの『ＨＴＭＬ入門』がベースです
  初心者だったおらが判り辛い所や、表現的なところだけ変えています
  
  Ｓｕｍｍａｒｙタグは、知らなかった！
  ソーサラーに無かったら、定義タグで追加しとこ！＠。。。φ（◎◎へ）フムフム
  さっすがＷＥＢ講師ｗ( ｖ＾－ﾟ)Ｔｈａｎｋｓ♪　 -- コムムス (2006-06-16 19:45:17)
• ALTプロパティですね。(^-^)
  ALT属性だから。
  うん、クリッカブルマップでもALT属性をつけとかないと、Lynxとかで見てるひとは困っちゃうんだよね。
  ソーサラーの作者さんに「一行空け」ボタンで<P>タグを生成するのは止めてくだされって要望出そうかなあ。(^_^;)
  コムムスさんのチュートリアルはとっつきやすくて、ええですよ。
  -- うらん (2006-06-17 12:10:53)
• 
  追伸追伸、コムムスさん→
  今んとこ説明してるテーブル（表組）はデータテーブルが対象なんですけど、コムムスさんの古夢想のガレージ　古夢想の世界へ、ようこそ！！のページ（さっき見てきました）はレイアウトテーブルの話でそ？
  確かにこういうリニアなレイアウトなら標準レイアウトにリフォームできると思うけど、ブログのような2段3段コラムのページを作ろうとすると、まだまだレイアウトテーブルが使われてますよん、、実際、あいぼりーサイトも諸事情でテーブルでレイアウトしましたもん。↓
  
  但し、一つのテーブルのみでセルを結合したり分割したり、といった手法ではなくて、複数のテーブルを読み上げ順に配慮して並べてます。
  けっこう大変でした、、。(^_^;)
  あいぼりーの場合は管理者がPC初心者だったことと、たとえフルCSSでページを作ったとしても、それを正確にレンダリングしてくれるソフトがないことがテーブルでレイアウトした理由ですネ。
  -- うらん (2006-06-17 15:54:59)
• むちゅかしい・・・何度か読めば理解出来るかなあ
  でも　画像にマウスをあてたら　説明文が表示って言うのは
  他の所でもみたことが有るので・・・
  もう一度良く読んでみようっと・・・。 -- ようち (2006-06-18 00:39:52)
• ようちさん→
  わからないこと、言葉があったら、聞いてください。
  レイアウトテーブルというのは、前に書いた画像をタテヨコ適当に切って（スライス）してね、それをテーブルのマス目にひとつひとつ、はめ込んでく手法なの。
  データテーブルというのは、本来の「表」をつくるための手法。
  ALTプロパティ、プロパティていうのは、HTMLで使われる用語のひとつです。
  -- うらん (2006-06-19 12:16:34)
• ようちさん→
  うらんが借りているSeesaaブログにはアップする画像に代替テキスト（ALT属性）を付ける入力欄がありましたヨ。
  Seesaaではアップする画像を参照ボタンから選択した後に、となりの「その他の入力項目」というボタンを押すと、代替テキストを書き込む欄が表示されるんです。&br
  たぶん、ヤプログにも、気づかないだけで、参照ボタンの近所にあるんじゃないでしょうか。
  -- うらん (2006-06-19 14:59:38)

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

#blognavi