![[PukiWiki]](image/sandbox.gif "[PukiWiki]")
- バックアップ一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- 勉強会/アクセシビリティ勉強会@2008.01.29 へ行く。
- 1 (2008-01-22 (火) 19:12:11)
- 2 (2008-01-29 (火) 17:13:12)
勉強会/アクセシビリティ勉強会@2008.01.29
押さえるべき3つのポイント †
- 読み上げブラウザで通して、意味が通ること。
- 色、大きさなどの要因により視認性を損なっていないこと。
- キーボードだけで問題なく操作ができること。
読み上げブラウザ †
実演 †
- HPRの実演
きちんとマークアップしよう †
- とにかく時間がかかる!!
- <hn>をつけないと、見出しジャンプができないよ!!
- へんなテーブル構成だと意味ワカラン
- http://www.washita.co.jp/
- 「おすすめ商品一覧」のところを聞いてみよう。。
テキスト面でのフォローもしよう †
- 「詳しくはこちら」はNG
- http://www.shikokumura.or.jp/
- タブでスキップをしていくことが多いので、「詳しくはこちら」の連続になってしまう。
- 音声だけで意味が通るようなコンテンツにする
- 読み上げられればOKではなくて、文脈にあわせた補足テキストや、altの付与が必要。
- グラフの例：http://alfasado.net/udon/accesible_html20/01.html
- ここまでしなくても、下に説明テキストを入れるのがベター。
- デザイン上、「詳細」ボタンの連続だったら、「○○の詳細」などaltで補う。
色・大きさ †
色 †
- 色だけの情報では、
- 色盲の人は意味がわからない
- 色盲の人は区別がつかない
- 「色がわからなくても理解可能にする」
- 「色の組み合わせ」
大きさ †
- 文字が小さいと、
- 視力が悪い人は小さい文字が読めない
- 弱視の人は、ものすごく字を大きくしています
- http://www.normanet.ne.jp/~altair/index.html
aDesignerでの実演 †
キーボード †
※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?の解決策
- 画面が更新されたことがわからない
まとめ †
マークアップだけで解決できる問題じゃないんだYo! 企画、デザイナー、マークアップ、エンジニアの全員が考える必要があるよ。
