メルマガ第64号を発行しました!

こんにちは!2015年4月22日(水)にAccSellメール・マガジン第64号を発行しました!

[連載]中根雅文の「全盲のコンピューター利用に関する四方山話」
第63回: frameとtable
[連載]植木 真の「こんなブログ記事見つけました!」
第22回: 7 Things Every Designer Needs to Know about Accessibility

「アフォーダンス」って言葉を初めて聞いたとき、「あほーダンス(アホな子が踊っている姿)」としか認識でなくて、本来の意味を理解するのにめっちゃ時間がかかったことを思い出しました。

[連載]植木 真の「こんなブログ記事見つけました!」
第22回: 7 Things Every Designer Needs to Know about Accessibility

デザイナーが知っておくべき7つのこと

今回ご紹介するのは、こちら。

「デザイナーがアクセシビリティについて知っておくべき7つのこと」といった感じのタイトルの記事です。デザイナーさん向けに、アメリカの「リハビリテーション法508条やW3Cの「WCAG 2.0」などの要件を最低限クリアすべきことを分かりやすく解説しています。ボリュームは結構ありますが、手書きのイラストや実際の画面のスクリーンショットなどをふんだんに使っているので、意外とスラスラと読めてしまいます。

今回も原文は英語なので、ざっくりした日本語訳をしながら、一緒に読み進めていこうと思います。

1. Accessibility is not a barrier to innovation.

まず、1つめは「アクセシビリティは、イノベーションのバリアではない。」です。

原文:

Accessibility will not force you to make a product that is ugly, boring, or cluttered. It will introduce a set of constraints to incorporate as you consider your design. These design constraints will give you new ideas to explore that will lead to better products for all of your users.

ざっくり日本語訳:

アクセシビリティはあなたのデザインを、醜くしたり、つまらなくしたり、乱雑なものにしたりすることを強いることはありません。ただ、あなたがデザインを考えるときには、いくつかの制約のようなものがあるかもしれません。そういったデザインの制約は、あなたのデザインを利用するすべての人びとにより良いモノを提供する、新しいアイデアをあなたにもたらすことでしょう。

「アクセシビリティ」と聞いて身構えてしまうデザイナーさんがいるとしたら、自分が好きなようにデザインできなくなる...という受け止め方をしているのかもしれませんね。

しかし、何のためにデザインするのか? 誰のためにデザインするのか? それを実際に使うのは誰か? ということを冷静に考えてみると、自ずと答えが出てくるはずです。

ここでは、まず最初に「あなたがデザインしたものを使う様々なユーザーのためにデザインしよう」ということが書かれています。具体的に、障害のある人、若い人、年配の人、パワーユーザー、そうでもない人などを挙げて、そういった人たちに使ってもらえるように、いわゆるアクセシビリティのガイドラインをデザインの制約として捉えるよりも、むしろ進んで利用しようと呼びかけています。

たしかに、アクセシビリティを品質基準にすると、つまらないページデザインになってしまうと "思い込んでいる" デザイナーさんにたまにお会いすることがあります。まだまだアクセシブルなWebサイトの事例が少ないので、なかなかこの思い込みを払拭できていなかったりもするのですが、最近いいなと思ったWebサイトをご紹介しておきましょう。

カナダとアメリカを拠点にWebアクセシビリティのコンサルティングサービスなどを提供しているSimply AccessibleのWebサイトです。見た目はポップな感じで、しっかりとアクセシブルに作られています。コンテンツも役立つ内容が満載ですので、お時間のある時に一度ゆっくりご覧いただけたらと。

2. Don't use color as the only visual means of conveying information.

さて、2つめからは、具体的なポイントのお話が続きます。「情報を伝える唯一の手段として色を使わないようにしよう」ということで、色を使うときに気を付けたいポイントです。

PayPalのエラー画面を例として、実際の画面をグレースケールにしたもの、そして本来の色が付いた画面のスクリーンショットが使われています。

原文:

There are many acceptable ways to make this form visually accessible. You could put the red triangle icon in all of the error fields. You could use text to indicate and explain why a given field is in error. You could use tooltips, thick borders, bold text, underlines, italics, etc. The choices are infinite, but the only rule is to use more than color alone.

ざっくり日本語訳:

このフォームを視覚的にアクセシブルにする方法はたくさんあります。赤い三角のアイコンをすべてのエラー箇所に置くとか。なぜエラーなのかを説明するテキストを入れるとか。他にも、ツールチップ、太いボーダー、太字のテキスト、アンダーライン、イタリックの書体、などなど。選択肢は無限にありますが、唯一のルールは色以外の何かを併用するということです。

色だけで何かを示すと、その色を知覚できない人やスクリーンリーダーを使用している人には、そのことが伝わりません。モノクロでプリントアウトしたときにも同じことが言えるかもしれません。ポイントは、いろいろな利用環境を想定して、より多くの人に伝わるようにすることですよね。

さて、このPayPalのエラー画面、あなたならどう改善しますか?

3. Ensure sufficient contrast between text and its background.

色に関する重要なポイントをもう一つ。「文字とその背景のコントラストを十分に確保すること」です。

原文:

Explore using high contrast color combinations. Designers who have gone through this exercise are often surprised by how much they prefer higher contrast designs. I am confident you too will find that displaying text using the minimum allowable contrast will not detract from your products.

ざっくり日本語訳:

コントラストの高い色の組み合わせを探してみよう。これを実践してみたデザイナーさんは、実は自分自身がコントラストのより高いデザインを好むことに気づいて驚くことがよくあります。最低限のコントラストを確保した文字の色を使うことは、あなたがデザインするモノの魅力を損なわないことだと、きっとあなたもそう思うはずです。

これは興味深いですね。デザイナーさんは食わず嫌いになっているだけってことでしょうか。機会があったら確かめてみたいですね。ま、ワタクシは老眼が進んでいますので、コントラストの弱い文字には迷わず「喝! (c)張本勲」です(笑)

でもね、自分がそうなってきたからかもしれませんが、コントラストの弱い文字のデザインとかを見かけると、これをデザインした人はユーザーのことを何も考えていないんだな...と思ったり、思わなかったり、ラジバンダリ。

4. Provide visual focus indication for keyboard focus.

4つめ、これ大事です。むちゃくちゃ重要です。「キーボード・フォーカスのフォーカス・インジケータは表示させること」です。

つづきはメルマガで……。

comments powered by Disqus