勉強会/アクセシビリティ勉強会@2008.01.29 http://www.ark-web.jp/sandbox/design/wiki/258.html

押さえるべき3つのポイント †

• 読み上げブラウザで通して、意味が通ること。
• 色、大きさなどの要因により視認性を損なっていないこと。
• キーボードだけで問題なく操作ができること。

読み上げブラウザ †

実演 †

• HPRの実演

• aDesigner
  • http://okra.ark-web.jp/~komori/ark_accessible/www_ark_web_jp__blind.htm

きちんとマークアップしよう †

• とにかく時間がかかる!!
• <hn>をつけないと、見出しジャンプができないよ!!

• へんなテーブル構成だと意味ワカラン
  • http://www.washita.co.jp/
  • 「おすすめ商品一覧」のところを聞いてみよう。。

テキスト面でのフォローもしよう †

• 「詳しくはこちら」はNG
  • 　http://www.shikokumura.or.jp/
  • 　タブでスキップをしていくことが多いので、「詳しくはこちら」の連続になってしまう。

• 音声だけで意味が通るようなコンテンツにする
  • 読み上げられればOKではなくて、文脈にあわせた補足テキストや、altの付与が必要。
  • グラフの例：http://alfasado.net/udon/accesible_html20/01.html
    • ここまでしなくても、下に説明テキストを入れるのがベター。
  • デザイン上、「詳細」ボタンの連続だったら、「○○の詳細」などaltで補う。

色・大きさ †

色 †

• 色だけの情報では、
  • 色盲の人は意味がわからない
  • 色盲の人は区別がつかない

• 「色がわからなくても理解可能にする」
  • 例：http://alfasado.net/udon/accesible_html20/06.html
• 「色の組み合わせ」
  • 例：http://alfasado.net/udon/accesible_html20/07.html

大きさ †

• 文字が小さいと、
  • 視力が悪い人は小さい文字が読めない
  • 弱視の人は、ものすごく字を大きくしています
  • http://www.normanet.ne.jp/~altair/index.html

aDesignerでの実演 †

• http://okra.ark-web.jp/~komori/ark_accessible/www_ark_web_jp__lowVision.htm

キーボード †

※Firefoxだけでなく、IEでもみてみよう。。

• タブ操作。
  • onclickのみではNG。onkeypressも併用。
  • divに対してonclickを使った場合、タブでフォーカスしない。
    • a要素、もしくは input要素に指定する。
    • tabindex="0"を指定方法がある。が、IE, Firefoxのみ（Opera, Safariでは未対応、また valid HTMLではない。)

• だめなフォーム
  • だめなプルダウン例：http://www.tohoho-web.com/wwwxx041.htm
  • 選択即ジャンプではなく、選択（プルダウン）+実行（ボタン）にする。
  • ※参考：http://alfasado.net/udon/accesible_html20/03.html

• Ajaxサイト
  • 表示はされるが（すぐに）読み上げられないレイヤーの存在
  • lightbox
    • http://www.huddletogether.com/projects/lightbox2/#example
    • 閉じる、次/前の画像は操作可能
    • キャプションは読み上げられない。
  • ThickBox?
    • http://jquery.com/demo/thickbox/#examples
    • 閉じるのみ。次/前の画像へは操作できない。

• GoogleMaps?の解決策
  • http://maps.google.co.jp/maps

• 　画面が更新されたことがわからない
  • MQのアレ
  • http://kizasi.ark-web.jp/mq/design_template0925/dir/artist.html

まとめ †

マークアップだけで解決できる問題じゃないんだYo!
企画、デザイナー、マークアップ、エンジニアの全員が考える必要があるよ。

Menu

• デザイン勉強会
• 大家メモ

Movable Type用プラグイン Aシリーズ

ECサイト構築 Zen Cartハイエンド

Tag

最新の20件

ARK-Webビジネスブログの最新記事