色覚障がい者に配慮したWebサイトの作り方
2017年4月11日 Webサイト制作, アクセシビリティ, 色彩 今持ってるプロジェクトの中で、視覚・色覚障がい者にも配慮したWebサイトの制作があります。視覚障がい者向けのサイト制作についてはいくつか記事を発見できたのですが、色覚障がい者に向けたWebサイト制作についてはなかなかヒットしなかったので、断片的に読んだものを記事にまとめました。参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 追記: 一部表記の仕方を変更しました。 色覚障がいについて 目の、色を認識する細胞の変異で、色の識別が異なることを「色覚障がい」「色覚異常」と呼びます。色覚障がいといってもいろいろな種類があり、ここでは人口の多い赤系統や緑系統の色の識別が困難な、赤緑色覚異常の場合について書いてみます。 困難な点としては 灰色だと思ったらピンクのシャツだった 焼肉の際、生肉と焼けている肉の区別がつきに
fladdict » スマホのUI考 〜 ボタンについて
SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ
目が見えない人のためのスマートフォンは、デザインも機能もファンタスティック！
いやはやスゴイ携帯の登場です。このシンプルでスタイリッシュなデザインの携帯電話は、目が見えない人のためのスマートフォンなのです。 デザインは、韓国のデザイナーYoungseong KimとEunsol Yeom によるもので、韓国語で「見ること」という意味の「VOIM」と名付けられました。視覚障害者のコミュニケーションを、より便利に、豊かに、円滑にするためのデザインです。 前面は全面シリコンパネル、裏面にはカメラとイヤーピースがあるだけのシンプルさですが、その機能は多彩です。のっぺりとしたシリコンパネルには、ユーザーに何かを伝える時に点字を浮かび上がらせることができます。カメラで文字を読み込めば、その情報をBluetoothを使ってイヤーピースから音声として出力することもできますし、カメラを前にして首から「VOIM」を下げて歩けば、前方にある物体を認識して音声で知らせることもできます。 デ
プログラマのためのUXチートシート — ありえるえりあ
はじめに http://msdn.microsoft.com/ja-jp/library/aa511258.aspx の 「Windows ユーザー エクスペリエンス ガイドライン」 「ガイドライン」 主に「コントロール」 の抜粋です。 以下の基準で抜粋しました Web UIに応用可能 実用的かつ具体的 自明ではない プライマリUIを目立たせる プライマリ UI 要素を強調するには、以下に従います。 - プライマリ UI 要素は、視線の通り道に配置します。 - タスクを開始する UI 要素は、左上隅または中央上に配置します。 - コミット ボタンは、右下隅に配置します。 - 残りのプライマリ UI は、中央に配置します。 - コマンド ボタン、コマンド リンク、アイコンなど、注意を引き付けるコントロールを使用します。 - 大きなテキストや太字のテキストなどの目立つテキストを使用します。 ユ
府省の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
ナビゲーションの実践的なスタイリング
本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介しています。今回は前回に引き続き、より実践的なテクニックとして、「ナビゲーション」を例にクロスブラウザな表示を意識したスタイリング方法を紹介していきたいと思います。 はじめに 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。 前回の記事では、ナビゲーションのマークアップに使われる代表的な要素として、a要素やリスト関連の要素（ul要素、ol要素など）を中心に取り上げ、これら要素のプレゼンテーションをコントロールする基本的なテクニックを紹介しました。今回は、これらのテクニックを組み合わせ、「グローバルナビゲーション」や「パンくずリスト」などのナビゲーションパーツをスタイリングする方法
Webで大切な「来てもらう→もてなす→また来てもらう」のサイクル
2009.04.28 IT・WEB Webで大切な「来てもらう→もてなす→また来てもらう」のサイクル 安田 英久 株式会社インプレスビジネスメディア Web担当者Forum編集長 AIDMAとかAISASみたいな消費行動のパターンによるものではなく、「Web担当者が何をするべきか」の視点でもうちょっとシンプルにしてみたものです。 わかりやすく言うと、Webで何かをするときは、ユーザーに 1. 来てもらう 2. 来てくれた人をもてなす 3. また来てもらう の3段階のどの部分に対してアクションをするのかを明確化しようということです。「サイトの成果を出す」ために、どの部分を強化するべきなのかによって、とるべき行動が変わるということですね。 それぞれについて解説してみましょう。 (1) 来てもらう いわゆる集客の部分ですね。自社のことや製品のことを知ってもらうことと、知っている人にサイトに来ても
アクセシビリティも考慮して表組みするための10のタグ（1/11） - ＠IT
有限会社タグパンダ 喜安 亮介 2009/4/24 XHTMLでページ全体をレイアウトする際に“表”を使っていませんか？ それはCSSでやるべきで、ほかに使いどころは多々あります Webアクセシビリティを考慮した表組みをしよう 今回は“表組み”（テーブル）を表すタグを紹介してきたいと思います。HTMLの表組みは、table要素でマークアップされたブロックで、Excelでよく見る「スプレッドシート」と同じイメージです。tr要素が“行”、th/td要素が“列”を表します。Webアクセシビリティを考慮した表組みをするには、以下に上げる点も踏まえ、きちんとコーディングする必要があります。 table要素にsummary属性を付けて要約を記述 テーブル項目のタイトルは、th要素でマークアップ caption要素により、きちんと表題を付ける theadやtfoot、tbody要素によりテーブル行をグル
ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0
E-mailｼ嗹ebmaster@zspc.com Copyright © 1996-2000 ZSPC. All Rights Reserved. All pages except color chart are written in Japanese. g src="/static/zspc.com-vcss.gif" alt="Valid CSS! | " height="31" width="88" border="0"> g height="31" width="88" src="" alt="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0" border="0">
IBM Web アクセシビリティ（日本語） - Japan
このチェックリストに従って自分のウェブサイトをアクセシブルにしてください。このリストは更新され ており、www.w3.org/WAIのW3C Web Accessibility Initiativeにある最新のヒントとガイドラインの一部を含みます。 チェックリストの項目に記入してください。チェックリストの項目をアプリケーションがサポートしている場合は Yes を、していない場合は No を、そのアプリケーションに該当しない場合は N/A を記入します。サポートしない項目と該当しないチェックリストの項目すべてについて、コメント部分に簡単な説明を記入してください。 チェックポイントにはすべて、アクセシブルなコンテンツを開発・試験できるように詳細な理由、テクニックおよび試験手法が含まれます。詳細情報を見るためには各チェックポイントのリンクテキストを選択してください。 IBMウェブ・アクセシビリ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
