#blognavi
すでに一般的なブログのページテンプレートはテーブルレイアウトではなく、積み上げたブロック要素をスタイルシートでレイアウト(配置)しているモノがほとんどなのだけれど、ここ@wikiではテーブルレイアウトなのです。(おまけにsummary属性をスペルミスまでしてる、、)
ページを直編集できれば直せるんだけど不可なので、仕方なくスキン一覧の中から記事本文のセルが左側にあるスキンを選んだのですよ。。

前に「テーブルセルは左上から順に音声ソフトでは読み上げられる」と書きましたよね、だからサイドバーのセルが左側にあるスキンを選んじゃうと、情報の優先順位が後先になってしまって困るわけ。

下の画像は、このブログでのブロック読み上げ順を表示したものです。
スクリーンショット
しのぶろぐではエントリー(記事本文)までのアクセス順位は7番目です。サイドバーは本文の読み上げが終わった後になるので、たとえばカレンダーは(自作スクリプトなので読み上げられないけど)77番目。
だからこの読み上げ順が逆になるような、また、記事本文のブロックの上に別のブロックを上乗せするようなレイアウトを選んだり変更を加えたりすると、困るヒトたちが世の中にはいます。

こういった、音声ソフトユーザをも視野に含めた万人向けのページを作るための指標がアクセシビリティと呼ばれています。Webページのバリアフリー、ユニバーサルデザインと考えてもらえればOKです。
実はこのコンセプトが発表されたのは、もう8年も前の話なんです。当時のHTMLのコンセプトに含まれていたし、当時から啓蒙活動しているサイトも存在したし、2年前にはJIS標準規格にもなっているんだけど、、いまだに知らないひとは多いですよね。

おととしの秋から去年の春まで、うらんは人様のサイトや会社のサイトを、このアクセシビリティ評価でレベルA+に上げるために四苦八苦してました。
何度ダメ出しされたことか~。
実際に音声ソフトも使って、ユーザの苦労も実感しました。

今この記事を読んでいるみんなに、アクセシビリティの1から10までを実行しなきゃダメよんなんて言いませんが、できることからコツコツと、あれ、誰かのセリフだな、、目の大きい、議員さんやってた(笑)。

この数日間よそのブログもいくつか見て回ったけれど、うらんが読めない(見えない(*_*;)ページ(の一部)もありました。シアンの背景色に黄色のリンクとか、全滅。
ねこやまさんのだらだらあみぐるみ猫集会所の投稿も、文字色にピンクを選んでいるカキコミは、うらんはほとんど、見えません。
カキコミをドラッグして反転表示させて、やっと読んでます。(^_^;)

だからページの文字色と背景色のバランスは大切です。下のエントリーのコメントで、コムムスさんが「文字色#999999じゃ薄いよね」って言われてたけど、そういうチェックをしてくれるツールがあるから、利用されるとよいですよ。フリーソフトです。
富士通のColor Selectorは、ページに設定した文字色と背景色が適切か、そのコンビが視覚にハンディのあるヒトたちにも読めるのかを判定してくれます。

下の画像はColor Selectorでの判定結果。文字色#999999(薄いグレイ)背景色#ffffff(白)の判定は、健常者と色覚特性のある方はOK、しかし白内障の方はNG、という結果です。
スクリーンショット

万人向けにするためには文字色にはもう少し濃い色を選ばなきゃだめなんだな、ということがわかります。下の画像はColor Selectorの画面ですが、
スクリーンショット 画面下部のパレットはWebセーフカラーになってます。

Webセーフカラーもすでに広く普及しましたが、ご存知ない方のために。
画面に表現される色はブラウザの種類と、モニタで表現できるスペックによって微妙に違います。その差がない、共通して表示される色がセーフカラーです。

いまやフルカラー環境がほとんどだと思いますが、世の中には256色しか表示できないモニタを利用しているヒトも(まだ)います。ページで使うバナーやアイコンやイラスト画像などまでセーフカラーで作れっていうのはデザイン的にも「酷」な話だし、現実的ではないとおもうけれど、文字色くらいはセーフカラーから選ぶとトラブルが少ないとおもいます。


  • ふむふむ・・・そうでしたか。
    早速ダウンロードさせていただきました。
    (今回はちゃんと展開できました(;^_^A )
    カラーチェックするのにも使いやすいです。

    みんなに優しいブログサイトを!ですよね。
    自分もあまり目がいいほうではないので、
    文字の大きさだけじゃなく、コントラストも必要ですね。
    今回、いろいろとためになることをご教授いただいて、
    本当に感謝してます。

    -- ビアンコ&ロッソ (2006-06-22 11:58:23)
  • わぁ 御免なさい
    私はねこやまさんの猫集会所の投稿ピンクを選択してました。
    読みにくかったんですね 本当に御免なさい。
    今度は違う色使いますね。
    -- こはる (2006-06-22 23:52:11)
  • 私のブログ、記事作成画面で黒い字だったんですが、保存すると薄いグレーになっちゃうので、そういう設定なのかと思ったら、すべて範囲指定したら、色が変えられることがわかりました。なので、今までのをもう少し濃い色に変えました。
    自分でも薄いなあと思っていたんですが、テンプレートで決まっているのかと思ってました(^^;)とんだ勘違い。
    今使っているテンプレート、グリーンの字も薄いから、見づらいでしょうか・・・・ここは本文じゃないから、変えられないんですが。コメントも薄いグレーになっちゃうから、いかんともしがたいなあ。どっかいじれば、変えられるんだろうか。うらんさんの記事を見て、いろいろ考えさせられるきょうこのごろです。今度、このソフトダウンロードしてやってみます。
    写真の明るさとかも、ほかの機械だと自分のパソで見るときと違うみたいで、設定が難しいなと思ってます。 -- ぺんた (2006-06-23 10:00:33)
  • こはるさん→
    だああっ。こはるさん、文字色ピンクをご選択でしたか~。
    ハイ、そうなんです。見えなかったんです。すみません。
    ぺんたさん→
    ぺんたさんのココログのアドレス、どちらでしょうか。(^_^;)まだ知らないヤツ。
    うらんはココログ、無料の借りたまんま、空き地でございます。
    有料版にすると、テンプレの編集やアクセス解析ができるらしい。
    文字の色とかリンクの色とか、スタイルシートで決められていて、変更したいとおもうときに変更できないのはサービスが悪いとおもう。
    ビアンコ&ロッソさんのブログはページもスタイルシートも自由に編集できて、うらやましいのです~。 -- うらん (2006-06-24 10:11:04)
名前:
コメント:



カテゴリ: [インターネット] - &trackback() - 2006年06月22日 09:55:44

#blognavi
最終更新:2006年06月24日 10:11