- 追加された行はこの色です。
- 削除された行はこの色です。
#topicpath
#memo(1/22に終わらなかった分。まだまだ編集します。)
*押さえるべき3つのポイント [#b56c173f]
- 読み上げブラウザで通して、意味が通ること。
- 色、大きさなどの要因により視認性を損なっていないこと。
- キーボードだけで問題なく操作ができること。
**読み上げブラウザ [#ue049078]
HPRの実演
***実演 [#e7f6ec81]
-HPRの実演
aDesigner
-http://okra.ark-web.jp/~komori/ark_accessible/www_ark_web_jp__blind.htm
-aDesigner
--http://okra.ark-web.jp/~komori/ark_accessible/www_ark_web_jp__blind.htm
***きちんとマークアップしよう [#c97db6fa]
- とにかく時間がかかる!!
- <hn>をつけないと、見出しジャンプができないよ!!
- へんなテーブル構成だと意味ワカラン
--http://www.washita.co.jp/
--「おすすめ商品一覧」のところを聞いてみよう。。
- 音声だけで意味が通るようなコンテンツにする
-- 読み上げられればOKではなくて、文脈にあわせた補足テキストや、altの付与が必要。
***テキスト面でのフォローもしよう [#s0f79034]
- 「詳しくはこちら」はNG
-- http://www.shikokumura.or.jp/
-- タブでスキップをしていくことが多いので、「詳しくはこちら」の連続になってしまう。
FUKUOKA city online
http://www.city.fukuoka.jp/index.html
- 音声だけで意味が通るようなコンテンツにする
-- 読み上げられればOKではなくて、文脈にあわせた補足テキストや、altの付与が必要。
-- グラフの例：http://alfasado.net/udon/accesible_html20/01.html
--- ここまでしなくても、下に説明テキストを入れるのがベター。
-- デザイン上、「詳細」ボタンの連続だったら、「○○の詳細」などaltで補う。
**色・大きさ [#y9e397de]
aDesignerでの実演
-http://okra.ark-web.jp/~komori/ark_accessible/www_ark_web_jp__lowVision.htm
-色だけでは、
***色 [#nd143a78]
-色だけの情報では、
-- 色盲の人は意味がわからない
-- 色盲の人は区別がつかない
-「色がわからなくても理解可能にする」
--例：http://alfasado.net/udon/accesible_html20/06.html
-「色の組み合わせ」
--例：http://alfasado.net/udon/accesible_html20/07.html
***大きさ [#de1a9e0f]
-文字が小さいと、
-- 視力が悪い人は小さい文字が読めない
-- 弱視の人は、ものすごく字を大きくしています
--http://www.normanet.ne.jp/~altair/index.html
--[[http://www.normanet.ne.jp/~altair/index.html:http://www.normanet.ne.jp/~altair/images/altair-big2.gif]]
***aDesignerでの実演 [#n31dc874]
-http://okra.ark-web.jp/~komori/ark_accessible/www_ark_web_jp__lowVision.htm
**キーボード [#o7ed7ad6]
※Firefoxだけでなく、IEでもみてみよう。。
- タブ操作。
-- onclickのみではNG。onkeypressも併用。
-- divに対してonclickを使った場合、タブでフォーカスしない。
--- a要素、もしくは input要素に指定する。
--- tabindex="0"を指定方法がある。が、IE, Firefoxのみ（Opera, Safariでは未対応、また valid HTMLではない。)
- だめなフォーム
-- テーブル構成
- Ajaxサイト。
-- だめなプルダウン例：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
---閉じる、次/前の画像は操作可能
---キャプションは読み上げられない。
--ThickBox
---http://jquery.com/demo/thickbox/#examples
---閉じるのみ。次/前の画像へは操作できない。
--読み上げられるが操作ができない。
--表示はされるが読み上げられないレイヤーの存在
--GoogleMapsの解決策
---http://maps.google.co.jp/maps
-GoogleMapsの解決策
--http://maps.google.co.jp/maps
- 画面が更新されたことがわからない
---MQのアレ
---http://kizasi.ark-web.jp/mq/design_template0925/dir/artist.html
**まとめ [#fd1bfd6f]
マークアップだけで解決できる問題じゃないんだYo!
企画、デザイナー、マークアップ、エンジニアの全員が考える必要があるよ。
![[PukiWiki]](image/sandbox.gif "[PukiWiki]")
