« IACのプレゼンサーバー自転車操業 | トップページ | UNISEC WS 航空券予約メモ »

2005年10月 8日 (土曜日)

アクセシビリティ

手前味噌ですが、さらにIACプレゼンサーバーについて。

ちょっと見てみてください。
http://iac2005.aero.kyushu-u.ac.jp/

(10月22日追記:運用終了しました)

全文、テキストエディタで手書きHTMLです。このくらい朝飯前。
一見シンプルで、飾り気無いすが、かなり考えて作りこんでいます。

世界中の研究者が相手ですから、ブラウザの環境が多種多様であると想定します。そのため、できるだけ低規格のHTMLで済ませています。おそらくHTML2.0程度。自分ではWindowsのIEとFirefox,そしてLinuxのMozillaで確認。

HTMLは見かけを記述するのではなく、論理構造を記述する派。フォントは指定しない。文字サイズは相対指定。

フレームは使わない。

JavaScriptを一部使っていますが便利さのためで、必須にはしない。フォームが空欄で送信ボタンを押しても送信前にクライアント側で警告を出すために使っている。Script無効でも、フォームを送信したのち、サーバー側のPHPでさらに入力チェックして警告を出す。


とくに各ページ上部の機能案内のメニューは吟味しました。
簡単なデザインのようで熟考したんですよ。説明しなくても一見で機能が理解できるように。これにはMacintoshのハイパーカードで培った経験が生きています。
昔これを読んだのです。
「ハイパーカード ユーザーインターフェースガイドライン」川村 渇真 (著)
ハイパーカードは廃れましたが、ウェブページにも全く同じガイドラインが適用できます。

といっても、なにも難しい特別なことをしている訳でなく、HTMLの基礎に忠実にやっているだけなんですが、最近は飾りばかり派手で重くて、どこがクリックできるのか分かりにくい、リンク先の内容が予想つかない、という使いづらいウェブページが増えたことよ・・・。

さて、このメニューはtableで作っていて、今どの機能のページなのか分かるようにbgcolorで色分けしています。ただし、日本人では男性の5%、欧米人の男性では8%もが色盲(色覚異常)だそうなので、色盲のひとにも優しくなるよう心がけました。グレーとピンクを使っていますが、明度が同じだと見分けにくくなるので、グレーを薄めに調整しました。そもそも、色情報が無くても分かるよう、選択されたメニューを[括弧]で強調しました。

とくにIACでは欧米人が多勢来ますから、講演の聴衆に数人は色盲の人がいると思ってください。プレゼンの色使いにも気を使うとよいでしょう。たとえば

白地に黒文字のスライドでは赤字の強調は黒字と見分けにくい。黒地に白文字のスライドでは赤字で強調したつもりが暗く目立たなく見える。どちらの場合も、純粋な赤の替わりに朱色にするとだいぶ見やすくなる。
グラフは色だけで区別しない。実線/破線とかマーカー点の形状も併用する。
とのこと。
参考「色盲の人にもわかるバリアフリープレゼンテーション法」


なお、視覚障害者のためには、画像(imgタグ)のalternate(alt)属性を省略せずに、適切な名前を付けるべきです。ウェブの読み上げソフトが、altの文字列を読むそうなので。とくに画像がリンクボタンとなっている場合には重要。
「ここ」という文字列がリンクになっているのも、リンク先が予想できず、分かりづらいそうです。

|

« IACのプレゼンサーバー自転車操業 | トップページ | UNISEC WS 航空券予約メモ »

パソコン・インターネット」カテゴリの記事

コメント

Altは聴覚障害じゃなくて視覚障害の人のために配慮して付けるじゃないですか?

投稿: | 2005年10月 8日 (土曜日) 08:56

うわあ!
どういうわけか脳内変換されて書き間違えていました。お恥ずかしい。
ご指摘ありがとうございます。

本文、訂正しておきました。

投稿: ごんざぶろう | 2005年10月 8日 (土曜日) 09:12

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/23831/6301093

この記事へのトラックバック一覧です: アクセシビリティ:

« IACのプレゼンサーバー自転車操業 | トップページ | UNISEC WS 航空券予約メモ »