早稲田大学のサイトリニューアルがなぜこんなにひどいのか。 - 隣り合わせの灰と青春
久しぶりにセミナー以外でブログ書きます。 このたび早稲田大学のWebサイトがリニューアルされました http://www.waseda.jp/top/ が、かなり論議になりそうなリニューアルなので、 情報設計専門家として内容を見てみます。 1.なにがグローバルなサイトなの？ 今回のリニューアルではIE10以降を対象外としていて、 普通に使っているIE7や8では見ることができません、 これはアクセシビリティ上かなり問題だと思います、 多くの人が目にする大学というサイトでノンアクセシビリティを貫くというのは、 いまの時代にそぐわないのではないでしょうか。 わざわざIE10にアップデートまでしてみるサイトでもないですしね。 ぜんぜんグローバルじゃありません。かっこ悪いです。 2.レスポンシブデザイン？ スマートフォン、タブレットに対応したサイトになったみたいですが、 そもそものとこ
スクリーンリーダーを併用しなくても見出しやランドマークへの移動 (キーボード操作) を可能にする「Skip To」 — Website Usability Info
Talking about web usability, accessibility, IA, UCD, UX,... スクリーンリーダーを併用しなくても見出しやランドマークへの移動 (キーボード操作) を可能にする「Skip To」 公開日 : 2013年7月9日 カテゴリー : アクセシビリティ , ユーザーインターフェース (UI) 以前、「一般ブラウザにおけるセクション間の移動 (キーボード操作)」という記事を書きましたが、一般ブラウザ (Internet Explorer、Firefox、Google Chrome、Safari など) でスクリーンリーダーを併用しない場合、キーボード操作によって見出しや WAI-ARIA ランドマーク (Landmark Roles) にジャンプ移動することができない、というお話をしました。 これに対して、決裁サービスを展開している「PayPa
ユーザビリティ/ユーザーエクスペリエンス（UX）の視点で考えるアクセシビリティ (CSS Nite in SHIZUOKA, Vol.3)
ユーザビリティ/ユーザーエクスペリエンス（UX）の視点で考えるアクセシビリティ (CSS Nite in SHIZUOKA, Vol.3) by caztcha on Oct 06, 2012 ユーザビリティ/ユーザーエクスペリエンス（UX）の視点で考えるアクセシビリティ (CSS Nite in SHIZUOKA, Vol.3) — Presentation Transcript ユーザビリティ/ユーザーエクスペリエンス (UX)の視点で考えるアクセシビリティ 自己紹介● Website Usability Info● サイト評価● サイト制作/運用ガイドライン策定● IA (サイト情報設計)● 視覚障碍者のパソコンボランティア● アクセシビリティ勉強会の主宰● 第1回「だれもが使えるウェブコンクール」特別賞● もともとは取説屋 おしながき1. 概念の整理 (「アクセシビリティ」とは？
視覚障害者向け 使いやすいソフトウェアを設計するためのガイドラインを公開しました | 2012年4月4日（水） | U'eyes Design Inc.
ニュースリリース 2012年4月4日（水） 視覚障害者向け 使いやすいソフトウェアを設計するためのガイドラインを公開しました 2012年4月4日、視覚に障害のあるユーザにも使いやすいソフトウェアを開発するためのガイドラインを公開いたしました。このガイドラインには、視覚に障害のあるユーザが、どのようにパソコンを操作しているのか。設計する際にどのような点に注意すれば、視覚に障害があっても使いやすいソフトウェアになるのか。といった内容を紹介しています。 視覚障害やアクセシビリティ、音声化技術に興味をお持ちの方はのみならず、ソフトウェア開発に携わっている方も是非一度ご覧ください。 ガイドラインの概要 視覚に障害があるユーザは、パソコンの画面を見ることが困難です。しかし、画面の表示内容を音声で読み上げる技術を用いることで、パソコンを操作できるようになります。 しかし、ソフトウェアの全てが音声で読み上
色覚障がい者に配慮したWebサイトの作り方
2017年4月11日 Webサイト制作, アクセシビリティ, 色彩 今持ってるプロジェクトの中で、視覚・色覚障がい者にも配慮したWebサイトの制作があります。視覚障がい者向けのサイト制作についてはいくつか記事を発見できたのですが、色覚障がい者に向けたWebサイト制作についてはなかなかヒットしなかったので、断片的に読んだものを記事にまとめました。参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 追記: 一部表記の仕方を変更しました。 色覚障がいについて 目の、色を認識する細胞の変異で、色の識別が異なることを「色覚障がい」「色覚異常」と呼びます。色覚障がいといってもいろいろな種類があり、ここでは人口の多い赤系統や緑系統の色の識別が困難な、赤緑色覚異常の場合について書いてみます。 困難な点としては 灰色だと思ったらピンクのシャツだった 焼肉の際、生肉と焼けている肉の区別がつきに
BBC - Future Media Standards & Guidelines - Browser Support Standards v3.72
1. Introduction 1.1. Scope of this Document 1.1.1. This standard applies to web browsers that are being used on desktop versions of Windows, Mac OS and Linux/Unix. This does not cover PDAs, mobiles, and other mobile devices. 1.2. Web Browser Support 1.2.1. The BBC accepts that the nature of the web medium is such that web pages cannot be produced in such a way as to be uniformly rendered in all br
『音訳マニュアル』レビュー - Trans
音訳マニュアル―視覚障害者用録音図書製作のために (音訳・調査編) 作者: 全国視覚障害者情報提供施設協会録音委員会音訳マニュアル〈音訳・調査編〉改訂プロジェクト委員会出版社/メーカー: 全国視覚障害者情報提供施設協会発売日: 2006/03メディア: 単行本購入: 2人 クリック: 93回この商品を含むブログ (3件) を見る 音訳マニュアル―視覚障害者用録音図書製作のために 処理事例集 作者: 全国視覚障害者情報提供施設協会録音委員会処理事例集プロジェクト出版社/メーカー: 全国視覚障害者情報提供施設協会発売日: 2004/04メディア: 単行本購入: 1人 クリック: 45回この商品を含むブログ (1件) を見る 本書は、音訳ボランティアの人たちにとってのガイドラインのようなもの。音訳とは、 音訳（おんやく）とは、インクを用いて表現された文字や図表など、視覚など聴覚以外の感覚器に依存
これからキャプションを作りたいと思っている方のために - Trans
先日公開したOpen Accessibility Library Projectですが、このWebサイトに掲載している動画は、トップページのIntroduction Movieを除き、すべてキャプションを制作しています。キャプションはWebサイトにテキストとして貼り付けていますし、YouTubeプレーヤーでも利用することができます（動画のキャプション : スタートガイド - YouTube ヘルプ）。 メリット キャプションは最高です。動画を作るのであれば、キャプションは絶対作った方がいいです。 聴覚障害を持つユーザにとって便利だというアクセシビリティ上のメリットもありますが、ほかにもこんなメリットが考えられます。 ポッドキャストや動画の内容を文章で読みたいと思う人がいる（僕のこと） インタビュアーの日本語が下手で分かりづらい（男性の声、つまり僕のことです。滑舌悪いんです） Webサイトに
視覚障害者にもやさしい iPad
［VoiceOver – 音声インターフェイス］ 視覚障害者によって書かれた iPad レビューが興味深い。 Associated Content: “iPad Review: From a Blindness Perspective” by Waldorf PC: 04 April 2010 ＊ ＊ ＊ 視覚障害者の iPad レビュー iPad がいかにすばらしいかみんなが話題にしている。視覚障害者のわれわれもその例外ではない。なぜならアップルがすべての製品でアクセシビリティを可能にするよう取り組んでくれたおかげだ。そのおかげでわれわれ視覚障害者もホットでクールな話題を健常者と同じように楽しむことができる。・・・アップルに心から感謝したい。我々は暗闇に置き去りにされ、長い時間待たないとクールなガジェットを利用できず、手にしたときはもはやクールではなくなっていた。アップル
カラーユニバーサルデザイン推奨配色セット
色覚の多様性に配慮した 案内・サイン・図表等用のカラーユニバーサルデザイン 推奨配色セット ■ 東京大学分子細胞生物学研究所 高次構造研究分野 伊藤啓 ■ 社団法人日本塗料工業会（JPMA） ■ DIC 株式会社（旧･大日本インキ化学工業株式会社） DIC カラーデザイン株式会社 ■ 特定非営利活動法人カラーユニバーサルデザイン機構（CUDO） 概略 一般の人にも色の見え方が異なる人にも見分けやすい、カラーユニバーサルデザイン推奨配色セットを作成。 被験者実験を重ね、数千の候補色から20色を絞り込み。 塗料業界の色指定の業界標準であるJPMA塗料用標準色2011年F版に対応色を収録。印刷・デザイン業界の色指定の業界標準であるDICカラーガイドシリーズから対応色を選出。 はじめに いわゆる色弱（色覚異常）の人や、緑内障など網膜の疾患を持つ人、白内障の人は、色によっては違いを
アクセシビリティも考慮して表組みするための10のタグ（1/11） - ＠IT
有限会社タグパンダ 喜安 亮介 2009/4/24 XHTMLでページ全体をレイアウトする際に“表”を使っていませんか？ それはCSSでやるべきで、ほかに使いどころは多々あります Webアクセシビリティを考慮した表組みをしよう 今回は“表組み”（テーブル）を表すタグを紹介してきたいと思います。HTMLの表組みは、table要素でマークアップされたブロックで、Excelでよく見る「スプレッドシート」と同じイメージです。tr要素が“行”、th/td要素が“列”を表します。Webアクセシビリティを考慮した表組みをするには、以下に上げる点も踏まえ、きちんとコーディングする必要があります。 table要素にsummary属性を付けて要約を記述 テーブル項目のタイトルは、th要素でマークアップ caption要素により、きちんと表題を付ける theadやtfoot、tbody要素によりテーブル行をグル
当然だけど、色弱の人にはカラースターの色の違いが分かんない。 - 日々、とんは語る。
先月末にカラースターがリリースされて、特別なものを貰って嬉しいという気持ちを触発させるのに、とても良いサービスだなと思ったのですが、ひとつ大きな問題があります。 色弱の人には、色の違いが分からなくて、嬉しさや楽しさが分からない(伝わらない)場合があるという事です。 僕の場合、ブルーはひと目で違いが分かりますが、レッドは単体で見ると、(スターは黄色という)固定観念によって、イエローと判断される場合がありますし、レッドとイエローが並んだ場合はグリーンに見えます。そして、グリーンがレッドに見える事はありませんが、イエローの違いはほとんど皆無です。 ややこしい話ですが、要は、色弱の人はその時の調子や気分によって、何色にでも見える可能性があるというのが重要であり、カラースターが色の違いだけで、変化を表しているため、スターを付けた人の意図しない見え方(認識)をしてしまう可能性があるというのが問題だと思
hn要素を各エリアに配置し、アクセシビリティを高くする。 - Trans
ページの各エリアに対してhn要素を使い起点を設けることにより、アクセシビリティを高めることができるかもしれません。 ある全盲の音声ブラウザユーザの意見 最近、ある全盲の音声ブラウザユーザの意見を聞く機会がありました。彼女が主張する使いやすいWebサイトとは以下の3つとのことでした。 ページ全体の構造がイメージしやすいこと 迷子にならないように道しるべがあること 自分の行きたい場所にすぐに行けること 1つ目はWebサイトの標準的なデザインに従えば、ある程度達成できます。このあたりは、Alertbox: ウェブデザイン標準の必要性（2004年9月13日）を参考にしてください。 また、3つ目はWebコンテンツJISにもあるナビゲーションスキップである程度対応できます。ただ、ジャンプするのはメインコンテンツだけにするべきか、それともサブナビゲーションも入れるべきかなどの問題もあるとは思いますが。
ツール＆ダウンロード － Webアクセシビリティポータルサイト『infoaxia(インフォアクシア)』
Webアクセシビリティを実践するには、ツールの活用が不可欠です。目的や運営・制作現場のニーズに適うツールを選択して作業を効率化して、アクセシブルなWebコンテンツ制作を実践しましょう。 Web Accessibility Toolbar Windows版 Internet Explorer のツールバーで、ブラウザ画面に表示されているWebページのアクセシビリティを様々な観点からチェックおよびシミュレーションすることが可能（ダウンロード：無償）。 Web Acessibility Toolbar の概要/ダウンロード カラー・コントラスト・アナライザー 画面上の背景色と前景色のコントラストを W3C が提案している計算式で判定でき、3つのタイプによる色覚特性での判定も可能なチェックツール（ダウンロード：無償）。『Web Accessibility Toolbar』からの起動も可能。 カラー
アクセシブルなサイトにするための26のステップ
Webmaster World.comのエントリー「アクセシブルなサイトにするための26のステップ」の意訳です。 26 Steps to a More Accessible Website スキップリンクは、キーボード操作をしている人のために目に見えるように設置する、というのにはなるほど、と思いました。 Altのテキストと代替の内容 画像にはAltを記述し、代替の内容を記す。 動画のキャプションや概要 動画の内容・概要・サマリーなどを記す。 「ここをクリック」は使用しない リンクには的確な情報を含める。 リンクの間のスペース 隣接したリンクには、区切りを設置する。 JavaScriptで記述したリンク リンクの記述は、JavaScriptに依存させない。 lang属性の使用 lang属性を使用して、使用言語を明示する。 アニメーションは使用しない ユーザーの気を散らせない。 色に依存しない
色盲の人にもわかるバリアフリープレゼンテーション法
「色覚障害」とも呼ばれる「色盲」は黄色人種では男性の20人に1人(5%)、女性の500人に1人 (0.2%)に見られます（白人では男性の8%、黒人では男性の4%）。上記調査同時期の日本人男性は6,111万人、女性は6,359万人（平成8年 10月現在）ですから、色盲の人は約318万人となり、身体障害者の総計を越える数となっています。色盲は世界的にはAB型の血液型の頻度に匹敵し、極め てありふれた存在なのです。小中学校の40人学級（男子20人）の各クラスに必ず1人、男女100人の講演会場では、2～3人の色盲の聴衆がいるという計 算になります。社会的な差別や偏見といった過去の経緯から自分が色盲であることを隠す人が多いことや、色盲であっても実際にはかなりの色を不自由なく見分 けられることから、これまで色盲の人が色に関する不便を積極的に訴えることは少なかったと言えます。そのため、色盲がこのようにあ
あなたのサイトを色盲の人がどう見ているか教えてくれる『Colour Blindness Simulator』 | P O P * P O P
色盲の人にとってあなたのサイトは見えにくいかもしれません。 そこで便利そうなのが「Colour Blindness Simulator」。 このサイトでは指定した画像を色盲の人がどう見ているかを教えてくれます。 以下に使い方をご紹介。 ↑ とりあえずこのサイトのスクリーンショットでテストします。 ↑ ファイルと色盲の種類を指定します。 ↑ 変換結果。ちょっと小さいですが、まったく違う色になっちゃってますね・・・。 指定できるファイルは100KB以内および、1000ピクセル×1000ピクセル以内のJPEGなのでサイトなどで試すときは気になる部分だけで試してみると良さそうですね。 アクセシビリティに注意しなくてはいけない方はご利用になられてはいかがでしょうか。 » Colour Blindness Check – Etre
アクセシビリティへのスタンス
学生時代のロボット研究室の一員（端くれ）として（全然勉強しなかったけど）、技術は体に障害のある人にどのようなサポートができるのか？というのはずっと考えているし、今でもそういう仕事ができたら良いなぁと思っている。（お金持ちにもなりたいですが。） 資本主義の考えの下での技術や製品の理想像としては、僕はこう思っている。 「障害者の人が苦もなく使える技術、製品は健常者にとって快適であるべきだ。」 「障害者の人が苦もなく使えない技術は、成熟した技術とは言えない」 ■ユーザビリティやアクセシビリティというのは、一つの延長線上に並んでいる 世の中の人は、ざっくりわけてこの三つ ・器用な人（別に何もしなくても勝手に読み取ってくれる。勉強ができる人、unix使いとか） ・わかりにくいモノへの理解度が不得手で不器用な人（ユーザビリティ、僕はここに所属する。） ・体に障害があったりして、何かにとても苦労する人（
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユニバーサルデザイン - FUJITSU Japan