みんなのＩＣＴ http://www.ict4everyone.jp/ みんなのＩＣＴの最新お知らせ、コラムを配信しています。 ja Copyright 2012 http://www.sixapart.com/movabletype/ http://www.rssboard.org/rss-specification ハイコントラストチェック効率アップのOpera活用術 アクセシブルなウェブサイト制作時には、通常の動作確認とは別に音声読み上げソフトでの確認や、キーボードのみの操作確認、ハイコントラスト表示での確認等が必要になってきます。

ハイコントラスト表示とは、白が眩しく感じたり、視力の弱いユーザーなどが、画面を見やすくする方法のひとつです。
参考：ウェブ屋さん、ロービジョン体験キット使ってみませんか？

みんなのICTのウェブを通常表示とハイコントラスト表示で比較

ウェブ屋さんに意外に知られていないのが、ハイコントラスト表示への切り替え。Windowsの場合[Shift]+[Alt]+[PrintScreen] でハイコントラスト表示に切り替えることができます。もう一度同じ操作をすると、もとに戻ります。

ただ、このハイコントラスト表示の切り替えはPCへの負荷も大きく、切り替えに時間がかかってしまいます。ユーザーであれば一度設定すればあまり切り替えることはありませんが、ウェブ制作をしながら確認する場合に通常表示とハイコントラスト表示を何度も切り替えるのは、あまり効率的ではありません。そんな時、Operaの「高コントラスト表示（白/黒）」を使用すると、PCの負荷もなく簡単にハイコントラスト表示の確認をすることができます。

Operaでの高コントラスト表示(白/黒)切り替え方法

Operaでのハイコントラスト表示は、Operaメニューの「表示」から「スタイル」の「高コントラスト表示（白/黒）」にチェックで切り替えることが可能です。

Operaのメニューからスタイルの高コントラスト表示（白/黒）にチェックを入れている状態

Windowsのハイコントラスト表示とは若干違う点もありますが、ハイコントラスト時に発生する重大な問題を見つけるにはこのモードでも確認できます。

また、このツールを常に表示しておきたい場合は、Operaメニューの「表示」から「ツールバー」の「カスタマイズ」を選択し、ツールバーパネルの「ビューバー」にチェックを入れると、ツールバーに表示されるようになります。

ハイコントラスト表示の特徴とチェック

ハイコントラスト表示には以下のような特徴があります。

  • 背景画像は無視される
  • borderの色はそのまま
  • 背景色は黒になる（※注意）
  • 文字色は白になる（※注意）

その上で、ハイコントラスト表示では以下のポイントを中心にチェックを行います。

  • 重要な情報が背景画像に配置されていないか
  • 通常表示と同じ情報を取得できるか
  • 色だけに依存して情報を伝えていないか
  • 情報と情報の区切りはわかりやすいか など

※注意

ハイコントラスト表示は、デフォルトで黒い背景に白い文字が表示されますが、これは代表的な例のひとつにすぎません。実際のユーザーは黒い背景に黄色い文字や、灰色の背景に黒い文字など、人によって見やすい組み合わせは様々です。黒い背景に白い文字だけがハイコントラスト表示である、という思い込みは持たず、ユーザーが自由に背景色と文字色を指定しても情報が伝わるサイトを作るように心がけましょう。

]]> http://www.ict4everyone.jp/read/140.php http://www.ict4everyone.jp/read/140.php ウェブアクセシビリティ Wed, 08 Feb 2012 14:47:42 +0900 ウェブアクセシビリティ方針、試験結果を公開することの意味を考える ウェブサイトのアクセシビリティ品質を高める方法

2010年8月20日にウェブアクセシビリティガイドラインJIS X 8341-3:2010が公開され、昨年から少しずつウェブアクセシビリティ方針の公開や、試験結果の表示をするサイトが出てきました。

試験結果公開をすると、ウェブアクセシビリティの専門家やユーザーから直接ではなくともネット上などで様々な指摘を受けることになります。多くの場合、取り組みに対する賞賛の声より適合性等に対する厳しい指摘が多く、正直制作会社の担当者は冷や汗ものだと思います。

ウェブサイトはPDCAサイクルをまわし、品質を高めていくことが基本になります。公開してからが本番スタートです。そういう意味では、公開時点で完璧なサイトは存在しないと思っていますし、この方法以外サイトの品質を高めることはできないと思います。それは、どんなに経験を積んだ制作者であっても同様です。

ウェブアクセシビリティを考えた時に、どのように品質を高めていくのか。その最大のきっかけが、ウェブアクセシビリティ方針、試験結果を公開し、意見を吸い上げPDCAサイクルをまわすことだと考えます。

障碍特性に精通している制作者はほとんどいない

多くのウェブ制作者は、ユーザーテストを行う機会はほとんどありません（予算の問題が大きいですが）。ましてや、障碍者のユーザーテストをいれる機会は、ほぼ無いと思います。

アクセシブルなウェブサイトを制作する場合、おおよその障碍特性や利用特性をセミナーやネット上で知識を得て、ウェブアクセシビリティガイドラインと格闘しながら、特別な支援技術を検証環境に持たずに制作・納品する場合が多いと思います。

このような状態で、ウェブアクセシビリティ方針・試験結果を公開することは、当然制作者にとって恐怖となります。試験結果に自信が持てないのは当然です。

ウェブアクセシビリティの専門家でも、障碍特性や利用特性の知識に偏りがあります。だからこそ、ウェブサイトで「様々な人の意見を吸い上げる状況を作ること」が重要になってくるのです。

ウェブアクセシビリティスキルを高める近道は試験結果公開

もちろんウェブアクセシビリティに取り組むうえで、この程度は知っておくべきという理想はあります。しかし、「完璧」を目指して停滞してしまうのではなく、まずは自分なりにウェブアクセシビリティを勉強し、試験を行い結果を公開することで、多くのユーザーや専門家から意見をもらえるというチャンスがやってきます。しかも、お金もかからず！これは、ウェブアクセシビリティスキルを高めノウハウを蓄積する最高の近道ではないでしょうか？

最初は、間違いがあってもいいと思います。また、専門家どうしても意見が分かれることもあり、指摘をされても対応の判断に迷うこともあるかもしれません。どんなに悩むことがあったとしても、確実に前に進んでいると思います。

明日にでも公開！ウェブアクセシビリティ方針

すぐに試験ができなくても、まずはウェブアクセシビリティ方針を公開し
「いついつまでに等級なにを達成することを目標として改修していきます！」
という方針表明だけでも、自分の気持ちを高める原動力になると思います。

制作者の想いが伝わるサイトは、多くの人が期待をし、共感をし、一緒に築き上げていきたいという気持ちになるのは、自然な流れです。

それがきっかけで、案外ウェブアクセシビリティ関係の専門家やユーザーと新しい関係を築けるかもしれませんよ。

まとめ

  • 試験結果の公開は、適合や準拠のPRが目的ではない。
  • 結果的に利用者が使えるようになるのが目的。
  • 結果より改善するプロセスが大事。
  • 結果を公開するメリットは、 継続的に第三者のチェックがはいること。
  • 熱い想いは、ウェブアクセシビリティ方針で伝える。
      • ]]> http://www.ict4everyone.jp/read/139.php http://www.ict4everyone.jp/read/139.php ウェブアクセシビリティ Mon, 23 Jan 2012 18:48:01 +0900 エレベーターから学ぶ「使えるリンク」「使えないリンク」 エレベーターの操作パネル

      最近「リンク」や「リンクラベル」の重要性についての記事をよく見かけるようになりました。リンクはウェブサイト閲覧・操作の基本中の基本にもかかわらず、未だにこのような記事が書かれ続けているということは、残念ながら適切なリンクがつけられているサイトの普及が進んでいないことにあると思います。

      ユーザーにとって、リンクはそのサイトの「案内人」です。
      訪れたユーザーをスムーズに目的地に案内するために、シンプルで適切な誘導が必要になります。

      私たちの生活の中にはユーザーをシンプルで適切に導くリンクのヒントがたくさんあります。今回は、身近な「エレベーターの操作パネル」を例にして、ウェブサイトのリンクのアクセシビリティについて説明します。

      リンク画像に代替テキストがない場合

      全く行先の情報が分からないため、ボタンがあっても目的の場所に移動することができません。

      ボタンに数字が無いエレベータの操作パネル

      画像の代替テキストをつけるのはアクセシビリティの基本ですが、特にリンク画像の場合音声読み上げユーザーや画像がオフのユーザーは、リンク先の情報をまったく得ることができないため立ち往生してしまいます。

      参考になるガイドライン(WCAG2.0)

      達成基準1.1.1 非テキストコンテンツ:レべルA(外部サイト)
      利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たす代替テキストを提供する。

      違うリンク先のリンクラベルがすべて同じ場合

      行先が違うのに操作ボタンのラベルがすべて同じパターンです。また、操作ボタンの横に目的の行先が記載されていますが、直観的に操作ができません。

      ボタンはすべて「押す」と書かれており、その横に移動フロアの説明があるエレベーターの操作パネル。

      リンク先が違うのに、「詳しくはこちら」「ここをクリック」などの同じリンクラベルを使用している場合、前後の文脈から移動先の情報を読み取ることができますが、リンクラベル単体としては明確にリンク先の情報を表しているとは言えません。

      音声読み上げソフトのユーザーが、タブキーでリンク要素だけ読み上げる操作をする場合、「押す」「押す」「押す」と読み上げ、効率的な情報取得がしにくくなります。

      参考になるガイドライン(WCAG2.0)

      達成基準2.4.4 文脈におけるリンクの目的:レベルA(外部サイト)
      それぞれのリンクの目的が、リンクのテキストだけから、又はプログラムが解釈可能なリンクの文脈をリンクのテキストとあわせたものから解釈できる。ただし、リンクの目的が一般的にみて利用者にとって曖昧な場合は除く。
      達成基準2.4.9 リンクの目的:レベルAAA(外部サイト)
      それぞれのリンクの目的がリンクのテキストだけから特定できるメカニズムが利用可能である。ただし、リンクの目的が一般的にみて利用者にとって曖昧な場合は除く。

      リンク先は同じだが、リンクラベルが違うリンクが複数ある場合

      同じ行先なのに、ラベルの違うボタンが複数あり、本当に同じ行先か判断しにくい状態です。

      同じ行先のボタンが複数あり、それぞれ別のラベルがついているエレベーターの操作パネル

      リンクをクリックするきっかけをたくさん用意したほうが、リンクできるきっかけ・領域がひろがりユーザーに親切という理由で、記事の見出しやサムネイル写真、概要テキストなどに、それぞれリンクを設置していることがあります。

      しかし、サイト内で統一したリンクラベルでないと、ユーザーが一体同じページに移動するのかどうか、不安が生じてしまう可能性があります。

      同じリンク先の場合は、リンクラベルを統一し、特にリンクが隣接している場合は、ひとつにまとめることで、ユーザーの混乱を避けることが大切です。

      参考になるガイドラインおよび実装方法(WCAG2.0)

      達成基準3.2.4 一貫した識別性:レべルAA(外部サイト)
      ウェブページ一式の中で同じ機能性を有するコンポーネントは、一貫して識別できる。
      実装方法H2(外部サイト)
      隣り合った画像とテキストリンクを同じリンクの中に入れる

      まとめ

      制作者は、プロジェクトにかかわった時点で頭の中にサイト構造がはいってしまい、ユーザーの立場にたってサイトを「案内」する客観的な判断が難しくなります。
      ウェブサイト制作者という立場を離れて、いちユーザーとしてウェブサイト以外のナビゲーションを観察してみると、ウェブサイト制作にも役に立つヒントがたくさんあふれています。実際の生活の中ではありえないようなナビゲートを、ウェブサイト制作では深く考えずに実装してしまっていることに気が付くかもしれません。

      ]]>       http://www.ict4everyone.jp/read/132.php http://www.ict4everyone.jp/read/132.php ウェブアクセシビリティ Fri, 16 Dec 2011 11:24:53 +0900       広島呉でウェブアクセシビリティ勉強会を開催しました 2011年12月13日、広島県呉市にある特定非営利活動法人 呉サポートセンターくれシェンドさんのご協力で、ウェブアクセシビリティ勉強会を開催しました。

      特定非営利活動法人 呉サポートセンターくれシェンド(外部サイト)

      今回は、講師が前に立ってお話するようなセミナー形式ではなく、ウェブアクセシビリティの解説や事例などを紹介しながら、7名の参加者の方とひとつのテーブルを囲み気軽に意見交換しながら進めることでき、とても有意義な勉強会になりました。

      ウェブアクセシビリティの解説やウェブ屋が落ちるウェブアセシビリティの落とし穴の他、音声読み上げソフトやWindowsのアクセシビリティ機能を使った視覚障碍者のウェブ閲覧方法のデモを行いました。

      音声読み上げソフトを使って、ウェブサイト読み上げのデモを行っている様子

      参加した方からは
      「そもそも、ウェブアクセシビリティを知らない。知ればその必要性は誰もが感じることができる。」
      という意見が多く、
      「なぜそうしなければいけないのか、意味が分かりとてもスッキリした。」
      という感想をいただくことができました。

      制作者の方からは、クライアントとのやり取りで発生する現場の本音が多く聞かれ、クライアントへの認知拡大も、私たちNPOの活動として展開していかなければいけないことを強く感じました。

      少しでも多くの方にウェブアクセシビリティを知っていただき、アクセシブルなウェブサイトが増えるきっかけになるよう、今後も全国でこのような活動を進めていきます。

      ]]>       http://www.ict4everyone.jp/know/info/131.php http://www.ict4everyone.jp/know/info/131.php Tue, 13 Dec 2011 14:54:46 +0900       プロジェクトゆうあい　「キッズスペースゆうあい」事業スタート 平成23年11月21日、団体会員のNPO法人プロジェクトゆうあいさん（島根県松江市）が、障碍のある児童（学齢期）の放課後時間を活用した療育の場である児童デイサービスとして「キッズスペースゆうあい」事業をスタートしました。おめでとうございます！
      地域でなくてはならないサービスになると思います。

      キッズスペースゆうあい(外部サイト)

      ]]>       http://www.ict4everyone.jp/know/info/130.php http://www.ict4everyone.jp/know/info/130.php Sun, 04 Dec 2011 22:40:06 +0900       ウェブ屋さん、ロービジョン体験キット使ってみませんか？ ロービジョンの見え方をいろいろ知りたいと思って調べていたところ、京都ライトハウスに「ロービジョン体験キット」というものがあることを知り、先日電話をして郵送で取り寄せました。今回は、その体験をご紹介します。

      ロービジョン体験キットと使用説明書

      ロービジョン体験キットの内容

      ロービジョン体験キットは、一式150円。学校の教材などでも気軽に使えそうです。

      視野狭窄体験メガネ、白濁体験メガネの基本メガネを工作し、そこにフィルムや紙を組み合わせることで、視野狭窄体験、白濁体験の他、視野欠損状態の体験をすることもできます。

      メガネキットの用紙の他に、様々な大きさの字や迷路、白黒反転した字などが印刷された用紙もセットに含まれています。メガネをかけた状態での字の読みやすさ・読みにくさ、作業のしやすさ・しにくさなどを体験することができます。

      様々な大きさの文字が、黒や白の背景色に印刷されている用紙

      迷路などが印刷されている用紙

      白濁体験

      ウェブアクセシビリティのユーザーテストを行うと、ロービジョンの方から「画面がまぶしい」というが意見がでる時があります。正直私としては、直接光源を見ていないのに「まぶしい」という感覚がいまいち理解できずにいました。

      組み立てた白濁体験メガネ

      早速組み立てた白濁体験メガネを、かけて文字を見てみて「はっ！」としました。白が拡散するんです。白が拡散することで、光源を見た時のようなまぶしさに近いものを感じました。

      早速印刷された文字を見てみます。同じ大きさの文字でも、白地に黒文字は、白地が光を拡散させて黒い文字がぼやけてほとんど読めません。逆に黒字に白文字は、ぼやけながらも光が拡散しない黒が多いため、白い文字をなんとか読むことができました。

      体験メガネをかけずに見たサンプル文字

      体験メガネをかけてみたサンプル用紙。白地に黒文字はほとんど読めない状態。

      ウェブサイト閲覧の際は、本の「白」とは違いモニター自体が光を発しているので、まぶしさや目の疲れは相当なものではないか？と想像しました。

      ただし、ここであまり極端に考えてしまってはいけません。ウェブサイトを黒背景に白文字にするのがベストか？という考え方です。実際には、ロービジョンの方でも見え方が違い、黒背景に黄色文字が見やすいという人もいますし、黄色がまぶしいという方もいます。
      様々な見え方の人がいるため、「この色の組み合わせがベスト」というものはありません。

      この体験を通してウェブ制作者が対応すべきことは、

      • 多くの人が利用するデフォルトの状態で、ウェブアクセシビリティガイドラインのコントラスト比に対応すること
      • 利用者が自分で見やすい背景色と文字色に変換することを妨げないように制作をすること
      • 利用者が色を変更しても（色を識別できなくても）、情報が伝わるようにすること

      これらに配慮することで、アクセシブルなウェブサイトを提供することができるようになります。

      視野狭窄体験

      メガネに四角錐の筒をつけて、その先に小さな穴を開けます。そうすることで、ほんの少しの領域しか見えないようになり、視野狭窄体験をすることができます。

      組み立てた視野狭窄体験メガネ

      見える範囲が極端に狭いので、例えばウェブサイトを見ているとき、自分のマウスのカーソル位置さえ探すことができません。「見えている人は、みんなマウス操作ができる」という先入観は、あっさりと崩れました。

      視野狭窄でなくても、極端に視力が低い場合は、画面を大きく拡大していたり、画面に目を近づけるため「全体を見渡す」ということが難しくなります。そのため、何かの操作で、画面の一部の情報が変化しても、とても気が付きにくい状態です。
      また、文章を読んでいて次の行を読み進める際適切な行間がないと、同じ行を読んでしまったり、1行のみ飛ばしてしまったりすることもよくあります。

      私が視野狭窄の方によく言われるのが「ホワイトスペース」。画面の一部しか見えないため、左から情報を追っていくのですが、ホワイトスペースが続くことでそこが情報を終りであると認識してしまいます。
      逆に、左右にコンテナとコンテナの間に余白がないと、別のコンテナと認識できずに続けて読んでしまい、意味が分からないということも多いそうです。

      ウェブ屋さん、是非体験あれ！

      今まで、私自身当事者から話を聞いたり、知識として知っていたのと、シミュレーションアプリなどである程度ロービジョンについて理解できていると思っていたのですが、実際に体験してみると、想像とあまりの違いに驚きました。

      一人で「え！こんなんなの？この見え方は、そりゃ大変だわ～」とつぶやいてしまったくらいです（笑）

      まだウェブアクセシビリティに取り組んでいないウェブ屋さんも、すでに取り組んでいるウェブ屋さんも、ぜひ一度体験してみてほしいと思います。なぜ、ウェブアクセシビリティガイドラインが必要なのか、なぜこの達成基準が定義されたのか、その意味がよく分かると思います。

      また、ウェブアクセシビリティガイドラインにはなくても、「配慮」したほうが良いな、という判断も、この体験から生まれるかもしれません。

      最後に

      みんなのＩＣＴで視覚障碍者ＩＴ支援をしているスタッフに耳にタコができるくらい言われるのが「ロービジョンの見え方は本当にさまざま。100人に聞けば100人違う答えが返ってくる。」ということ。

      ウェブ制作をしていて、なかなかロービジョンの方に直接意見を聴く機会はないと思います。それが故に、たまたま聞いた意見がロービジョンの見え方の代表のように思って制作を進めてしまうのは、非常に危険だということです。

      「見え方は人それぞれ」であるということをしっかりと認識し、様々なユーザーの要望に対応できる「柔軟」なウェブサイトの制作に取り組んでほしいと思います。

      ]]>       http://www.ict4everyone.jp/read/106.php http://www.ict4everyone.jp/read/106.php ウェブアクセシビリティ Mon, 17 Oct 2011 17:33:33 +0900       日本ＬＤ学会　第20回大会　RAINMANポスター発表 9月18日に東京の跡見学園女子大学（文京キャンパス）　で開催されていた日本LD学会にて、テーマ「家庭での学習行動に困難を示す発達障害児への支援ーRAINMAN3の適用効果ー」として会員の吉松（よしまつ）が発表致しました。

      発表内容は、高機能広汎性発達障害のある中学生を対象に、"家庭での学習従事のつまずき"をRAINMAN3を適用し支援した結果と考察です。

      発表後は、「RAINMANの携帯版がありますか？」「同じスケジュール調を、複数で確認できるのは良いですね。」などのご質問、ご感想をいただきました。

      RAINMANポスター発表の資料（PDF：737KB)

      吉松氏がノートパソコンを使ってRAINMANを紹介している様子

      ※発表ではRAINMAN3を用いていますが、現在はRAINMAN4がダウンロードできます。


      ]]>       http://www.ict4everyone.jp/know/info/99.php http://www.ict4everyone.jp/know/info/99.php Tue, 27 Sep 2011 17:06:30 +0900       独立行政法人福祉医療機構　「平成23年度　社会福祉振興助成事業」に採択されました。 ご報告します。
      独立行政法人福祉医療機構　「平成23年度　社会福祉振興助成事業」に採択されました。
      ありがとうございます。

      助成区分
      全国的・広域的ネットワーク活動支援事業
      助成テーマ
      障碍の特性に応じた自立の支援に関する事業
      助成事業名
      誰もがいつでもどこからでも利用できる点訳のサービス事業

      社会福祉振興助成事業紹介(外部サイト)

      事業は、愛媛大学の開発協力で完成したWord2007の文書を自動的に点字に変換するアプリケーション「BrailleML for MS Word AddIn」を活用したネット点字印刷サービスの普及です。インターネットを介して、どこからでも点訳・点字印刷の依頼ができます。

      【注意】本アプリケーションは、自動点訳の機能はございませんので、別途、自動点訳のアプリケーションが必要です。

      連携団体は社会福祉法人名古屋ライトハウス光和寮(外部サイト)と地域の学校で学ぶ視覚障害児(者）の点字教科書等の保障を求める会(外部サイト)です。
      定期的に本サイトに経過報告を致します。

      ]]>       http://www.ict4everyone.jp/know/info/98.php http://www.ict4everyone.jp/know/info/98.php Wed, 10 Aug 2011 20:54:54 +0900       音声読み上げまとめ「曜日」編 曜日に関する「音声読み上げソフト」「音声ブラウザ」での読み上げをまとめました。
      「 」内のカタカナ表記は、英語音声での読み上げ箇所を示しています。

      読み上げ例

      金曜日

      「金曜日」の読み上げ一覧
      PC-Talker きんよーび
      JAWS きんよーび
      NVDA きんよーび
      ホームページリーダー きんよーび
      Net-Reader きんよーび

      (金)

      「(金)」の読み上げ一覧
      PC-Talker かっこ　かね　かっことじ
      JAWS かっこひらき　かね　かっことじ
      NVDA きんよー
      ホームページリーダー かね
      Net-Reader かっこ　かね　かっことじ

      Fri

      「Fri」の読み上げ一覧
      PC-Talker 「フライ」
      JAWS えふあーるあい
      NVDA えふあーるあい
      ホームページリーダー ふらいでぃ
      Net-Reader 「フライ」

      月～金

      「月～金」の読み上げ一覧
      PC-Talker つき　なみせん　かね
      JAWS つき　なみせん　きん
      NVDA げつ　から　きん
      ホームページリーダー つき　から　かね
      Net-Reader つき　なみせん　かね

      月～金曜日

      「月～金曜日」の読み上げ一覧
      PC-Talker つき　なみせん　きんよーび
      JAWS つき　なみせん　きんよーび
      NVDA げつ　から　きんよーび
      ホームページリーダー つき　から　きんよーび
      Net-Reader つき　なみせん　きんよーび

      日 月 火 水 木 金 土

      「日 月 火 水 木 金 土」の読み上げ一覧
      PC-Talker ひ　つき　ひ　みず　き　かね　つち
      JAWS にち　げつ　か　みず　き　こん　ど
      NVDA にち　げつ　ひ　みず　き　かね　つち
      ホームページリーダー ひ　つき　ひ　みず　き　かね　つち
      Net-Reader ひ　つき　ひ　みず　き　かね　つち

      Sun Mon Tue Wed Thu Fri Sat

      「Sun Mon Tue Wed Thu Fri Sat」の読み上げ一覧
      PC-Talker 「サン　モン　チュー　ウェドゥ　チュー　フライ　サット 」
      JAWS さん　えむおーえぬ　てぃーゆーいー　うぇどぅ　てぃへいちゆー えふあーるあい　さっつ
      NVDA さん　えむおーえぬ　てぃーゆーいー　うぇっど　てぃーえいちゆー　えふあーるあい　さっと
      ホームページリーダー さん　まんでぃ　ちゅーずでぃ　うぇんずでぃ　さーずでぃ　ふらいでぃ　さたでぃ
      Net-Reader 「サンディ　マンディ　チューズディ　ウェンズディ　サーズディ　フライディ　サタディ」

      検証環境

      音声読み上げソフト

      Windows7、Internet Explorer9で以下の音声読み上げソフトを使用して検証を行いました。 設定はすべてデフォルトで使用しています。

      • 高知システム開発　PC-Talker　 バージョン2
      • エクストラ　JAWS バージョン11
      • NVDA　バージョン2011.1.1j(音声エンジン:ドキュメントトーカー)

      音声ブラウザ

      Windows XP、Internet Explorer6で以下の音声ブラウザを使用して検証を行いました。設定はすべてデフォルトで使用しています。

      • IBM　ホームページリーダー　バージョン3.04
      • 高知システム開発　Net-Reader　バージョン1.1

      参考サイト

      ]]>       http://www.ict4everyone.jp/read/92.php http://www.ict4everyone.jp/read/92.php ウェブアクセシビリティ Fri, 24 Jun 2011 14:18:21 +0900       音声読み上げまとめ「時刻」編 2011年6月4日更新

      時刻に関する「音声読み上げソフト」「音声ブラウザ」での読み上げをまとめました。
      「 」内のカタカナ表記は、英語音声での読み上げ箇所を示しています。

      読み上げ例

      12時00分

      「12時00分」の読み上げ一覧
      PC-Talker じゅーにじ　ぜろぜろふん
      JAWS じゅーにじ　ぜろぜろぷん
      NVDA じゅーにじ　ぜろぜろふん
      ホームページリーダー じゅーにじ　ぜろぜろふん
      Net-Reader じゅーにじ　ぜろぜろふん

      12:05

      「12:05」の読み上げ一覧
      PC-Talker じゅーに　ころん　ぜろご
      JAWS じゅーに　ころん　ぜろご
      NVDA じゅーにじ　ごふん
      ホームページリーダー じゅーに　ぜろご
      Net-Reader じゅーに　ころん　ぜろご

      12時05分

      「12時05分」の読み上げ一覧
      PC-Talker じゅーにじ ぜろごふん
      JAWS じゅーにじ ぜろごふん
      NVDA じゅーにじ ぜろごふん
      ホームページリーダー じゅーにじ　ぜろごふん
      Net-Reader じゅーにじ　ぜろごふん

      PM2:30

      「PM2:30」の読み上げ一覧
      PC-Talker 「ピーエム　トゥー　コロン　サーティ」
      JAWS ぴーえむ　に　ころん　さんじゅう
      NVDA ぴーえむ　にじ　さんじゅっぷん
      ホームページリーダー ぴーえむ　に　さんじゅう
      Net-Reader 「ピーエム　トゥー　コロン　サーティ」

      午後2時30分

      「午後2時30分」の読み上げ一覧
      PC-Talker ごご　にじ　さんじゅっぷん
      JAWS ごご　にじ　さんじゅうぷん
      NVDA ごご　にじ　さんじゅっぷん
      ホームページリーダー ごご　にじ　さんじゅっぷん
      Net-Reader ごご　にじ　さんじゅっぷん

      一四時三〇分

      「一四時三〇分」の読み上げ一覧
      PC-Talker じゅーよじ　さんぜろふん
      JAWS じゅーよんじ　さんじゅうぷん
      NVDA じゅーよじ　さんじゅっぷん
      ホームページリーダー じゅーよじ　さんじゅっぷん
      Net-Reader じゅーよじ　さんぜろふん

      検証環境

      音声読み上げソフト

      Windows7、Internet Explorer9で以下の音声読み上げソフトを使用して検証を行いました。 設定はすべてデフォルトで使用しています。

      • 高知システム開発　PC-Talker　 バージョン2
      • エクストラ　JAWS バージョン11
      • NVDA　バージョン2011.1.1j(音声エンジン:ドキュメントトーカー)

      音声ブラウザ

      Windows XP、Internet Explorer6で以下の音声ブラウザを使用して検証を行いました。設定はすべてデフォルトで使用しています。

      • IBM　ホームページリーダー　バージョン3.04
      • 高知システム開発　Net-Reader　バージョン1.1

      更新履歴

      • 検証環境のNVDAに音声エンジン情報を追加しました。(2011年6月4日)
      • 日本の視覚障害者用ウェブ利用ソフトの機能調査の「日本語固有問題調査用テストファイル」を参考に表記を一部追加変更しました。(2011年6月4日)

      参考サイト

      ]]>       http://www.ict4everyone.jp/read/91.php http://www.ict4everyone.jp/read/91.php ウェブアクセシビリティ Fri, 03 Jun 2011 16:46:17 +0900       RAINMAN(レインマン)の活用事例を公開しました 発達障碍者のための時間管理支援ソフト「RAINMAN(レインマン)」の活用事例を公開しました。

      RAINMAN(レインマン)を実際に活用した以下の4つの事例を紹介しています。

      • A君の場合(中学2年生、高機能広汎性発達障害)
      • B君の場合(中学1年生、注意欠陥多動性障害)
      • グループ調理活動で使用した例
      • 受験勉強で使用した例

      活用事例:RAINMAN(レインマン)

      ]]>       http://www.ict4everyone.jp/know/info/90.php http://www.ict4everyone.jp/know/info/90.php Thu, 02 Jun 2011 18:33:58 +0900       総務省:みんなのアクセシビリティ評価ツールmiChecker (エムアイチェッカー)公開 総務省からみんなのアクセシビリティ評価ツール「miChecker」が公開されました。

      miCheckerで総務省サイトを検証している画面

      miCheckerは、以下のページからダウンロードできます。

      みんなのアクセシビリティ評価ツール： miChecker (エムアイチェッカー) Ver. 1.0 のダウンロードページ(外部サイト)

      miCheckerの概要

      最新のウェブアクセシビリティガイドライン「JIS X 8341-3:2010」を基に、ウェブページのアクセシビリティ検証を行うことができます。詳細レポートでは問題がある箇所が「問題あり」「問題の可能性大」「要判断箇所」「手動確認」の4種類に分類されます。
      詳細レポートの問題箇所の行を右クリックすると、該当するWCAG2.0の解説や実装方法のウェブページに移動することが可能で、より詳細な情報を入手しやすくなっています。

      その他「音声ユーザビリティ」フレームでは画像等の視覚的な情報やレイアウト要素を排除したプレビューが確認でき、また「ロービジョン」フレームでは「視力」「色覚異常」「水晶体透過率」を基にシミュレーション表示が可能です。

      miChckerは「アドバイザー」

      評価ツールというと、ボタンひとつですぐ適合不適合の一覧の結果がでるイメージですが、miCheckerはそうではありません。(これはウェブアクセシビリティの検証が、すべて機械的にできるものではないため、miCheckerに限ったことではありませんが)

      miCheckerは、機械的に判断できる問題箇所の指摘と、人が確認しないと判断できない箇所を指摘する「アドバイザー」的な役割を果たします。例えば画像にalt属性そのものが無いというような明確な問題は「問題あり」と指摘しますが、alt属性があったとしてもその内容が適切かどうかは「人が内容を確認して判断してください」というアドバイスが表示されます。
      それに基づいて「人が判断」をし、機械的なチェックとあわせて総合的に達成基準に適合しているかどうかの最終判断を「人」が行う必要があります。

      miCheckerを用いた試験の進め方

      miChckerのダウンロードファイルには、各種ドキュメントが同梱されています。

      • miCheckerを用いた試験手順書.pdf
      • miChecker達成基準別活用法.pdf
      • miChecker利用ガイド.pdf
      • ワークシート.xls

      これらのドキュメントは、miCheckerをどのようにの検証に活用してサイトを改善に導くか、チェックリストを作成するかという説明がされています。

      是非最初にこれらのドキュメントを読んでからmiCheckerを使用されることをお勧めします。

      ツールはアクセシビリティ取り組みの第一歩

      ウェブアクセシビリティガイドラインJIS X 8341-3を読み解くのは、かなりの労力と知識が必要になります。残念ながらmiCheckerを使ったからといって、これらの労力と知識が必要なくなるわけではありません。
      ただ、ツールというのは使いこなしていくうちに、何度も同じ指摘がされることでウェブアクセシビリティの習得がしやすくなります。今まで膨大な資料を一から勉強しはじめて挫折してしまった人も、このツールをきっかけにウェブアクセシビリティの知識と理解を深めていけたらと期待します。

      参考リンク

      みんなの公共サイト運用モデル改定版（2010年度）(外部サイト)

      ]]>       http://www.ict4everyone.jp/read/89.php http://www.ict4everyone.jp/read/89.php ウェブアクセシビリティ Thu, 02 Jun 2011 18:14:05 +0900       音声読み上げまとめ「日付」編 2011年6月4日更新

      日付に関する「音声読み上げソフト」「音声ブラウザ」での読み上げをまとめました。
      「 」内のカタカナ表記は、英語音声での読み上げ箇所を示しています。

      読み上げ例

      H23年1月20日

      「H23年1月20日」の読み上げ一覧
      PC-Talker 「エイチ トゥエンティスリー」ねん　いちがつ　はつか
      JAWS えいち　にじゅうさんねん　いちがつ　はつか
      NVDA えいち　にじゅうさんねん　いちがつ　はつか
      ホームページリーダー えいち　にじゅうさんねん　いちがつ　はつか
      Net-Reader 「エイチ　トゥエンティスリー」ねん　いちがつ　はつか

      2011年1月20日

      「2011年1月20日」の読み上げ一覧
      PC-Talker にせんじゅういちねん　いちがつ　はつか
      JAWS にせんじゅういちねん　いちがつ　はつか
      NVDA にせんじゅういちねん　いちがつ　はつか
      ホームページリーダー にせんじゅういちねん　いちがつ　はつか
      Net-Reader にせんじゅういちねん　いちがつ　はつか

      二〇一一年一月二十日

      「二〇一一年一月二十日」の読み上げ一覧
      PC-Talker にぜろじゅういちねん　いちがつ　はつか
      JAWS にせんじゅういちねん　いちがつ　はつか
      NVDA にせんじゅういちねん　いちがつ　はつか
      ホームページリーダー にせんじゅういちねん　いちつき　はつか
      Net-Reader にぜろじゅういちねん　いちがつ　はつか

      2011/01/20

      「2011/01/20」の読み上げ一覧
      PC-Talker にせんじゅういち　すらっしゅ　ぜろいち　すらっしゅ　にじゅう
      JAWS にせんじゅういち　すらっしゅ　ぜろいち　すらっしゅ　にじゅう
      NVDA にせんじゅういちねん　いちがつ　はつか
      ホームページリーダー にせんじゅういち　ぜろいち　にじゅう
      Net-Reader にせんじゅういち　すらっしゅ　ぜろいち　すらっしゅ　にじゅう

      2011/1/20

      「2011/1/20」の読み上げ一覧
      PC-Talker にせんじゅういち　すらっしゅ　いち　すらっしゅ　にじゅう
      JAWS にせんじゅういち　すらっしゅ　いち　すらっしゅ　にじゅう
      NVDA にせんじゅういちねん　いちがつ　はつか
      ホームページリーダー にせんじゅういち　いち　にじゅう
      Net-Reader にせんじゅういち　すらっしゅ　いち　すらっしゅ　にじゅう

      2011・1・20

      「2011・1・20」の読み上げ一覧
      PC-Talker にせんじゅういち　なかてん　いち　なかてん　にじゅう
      JAWS にせんじゅういち　なかてん　いち　なかてん　にじゅう
      NVDA にせんじゅういち　いち　にじゅう
      ホームページリーダー にせんじゅういってん　いち　にじゅう
      Net-Reader にせんじゅういち　いち　にじゅう

      2011.1.20

      「2011.1.20」の読み上げ一覧
      PC-Talker にせんじゅういち　ぴりおど　いち　ぴりおど　にじゅう
      JAWS にせんじゅういってん　いち　てん　に　ぜろ
      NVDA にせんじゅういってん　いち　てん　に　ぜろ
      ホームページリーダー にせんじゅういってん　いち　にじゅう
      Net-Reader にせんじゅういち　いち　にじゅう

      2011-1-20

      「2011-1-20」の読み上げ一覧
      PC-Talker にせんじゅういち　まいなす　いち　まいなす　にじゅう
      JAWS に　ぜろ　いち　いち　はいふん　いち　はいふん　に　ぜろ
      NVDA にせんじゅういち　まいなす　いち　まいなす　にじゅう
      ホームページリーダー に　ぜろ　いち　いち　の　いち　の　にぜろ
      Net-Reader にせんじゅういち　まいなす　いち　まいなす　にじゅう

      1/20

      「1/20」の読み上げ一覧
      PC-Talker いち　すらっしゅ　にじゅう
      JAWS いち　すらっしゅ　にじゅう
      NVDA いちがつ　はつか
      ホームページリーダー いち　にじゅう
      Net-Reader いち　すらっしゅ　にじゅう

      1.20

      「1.20」の読み上げ一覧
      PC-Talker いってん　に　れい
      JAWS いってん　に　ぜろ
      NVDA いってん　に　ぜろ
      ホームページリーダー いってん　に　ぜろ
      Net-Reader いってん　に　れい

      検証環境

      音声読み上げソフト

      Windows7、Internet Explorer9で以下の音声読み上げソフトを使用して検証を行いました。　設定はすべてデフォルトで使用しています。

      • 高知システム開発　PC-Talker　バージョン2
      • エクストラ　JAWS　バージョン11
      • NVDA　バージョン2011.1.1j(音声エンジン：ドキュメントトーカー)

      音声ブラウザ

      Windows XP、Internet Explorer6で以下の音声ブラウザを使用して検証を行いました。設定はすべてデフォルトで使用しています。

      • IBM　ホームページリーダー　バージョン3.04
      • 高知システム開発　Net-Reader　バージョン1.1

      更新履歴

      • 検証環境のNVDAに音声エンジン情報を追加しました。(2011年6月4日)
      • 日本の視覚障害者用ウェブ利用ソフトの機能調査の「日本語固有問題調査用テストファイル」を参考に表記を一部追加変更しました。(2011年6月4日)

      参考サイト

      ]]>       http://www.ict4everyone.jp/read/88.php http://www.ict4everyone.jp/read/88.php ウェブアクセシビリティ Wed, 01 Jun 2011 17:59:22 +0900       「ウェブアクセシビリティ」がデザインをダメにするってホント？ 「ウェブアクセシビリティに対応すると、デザインがね」

      という会話。よく耳にする言葉です。うーん、痛い、痛い。
      (ここでいうデザインは、「ビジュアルデザイン」を指しています。)

      そこで、ふっと疑問がわきます。
      「ウェブアクセシビリティを無視すれば、素晴らしいデザインができる」
      のでしょうか？

      そもそも、ウェブデザインって何？

      特にこれからウェブデザインを目指す方に向けてのメッセージとして
      今日はそんな疑問を私の大好きな「食べ物」に例えて説明してみます（笑）

      「料理」を食べる3つの要素

      当たり前のことですが、私たちは「おいしい」ものを食べたいと毎日考えています。
      「料理」はウェブサイトでいうと「コンテンツ」になります。
      最大の目的は「おいしい」料理を食べることです。

      そして、料理は「お皿」にのって出てきます。
      奥さんが手抜きでスーパーのプラスチック容器から料理を出すかもしれません。
      お店で数万円する高級なお皿にのって出てくるかもしれません。
      でも、同じ味なら当然高級なお皿にのって出てきたほうが「おいしそう！」となるわけです。
      これが「ウェブデザイン」のビジュアル的な要素です。

      さて、食べましょう、となったときに、フォークやスプーンなどが出てきます。
      要望によってお箸が出てきてもオッケー。
      これが「ウェブアクセシビリティ」の要素です。

      まとめると

      • まず、料理がおいしいこと。
      • 次に、その料理がさらにおいしそうに感じる演出をする。
      • そして、それをちゃんと食べれるようにすること。

      結局「ビジュアルデザイン」だけで、ユーザーのニーズを満たすことはできないということです。

      「見ていいけど食べちゃダメ」そんな料理出してませんか？

      もしあなたが「皿」そのものをデザインして売るような芸術家だったら、それはそれでよいでしょう。
      でも、ウェブデザイナーがいくらビジュアル的にすごいサイトを作っても、そのデザインに直接お金を払ってくれるユーザーはいません。
      利用者はその先の「コンテンツ」に価値を見出しそれを「入手」できることを目的としていて、ビジュアルデザインは「その最大のひき立て役」です。

      さらにもうひとつ。
      「デザイン」＝「設計」です。
      「デザイン」＝「ビジュアル」ではありません。
      コンテンツを設計するのも「デザイン」、アクセシブルに設計するのも「デザイン」です。

      「ウェブアクセシビリティがデザインをダメにするってホント？」
      ではなく
      「デザインがウェブアクセシビリティをダメにするってホント？」
      は、「ホント」かな？

      総合的に「デザイン」できるウェブデザイナーさんがたくさん育ってくれることを切に願いながら、スーパーのパックからお皿に移し替えるわたしでした。

      ]]>       http://www.ict4everyone.jp/read/86.php http://www.ict4everyone.jp/read/86.php ウェブアクセシビリティ Fri, 27 May 2011 20:11:55 +0900       手書き文字で会話ができる「スピーチサポートDS」発売されました みんなのＩＣＴの法人会員「プロジェクトゆうあい」（外部サイト）が監修したコミュニケーションソフト「スピーチサポートDS」がニンテンドーDSiウェアとして発売されました。 ニンテンドーDSiやDSiLLで使うことができます。
      声のでない方、聴覚障碍の方などのコミュニケーションにも役立つ便利なソフトです。
      手書き文字の入力、50音入力、携帯電話入力という3つの方法のいずれかで文章を作ると、DSｉの声で読み上げることができます。

      「スピーチサポートDS」は便利なだけではありません。
      スクリーンに文字や絵を描くと、同じソフトの入った別のDSiに、その文字、絵がリアルタイムで見えてきますので、面白イラストを描くなど新しい楽しみ方ができます。
      ダウンロード機能で、ソフトを入れていないDSまたはDSiともチャット機能を楽しめるのも魅力です。

      ソフトはインターネットに接続されたニンテンドーDSiから、ニンテンドーDSiショップからのみご購入できます。500DSiポイント（500円）です。購入方法（外部サイト）

      詳しくはスピーチサポートDS（外部サイト）をお読みください。動画もあります。

      以上です。

      ]]>       http://www.ict4everyone.jp/know/info/78.php http://www.ict4everyone.jp/know/info/78.php Mon, 11 Apr 2011 01:58:45 +0900