アークウェブWebデザインSandBox

• バックアップ一覧
• 差分 を表示
• ソース を表示
• バックアップ を表示
• 勉強会/アクセシビリティ勉強会＠2008.01.22 へ行く。
  • 1 (2008-01-21 (月) 18:05:51)
  • 2 (2008-01-21 (月) 19:06:02)
  • 3 (2008-01-22 (火) 17:26:19)
  • 4 (2008-01-22 (火) 19:14:13)
  • 5 (2008-01-31 (木) 13:17:20)

• 追加された行はこの色です。
• 削除された行はこの色です。

#topicpath
 
 #memo(まだ編集中につき。)
 
 *アクセシビリティとは？ [#u0da5e24]
 -さまざまなシステムへの、アクセスしやすさ、接近可能性などの度合いを示す言葉である。（@wikipedia）
 -さまざまなシステムへの、アクセスしやすさ、接近可能性などの度合いを示す言葉である。「すべての人と情報の共有が可能であれ」（@wikipedia）
 - 「access」「bility」
 - アクセスできる・アクセスしやすさ。「誰もが使える」
 - アクセスできる・アクセスしやすさ。''「誰もが使える」''
 - ''アクセスできない人もいるってこと！''
 - ユーザビリティ（使いやすさ）とは違うもの。
 -「すべての人と情報の共有が可能であれ」（@wikipedia）
 
 
 *ユーザ像 [#j5c745f5]
 **どれくらいいるの？ [#b25cbc12]
 - http://www8.cao.go.jp/shougai/whitepaper/h18hakusho/zenbun/honpen/zu_01_27.html
 - http://www2.nict.go.jp/tao/sien/barrierfree/statistics/communication/hc_internet.htm
 -- 「身体障害者」30万のうち、半分程度がネット使用者、であるならば結構な人数。
 -- シニアも入れると、無視できない。
 
 **障害の種類 [#la374fa4]
 
 以下のような内容が考えられる。
 |老眼|小さな文字が見づらい|- フォントサイズは可変にする（少なくともコンテンツ部分は可変）&br;- 可変サイズで対応できるデザインにする|
 |視覚障害（全盲）|視力がまったく/ほとんどない&br;音声読み上げソフトや、点字ディスプレイを使用|- 見出しは<h1><h2>などで見出しとしてマークアップする&br;- 冒頭にスキップナビゲーションの配置&br;- altをつける、意味に応じて書き換える&br;- 色の識別ができなくても理解できるように文言を工夫&br;- スタイルシートをはずしてチェックをする&br;- キーボードのみでも操作可能にする&br;- 音声ブラウザ（ex.IBM HomePageReader）での読み上げテストを実施する（※）&br;- もしくは、専用ページを用意する（※）|
 |視覚障害（弱視）|眼鏡・コンタクトレンズによる矯正視力が0.3未満&br;特別なソフトで画面を拡大して閲覧|- フォントサイズは可変にする&br;- 可変サイズで対応できるデザインにする&br;- 画像によるテキスト表現は避け、テキスト主体にする&br;- デザイン時に画面・色のコントラストに注意する&br;- もしくは、専用ページを用意する（※）|
 |視覚障害（色盲）|色の区別がつかない、つけづらい|- 文字色・背景色の組み合わせに注意する-色のみの情報伝達をしない|
 |視覚障害（色盲）|色の区別がつかない、つけづらい|- 文字色・背景色の組み合わせに注意する&br;-色のみの情報伝達をしない|
 |聴覚障害|聴力に障害がある|- とくになし?&br;- 音声のみの情報提供・アラートなどは使用しない。文字情報と併用する。|
 |運動障害（マウス操作が困難）|手が不自由、または震えて細かい操作がしにくい&br;特殊なキーボード、スティックや声で操作|- キーボードのみでも操作可能にする&br;- ボタンは選択しやすいよう大きく|
 |認知障害|失語、失行、失読、失認、注意集中力障害など|	-？？（具体的な施策不明）&br;- 見出しや本文を適切に短くまとめるなど「わかりやすく」する？|
 |JSオフ、CSSオフ、Flash未インストール||（「すべての人にアクセシブル」という意味ではこれらも含まれる）|
 
 *たとえば、フォーム [#ra02733a]
 
 -アクセシビリティTIPS【入力フォーム編】　入力しやすいフォームを作る - ［儲かるWebプロデュース］All About
 --http://allabout.co.jp/career/webproduce/closeup/CU20031109A/index2.htm
 
 - 入力フォームのユーザビリティ&アクセシビリティ
 -- http://cyberniko.jp/hal/web/form
 
 
 *押さえるべき3つのポイント [#b56c173f]
  つづく！
 
 - 読み上げブラウザで通して、意味が通ること。
 - 色、大きさなどの要因により視認性を損なっていないこと。
 - キーボードだけで問題なく操作ができること。
 #blikifooter(小森)
 
 
 **読み上げブラウザ [#ue049078]
 
 HPRの実演
 
 aDesigner
 -http://okra.ark-web.jp/~komori/ark_accessible/www_ark_web_jp__blind.htm
 
 - とにかく時間がかかる!!
 - <hn>をつけないと、見出しジャンプができないよ!!
 - へんなテーブル構成だと意味ワカラン
 
 - 音声だけで意味が通るようなコンテンツにする
 -- 読み上げられればOKではなくて、文脈にあわせた補足テキストや、altの付与が必要。
 
 - 「詳しくはこちら」はNG
 
 FUKUOKA city online
 http://www.city.fukuoka.jp/index.html
 
 
 **色・大きさ [#y9e397de]
 
 aDesignerでの実演
 
 -http://okra.ark-web.jp/~komori/ark_accessible/www_ark_web_jp__lowVision.htm
 
 
 -色だけでは、
 -- 色盲の人は意味がわからない
 -- 色盲の人は区別がつかない
 
 -文字が小さいと、
 -- 視力が悪い人は小さい文字が読めない
 -- 弱視の人は、ものすごく字を大きくしています
 --http://www.normanet.ne.jp/~altair/index.html
 
 
 
 **キーボード [#o7ed7ad6]
 
 - タブ操作。
 -- onclickのみではNG。onkeypressも併用。
 - だめなフォーム
 -- テーブル構成
 - Ajaxサイト。
 --lightbox
 ---http://www.huddletogether.com/projects/lightbox2/#example
 ---ThickBox　http://jquery.com/demo/thickbox/#examples
 
 --読み上げられるが操作ができない。
 --表示はされるが読み上げられないレイヤーの存在
 
 -GoogleMapsの解決策
 --http://maps.google.co.jp/maps
 
  マークアップだけで解決できる問題じゃないんだYo!