背景色が白のときに、アクセシビリティ視点から前景色として使える色78色のまとめ | Web担当者Forum
ウェブサイトをデザインするときに大事な色。サイトの目的やイメージなど、色を決める要素にはいろいろなものがありますが、見やすさ、という大事な要素を忘れてはいけません。では、見やすい色の組み合わせって具体的にはどうやって決めるのでしょうか。参考になるのは「コントラスト比」。アクセシビリティのJIS（JIS X 8341-3:2010）では、少なくとも4.5：1以上のコントラスト比を要求しています。具体的にどのくらいの色がこの達成基準をクリアしているのか調べてみました。 調査のきっかけ普段からアクセシビリティにかかわっていて、また弱視の視覚障害を持っている私は、以前から「前景色と背景色のコントラスト比と実際の見やすさにはギャップがあるよな」と感覚的には感じていました。きっかけはFlash Playerのアップデートを促すダイアログの前景色と背景色がとっても見づらいことでした。 このギャップを感じ
重要情報のWeb掲載はPDFだけでなくCSVやHTMLでも行うこと……非常時に限らずね | 初代編集長ブログ―安田英久
震災に関する重要な情報をウェブで公開する場合は、PDFだけでなくHTMLやCSVでも提供するようにといった呼びかけが経産省などから出されています。でもこれ、震災時に限った話ではないんですよ。 経産省は3月30日に、財団法人地方自治情報センター（LASDEC）は3月18日に、それぞれオンラインで情報を公開する際のデータ形式に関する呼びかけを行っています。 東北地方太平洋沖地震等に係る情報提供のデータ形式について（経産省） http://www.meti.go.jp/policy/mono_info_service/joho/other/2011/0330.html国民へ発信する重要情報のファイル形式について（LASDEC） https://www.lasdec.or.jp/cms/12,22060,84.htmlこの2つの連絡は同様のことを言っており、整理すると次のとおり。 被災地の限られた
色覚障がい者に配慮したWebサイトの作り方
2017年4月11日 Webサイト制作, アクセシビリティ, 色彩 今持ってるプロジェクトの中で、視覚・色覚障がい者にも配慮したWebサイトの制作があります。視覚障がい者向けのサイト制作についてはいくつか記事を発見できたのですが、色覚障がい者に向けたWebサイト制作についてはなかなかヒットしなかったので、断片的に読んだものを記事にまとめました。参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 追記: 一部表記の仕方を変更しました。 色覚障がいについて 目の、色を認識する細胞の変異で、色の識別が異なることを「色覚障がい」「色覚異常」と呼びます。色覚障がいといってもいろいろな種類があり、ここでは人口の多い赤系統や緑系統の色の識別が困難な、赤緑色覚異常の場合について書いてみます。 困難な点としては 灰色だと思ったらピンクのシャツだった 焼肉の際、生肉と焼けている肉の区別がつきに
府省のWebページの9割、アクセシビリティ配慮が不十分
ウェブアクセシビリティ推進協会は2010年9月22日、「JIS X 8341-3:2010を活用したウェブアクセシビリティの普及を目指して」と題したセミナーを開催した。障害者や高齢者、Webサイトの運用者など多様な立場の講師が、アクセシビリティの現状と今後について講演した。 同協会は、2010年4月に認証されたNPO法人。Webに関するアクセシビリティ向上を目指す団体や企業が集まっており、東洋大学の山田肇教授が理事長を務める。Web上のコンテンツに関するアクセシビリティの規格JIS X 8341-3:2010が2010年8月に公示されたことから、今回のセミナーを開催した。 セミナーの中では、国の行政機関のWebサイトに対して、アクセシビリティの達成度を調べた調査結果が報告された。総務省行政評価局が、全府省34機関（1府11省と、21の外局など）が公開する1514ページに対して、JIS X
WCAG 2.0
【注意】 この文書は、2008 年 12 月 11 日付の W3C 勧告「WCAG 2.0」 (原文は英語)を、情報通信アクセス協議会の「ウェブアクセシビリティ基盤委員会 (WAIC)」が翻訳と修正をおこなって公開しているものです。この文書の正式版は、あくまで W3C のサイト内にある英語版であり、この文書には翻訳上の間違い、あるいは不適切な表現が含まれている可能性がありますのでご注意ください。 【注意】この文書にはより新しいバージョンが存在します: Web Content Accessibility Guidelines (WCAG) 2.1 W3C 勧告 2008 年 12 月 11 日このバージョン: http://www.w3.org/TR/2008/REC-WCAG20-20081211/ 最新バージョン:http://www.w3.org/TR/WCAG20/前のバージョン:
WebアクセシビリティJISが改定、達成基準がより明確に
Web上のコンテンツを誰もが利用できるようにするアクセシビリティの日本工業規格（JIS）が6年ぶりに改定され、2010年8月20日に公示された。2004年策定の「JIS X 8341-3」を改定した「JIS X 8341-3:2010」である。公示後の8月25日に開催された「TCシンポジウム2010」（テクニカルコミュニケーター協会主催）では、改正原案を策定した東京女子大学現代教養学部人間科学科の渡辺隆行教授が、改正のポイントを解説した。 JIS X 8341-3は、「高齢者・障害者等配慮設計指針―情報通信における機器、ソフトウェアおよびサービス―第3部：ウェブコンテンツ」と題される規格。高齢者や障害者を含むすべての人が、Webコンテンツを適切に知覚、理解、操作できるようにするためのものだ。アクセシビリティの確保が特に求められる国や自治体のWebコンテンツにおいては、対応が必須とされている
記事ページのアクセス通信簿 : could
openwebdesign資料 記事ページのアクセス通信簿 記事ページを新して半年経ち、読者の動きに様々な違いが表れ始めました。良くなった点とそうでもなかった点をみて、今後の課題を幾つか考えてみました。 今のような記事ページになった理由 今年の始めに記事ページを新しくしました。そのあと小さな調整を行ったり機能を追加はしていましたが、そろそろどのような結果が出たのが発表するには良い時期だと思いますので幾つか紹介したいと思います。 ご存知の方もいるかもしれませんが、今「記事」と呼ばれるエントリーはほとんどすべてレイアウトが違います。中には色を変えただけのものもありますが、レイアウトが少し複雑なものや画像が活用されているものもあります。凝り過ぎたことをすると読み難くなってしまいますが、毎回見た目が新鮮なので飽きることもありませんし、それがキッカケで読んでくれる方もいるかと思います。 最近、海外で
第4回 音が聞こえない状況と映像の字幕 | gihyo.jp
音が聞こえない状況 音が聞こえない状況はいろいろあります。 聴覚障碍である 会社のPCなので周りに気を遣う 聴覚障碍者といっても、障碍者手帳を交付されている方から、高齢化により難聴がすすんだ人までさまざまです。また、一説では、常に戦争をしている国などでは、兵士の約1割が聴覚障碍とも言われています。会社にあるPCでは,周りに気を遣うため音を出せない人が多く,昔はサウンド機能がないPCもありました。 意外に音を利用できない環境や人は大勢いるので、音に頼りっぱなしのUIなどはどのような結果を招くのか慎重にすべきです。 音をなくすには 音が利用できない状況を体験するのは非常に簡単です。スピーカーならボリュームを絞れば良いですし、PCサウンドのミュートをオンにしても良いでしょう。とにかく、PCからの音を聞けなくすれば良いだけです。 その状態で使って見ると、次のことがわかります。 音に頼るインタラクシ
使いやすいアーカイブコンテンツの6つのポイント
アーカイブとは過去にリリースした記事のことで、それをより使いやすく機能的にする6つのポイントとその重要性をSmashing Magazineから紹介します。 Website Archives Design: Good Practices and Examples 下記は各ポイントを意訳したものです。 また、元記事ではアーカイブの多くのショーケースが紹介されていますが、それは省略しています。 はじめ 1.アーカイブのスペースは贅沢に 2. アーカイブは見つけやすく 3. アーカイブの境は明白に 4. アーカイブにカテゴリを使う 5. アーカイブでは全部を見せない 6. アーカイブの表示オプション 7. アーカイブを分ける アーカイブの重要性 はじめ アーカイブは注目を得ないウェブサイトのコンテンツとしてしばしば見落とされがちです。多くのウェブサイトで他のページと異なっていたり、まったく無視さ
「ファーストビュー＝重要」は都市伝説!? サイト別・ユーザー属性別にユーザー行動をミエル化 （1/4）：MarkeZine（マーケジン）
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
教室やサロンなど特定継続的役務提供サイトのNGポイント｜Yahoo! ビジネスエクスプレス 掲載審査の落とし穴
お電話でのご相談、お問い合わせ 075-326-0700 受付時間：AM10:00～PM17:00/土日祝休 WEBからのお問い合わせ ショッピングカート 商品一覧 オススメ対策パック＆組み合わせ購入 検索エンジン登録方法 サービス資料ダウンロード さぶみっと！ブログ よくある質問 今回はある紅茶専門ティールームの事例をご紹介します。このティールームのサイトでは、紅茶の通販やお店の紹介コンテンツの他に、紅茶を飲みながら、紅茶の知識やおいしいお茶のいれ方などを楽しく学ぶ体験教室を開催されていました。 Yahoo!さんからは下記のようなご連絡を頂きました。 紅茶教室につきまして、料金の支払いに関する案内やキャンセル・退会に関する記載が見受けられませんでした。 こちらはユーザーが安心してサイトを利用できますよう、上記に関する記載をお願いいたします。 通販サイトの場合に「特定商取引に関する法
診断ツールにおける選択肢の作り方 (ユーザビリティ実践メモ)
ウェブサイトにおいてユーザにいくつかの質問に答えてもらい、その結果として当該サイトが提供するサービスを紹介する「診断ツール」が存在します。旅行会社サイトで好みのツアーを診断したり、証券会社サイトで適切な投資スタイルを診断するなど、様々な場面で用いられています。 今回はこの診断ツールで、ユーザに回答してもらう質問について考えてみたいと思います。 先程述べたツアー診断など、ユーザの好みが強く表れる診断ではこの点が特に問題になることがあります。ここでは、同じくユーザの好みが強く表れる分野として、ブライダルでの例をご紹介します。 弊社が、とある結婚式場紹介サイトで行ったユーザ行動観察調査でのことです。ユーザの好みにあった結婚式プランを診断するサービスを設計するために、質問に対する選択肢として下記の2種類を用意しました。 その結果、Aに比べてBの選択肢に好印象をもったユーザが見受けられました。具体的
写真・画像の具体的な情報は、ユーザに与える影響が大きい (ユーザビリティ実践メモ)
最近は特にECサイトなど、画像を豊富に掲載して、見ていて楽しい魅力的なサイトが増えてきています。 しかしサイトの魅力を増す画像も、使い方を誤るとユーザをミスリードしてしまうことがあります。 今回は画像活用時の注意点をご紹介します。 ユーザはウェブサイトを閲覧する際、目につくものを拾い読みする傾向が強く、特に注目されやすいのが「写真」と「見出しのキーワード」です。 そのため、アイキャッチ画像とキーワードをあわせて配置するレイアウトは、一般的に非常に効果的です。 しかし、画像の与えるイメージは非常に具体的であるため、ユーザは画像の印象に強く引きづられてしまいます。 実際に弊社の調査で、照明やインテリアを探していたユーザが下図右のレイアウトを見て、読み飛ばしてしまうケースがありました。 上のケースの場合、単純に画像を削除してリンクを目立たせることでも、十分にユーザの誤解を避けることが可能でした。
日本規格協会 JSA GROUP Webdesk
★商品の発送に関するお知らせ★ 2024/03/04 平素より当協会のJSA Webdeskをご利用いただき有難うございます。 3月29日(金)に実施いたします棚卸に伴い、3月27日（水）午後以降にご注文いただきました商品は、4月1日（月）以降に順次発送いたします。 ※ダウンロード商品は除きます。 お客様にはご迷惑をおかけいたしますが予めご了承願います。 ★閉店時間に関するお知らせ★ 2024/03/04 3月29日(金)に実施いたします棚卸に伴い、当日のライブラリ・販売所（三田ＭＴビル1階）の営業時間を12：00までとさせていただきます。 お客様にはご迷惑をおかけいたしますが予めご了承願います。 工業標準化法改正に伴うJIS規格名称変更のお知らせ(2020年6月22日更新) 2020/06/22 2020年6月吉日 お 客 様 各 位 日本規格協会グループ 出版情報ユニット 工業標準化法
ユーザーの視線を奪う！？ SEOのタイトル・説明文で考慮すべき3つのポイント
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
【○×】Q.ユーザが画像をざっと見て良し悪しを判断する商品の詳細ページでは、「左：画像、右：文章」、その下は「左：文章、右：画像」と、画像と文章を交互に配置したレイアウトとする方が、そうでない場合に比べて文章にも目を通してもらえる可能性が高い。○か×か？: beBit.Q
【解説】写真画像で良し悪しを判断しようと考えているユーザの視線は、自然と画像と画像をつなぐ形で流れます。画像と文章を交互に配置することでユーザの視線が散らばり、スクロール速度も遅くなりやすいため、比較的文章にも目を通してもらいやすいレイアウトとなります。 解説詳細 例えば、セオリー通り情報が整理されたきれいなレイアウトを達成しようとすると、以下のようになります。 この場合ユーザは、気になる画像があれば横にある文章にも目を移しますが、基本的にはすーっと下に向かって画像だけを眺めてスクロールするといった行動をとりがちです。 また、単調なレイアウトであるためにユーザのスクロール速度も速くなりがちです。 一方、画像と文章を交互に配置したレイアウトでは、ユーザの視線は以下のように散らばってくれる可能性が高くなります。 この場合はユーザが画像から画像に視線を移すタイミングで自然と文章が視野に飛び込んで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.e-riverstyle.com/2010/10/-in.html
http://blog.e-riverstyle.com/2010/01/web10webtips.html
http://blog.e-riverstyle.com/2009/11/web-17.html
http://japan.internet.com/wmnews/20091027/8.html