アークウェブ
Webデザイン
SandBox
Web制作会社アークウェブのスタッフが、デザインのTips・ノウハウをまとめているWikiです
アークウェブシステム開発SandBox
アークウェブWebマーケティングSandBox
アークウェブWebデザインSandBox
アークウェブ アクセシビリティWiki
http://www.ark-web.jp/sandbox/design/wiki/258.html
[
トップ
] [
編集
|
差分
|
バックアップ
|
添付
|
リロード
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
-- 雛形とするページ --
Adobe MAX Japan 2009 2日目レポート
Ajax/角丸ライブラリ
AsEventListener
ComponentExplorer
Flex/Flash Catalyst βを試す
FormatDate
FrontPage
Google Browser Size でファーストビューをチェック
InterWikiName
JavaScript
MT/管理画面/テンプレートのオーバーライド
MenuBar
PHP
PukiWiki
RecentDeleted
SandBox
WebデザイナーにもわかるFlex画面デザイン(1)
WebデザイナーにもわかるFlex画面デザイン(2)
WebデザイナーにもわかるFlex画面デザイン(3)
WebデザイナーにもわかるFlex画面デザイン(4)
WebデザイナーにもわかるFlex画面デザイン(5)
WikiName
WikiWikiWeb
YukiWiki
Zen Cart/tips
event/POINT OF VIEW 第0回
event/インクルーシブデザインワークショップ
iPad/iPadにだけCSS付与するには
jQuery
jQuery/ECサイトで使ってみたいプラグイン
tag
イテレーション1
サンプル
タグ/PGP
パフォーマンス改善/Bookmark
ヘルプ
志田
小沼
進地
整形ルール
斉藤
大家メモ
大家メモ/MAMP/MAMP環境でのPHPエラー表示
大家メモ/MAMP/Mac OSXローカルにMAMPでサイト制作環境を構築
竹村
中野
日本語
八木
勉強会
勉強会/アクセシビリティ勉強会@2008.01.29
勉強会/アクセシビリティ勉強会@2008.01.22
***大きさ [#de1a9e0f] -文字が小さいと、 -- 視力が悪い人は小さい文字が読めない -- 弱視の人は、ものすごく字を大きくしています --[[http://www.normanet.ne.jp/~altair/index.html:http://www.normanet.ne.jp/~altair/images/altair-big2.gif]]
タイムスタンプを変更しない
#topicpath #memo(1/22に終わらなかった分。まだまだ編集します。) *押さえるべき3つのポイント [#b56c173f] - 読み上げブラウザで通して、意味が通ること。 - 色、大きさなどの要因により視認性を損なっていないこと。 - キーボードだけで問題なく操作ができること。 **読み上げブラウザ [#ue049078] ***実演 [#e7f6ec81] -HPRの実演 -aDesigner --http://okra.ark-web.jp/~komori/ark_accessible/www_ark_web_jp__blind.htm ***きちんとマークアップしよう [#c97db6fa] - とにかく時間がかかる!! - <hn>をつけないと、見出しジャンプができないよ!! - へんなテーブル構成だと意味ワカラン --http://www.washita.co.jp/ --「おすすめ商品一覧」のところを聞いてみよう。。 ***テキスト面でのフォローもしよう [#s0f79034] - 「詳しくはこちら」はNG -- http://www.shikokumura.or.jp/ -- タブでスキップをしていくことが多いので、「詳しくはこちら」の連続になってしまう。 - 音声だけで意味が通るようなコンテンツにする -- 読み上げられればOKではなくて、文脈にあわせた補足テキストや、altの付与が必要。 -- グラフの例:http://alfasado.net/udon/accesible_html20/01.html --- ここまでしなくても、下に説明テキストを入れるのがベター。 -- デザイン上、「詳細」ボタンの連続だったら、「○○の詳細」などaltで補う。 **色・大きさ [#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://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ではない。) - だめなフォーム -- だめなプルダウン例: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 **まとめ [#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指針