アークウェブ
Webデザイン
SandBox
Web制作会社アークウェブのスタッフが、デザインのTips・ノウハウをまとめているWikiです
アークウェブシステム開発SandBox
アークウェブWebマーケティングSandBox
アークウェブWebデザインSandBox
アークウェブ アクセシビリティWiki
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
#topicpath
#memo(1/22に終わらなかった分。まだまだ編集します。)
*押さえるべき3つのポイント [#b56c173f]
- 読み上げブラウザで通して、意味が通ること。
- 色、大きさなどの要因により視認性を損なっていないこと。
- キーボードだけで問題なく操作ができること。
**読み上げブラウザ [#ue049078]
***実演 [#e7f6ec81]
-HPRの実演
-aDesigner
--http://okra.ark-web.jp/~komori/ark_accessible/www_ark_w...
***きちんとマークアップしよう [#c97db6fa]
- とにかく時間がかかる!!
- <hn>をつけないと、見出しジャンプができないよ!!
- へんなテーブル構成だと意味ワカラン
--http://www.washita.co.jp/
--「おすすめ商品一覧」のところを聞いてみよう。。
***テキスト面でのフォローもしよう [#s0f79034]
- 「詳しくはこちら」はNG
-- http://www.shikokumura.or.jp/
-- タブでスキップをしていくことが多いので、「詳しくはこ...
- 音声だけで意味が通るようなコンテンツにする
-- 読み上げられればOKではなくて、文脈にあわせた補足テキス...
-- グラフの例:http://alfasado.net/udon/accesible_html20/...
--- ここまでしなくても、下に説明テキストを入れるのがベタ...
-- デザイン上、「詳細」ボタンの連続だったら、「○○の詳細」...
**色・大きさ [#y9e397de]
***色 [#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://w...
***aDesignerでの実演 [#n31dc874]
-http://okra.ark-web.jp/~komori/ark_accessible/www_ark_we...
**キーボード [#o7ed7ad6]
※Firefoxだけでなく、IEでもみてみよう。。
- タブ操作。
-- onclickのみではNG。onkeypressも併用。
-- divに対してonclickを使った場合、タブでフォーカスしない。
--- a要素、もしくは input要素に指定する。
--- tabindex="0"を指定方法がある。が、IE, Firefoxのみ(Op...
- だめなフォーム
-- だめなプルダウン例:http://www.tohoho-web.com/wwwxx041...
-- 選択即ジャンプではなく、選択(プルダウン)+実行(ボタ...
-- ※参考:http://alfasado.net/udon/accesible_html20/03.html
- Ajaxサイト
--表示はされるが(すぐに)読み上げられないレイヤーの存在
--lightbox
---http://www.huddletogether.com/projects/lightbox2/#exam...
---閉じる、次/前の画像は操作可能
---キャプションは読み上げられない。
--ThickBox
---http://jquery.com/demo/thickbox/#examples
---閉じるのみ。次/前の画像へは操作できない。
--GoogleMapsの解決策
---http://maps.google.co.jp/maps
- 画面が更新されたことがわからない
---MQのアレ
---http://kizasi.ark-web.jp/mq/design_template0925/dir/ar...
**まとめ [#fd1bfd6f]
マークアップだけで解決できる問題じゃないんだYo!
企画、デザイナー、マークアップ、エンジニアの全員が考える...
終了行:
#topicpath
#memo(1/22に終わらなかった分。まだまだ編集します。)
*押さえるべき3つのポイント [#b56c173f]
- 読み上げブラウザで通して、意味が通ること。
- 色、大きさなどの要因により視認性を損なっていないこと。
- キーボードだけで問題なく操作ができること。
**読み上げブラウザ [#ue049078]
***実演 [#e7f6ec81]
-HPRの実演
-aDesigner
--http://okra.ark-web.jp/~komori/ark_accessible/www_ark_w...
***きちんとマークアップしよう [#c97db6fa]
- とにかく時間がかかる!!
- <hn>をつけないと、見出しジャンプができないよ!!
- へんなテーブル構成だと意味ワカラン
--http://www.washita.co.jp/
--「おすすめ商品一覧」のところを聞いてみよう。。
***テキスト面でのフォローもしよう [#s0f79034]
- 「詳しくはこちら」はNG
-- http://www.shikokumura.or.jp/
-- タブでスキップをしていくことが多いので、「詳しくはこ...
- 音声だけで意味が通るようなコンテンツにする
-- 読み上げられればOKではなくて、文脈にあわせた補足テキス...
-- グラフの例:http://alfasado.net/udon/accesible_html20/...
--- ここまでしなくても、下に説明テキストを入れるのがベタ...
-- デザイン上、「詳細」ボタンの連続だったら、「○○の詳細」...
**色・大きさ [#y9e397de]
***色 [#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://w...
***aDesignerでの実演 [#n31dc874]
-http://okra.ark-web.jp/~komori/ark_accessible/www_ark_we...
**キーボード [#o7ed7ad6]
※Firefoxだけでなく、IEでもみてみよう。。
- タブ操作。
-- onclickのみではNG。onkeypressも併用。
-- divに対してonclickを使った場合、タブでフォーカスしない。
--- a要素、もしくは input要素に指定する。
--- tabindex="0"を指定方法がある。が、IE, Firefoxのみ(Op...
- だめなフォーム
-- だめなプルダウン例:http://www.tohoho-web.com/wwwxx041...
-- 選択即ジャンプではなく、選択(プルダウン)+実行(ボタ...
-- ※参考:http://alfasado.net/udon/accesible_html20/03.html
- Ajaxサイト
--表示はされるが(すぐに)読み上げられないレイヤーの存在
--lightbox
---http://www.huddletogether.com/projects/lightbox2/#exam...
---閉じる、次/前の画像は操作可能
---キャプションは読み上げられない。
--ThickBox
---http://jquery.com/demo/thickbox/#examples
---閉じるのみ。次/前の画像へは操作できない。
--GoogleMapsの解決策
---http://maps.google.co.jp/maps
- 画面が更新されたことがわからない
---MQのアレ
---http://kizasi.ark-web.jp/mq/design_template0925/dir/ar...
**まとめ [#fd1bfd6f]
マークアップだけで解決できる問題じゃないんだYo!
企画、デザイナー、マークアップ、エンジニアの全員が考える...
ページ名:
アークウェブのサービスやソリューションはこちら
サービス
Webの企画・戦略立案
Webデザイン
Webシステム開発
Zen Cartソリューション
Zen Cart導入コンサルティング, RFP作成, トラブル診断
Zen Cartで大規模ECサイト構築
Zen Cartモジュールの開発・カスタマイズ
Zen Cart制作会社(デザイン・企画会社)様向けサービス
Zen Cart海外向け・多言語ECサイトの制作
Zen Cartのデザイン, ペルソナ/シナリオ法, RIA(Ajax・Flex)
Zen Cartのセキュリティ・運用保守サポート
Zen Cart企画・マーケティング戦略, SEO・SEM(サーチエンジン広告)
Zen Cartハイエンド版(大規模サイト用高可用バージョン)
EC-CUBEとZen Cart 機能比較表(概要)
Zen Cart携帯モジュール(モバイルショップ構築用)
Zen Cartの導入事例
Zen-Cart.JPのご紹介とアークウェブの取り組み
Zen-Cartモバイルショップ構築サービス
Movable Typeソリューション
企業サイトでのMovable Type活用
Movable Type用プラグイン一覧
MT用フォーム作成プラグイン「A-Form」
A-Formパートナー制度
その他ソリューション
AjaxでRIA開発
Ruby on Rails
Flexによる業務システム構築
ペルソナ/シナリオ法
ビジネスブログ
SNS・ソーシャルソフトウェア
SEO・SEM
アークウェブのCSR(企業の社会的責任)
アークウェブのCSR指針