Smart Communication Design Company
ホーム > ナレッジ > Blog > アクセシビリティBlog > 2010年4月 > 「辻ちゃん・ウエちゃんのアクセシビリティPodcast」第35回

アクセシビリティBlog

Webサイトのアクセシビリティを高めるための方法や国内外の関連情報など、さまざまな角度からWebアクセシビリティに関する話題をご提供していきたいと思います。

当Blogの更新情報は、Twitter経由でも配信しています。興味のある方はぜひ、@mlca11yをフォローしてください。当Blogへのご意見・ご質問は、Twitter経由でも受け付けております。

2010年4月12日

「辻ちゃん・ウエちゃんのアクセシビリティPodcast」第35回

アクセシビリティ・エンジニア 中村

アクセシビリティPodcast 第35回をお届けいたします。今回は、JIS X 8341-3 改正原案の中から、色に関する達成基準をご紹介いたします。どうぞお楽しみください。

概要

第35回では以下の内容についてお送りいたします。

  • 7.1.4.1に「色の使用に関する達成基準」

Podcast内で紹介している達成基準はWCAG 2.0(W3C勧告)日本語訳 [原題:Web Content Accessibility Guidelines (WCAG) 2.0]のサイトよりご確認いただけます。よろしければ合わせてご覧ください。

なお、話題にあがっているサイトなどのリンク先につきましては、「全文を読む」のリンクよりテキスト化された内容でご確認ください。

聴取方法のご案内

ブラウザ上で再生される方は、下記のFlash Playerをご利用ください。

ダウンロードしてその他のプレイヤーで再生される方は、ダウンロードボタンよりmp3ファイルをダウンロードの上、ご利用ください。

音声がご利用いただけない環境の方には、本エントリーの最後にテキスト化された内容を提供いたしております。

また、iTunesなどRSS対応のソフトウェアをご利用の方には、辻ちゃん・ウエちゃんのアクセシビリティPodcast用RSSも提供いたしております。

なお、ご意見、ご感想などございましたら、当エントリーのコメント入力フォームよりお寄せください。たくさんのご意見をお待ちいたしております。

それでは、どうぞお楽しみください!


「辻ちゃん・ウエちゃんのアクセシビリティPodcast」第35回MP3ファイルのダウンロード

「辻ちゃん・ウエちゃんのアクセシビリティPodcast」第35回 テキスト

二人:
辻ちゃん、ウエちゃんのアクセシビリティPodcast!2010!
辻:
はい、第35回目となりました、アクセシビリティPodcast、本日もミツエーリンクスのスタジオからお届けしてまいりたいと思います。わたしは、辻ちゃんこと、ミツエーリンクスの辻勝利です。そして、
ウ:
はい、ウエちゃんこと、インフォアクシアの植木です。
二人:
よろしくお願いします。
辻:
えー、実はですね、
ウ:
はい。
辻:
本日あの、ヒロちゃんがですね。
ウ:
はい。
辻:
ちょっと、お仕事の関係で、お休みなんです。だから今日はふたりで、熱く、熱く盛り上がっていきたいと、思います。
ウ:
お仕事の関係とかじゃなくて、
辻:
(笑)
ウ:
出演拒否なんじゃないの?
辻:
いやいやいやいや、そんなことないです。ない、ない、ない、ないはずです!はい。
ウ:
どうしても、全国1千万のヒロちゃんファンが今ごろ…
辻:
そう、泣いてますね。
ウ:
ブーイング、たれてると思うよ、たぶん。
辻:
はい。本日も、よろしくお願いします。
ウ:
華麗にスルーされた…
辻:
いやいやいや。
ウ:
はい。
辻:
本日なんですけれども、
ウ:
はい。
辻:
「ウエちゃんが教えてあげる」ということでですね、
ウ:
はい。
辻:
引き続き、JIS X 8341-3
ウ:
はい。
辻:
について、紹介していただきたいと思います。
ウ:
はい。
ウエちゃんが教えてあげる
ウ:
うーん。
辻:
いやー、何度聞いても、いいですね。
ウ:
うーん。
辻:
あのですね、僕、このまえ、
ウ:
はい。
辻:
ひさしぶりに会った友達がいるんですけれども、
ウ:
はいはい。
辻:
「あー、辻さん、Podcast、いつも聴いてますよ」
ウ:
ほう。
辻:
「楽しみに」って言ってくれてですね、
ウ:
ほう。
辻:
すっごいうれしかったんですけど、
ウ:
ほう。
辻:
「あのー、そういえば」
ウ:
うん。
辻:
「植木さんの」
ウ:
うん。
辻:
「『教えてあ・げ・る』って、ぞくっときますよね」って言ってまして。
ウ:
なるほど。
辻:
確かにこう、なんか、収録してても、背中のほうからぞくぞくっとこう、きますね。
ウ:
なんかねー、全国300万いたファンが、100万人くらいに減ったらしいんだけどね。
辻:
(笑)大丈夫ですよ。
ウ:
ちょっとね、やっちゃったかなっていう。
辻:
いやいやいや、もうこれぜひですね、名物ロゴなので、
ウ:
(笑)
辻:
よくわかんないけど。今日も「ウエちゃんが教えてあげる」ということでですね、
ウ:
はい。
辻:
よろしくお願いいたします。
ウ:
はい。
辻:
今日は、何のお話しを。
ウ:
えーと今日はですね、辻ちゃんからのリクエストもありまして、色に関する達成基準を紹介しようかなと。
辻:
あ、色について色々教えていただけるわけですね。
ウ:
……。はい。まあ、そうくると思いましてですね、
辻:
はい。
ウ:
華麗にスルー返しさせてもらいますけれども。
辻:
はい。
ウ:
えーと、2004年版ではですね、5.5(a)で「ウェブコンテンツの内容を理解・操作するのに必要な情報は、色だけに依存して提供してはならない」と。
辻:
はい。
ウ:
いう、達成基準がありました。で、今回の改正原案を見るとですね、同じように7.1.4.1に「色の使用に関する達成基準」というのがありまして、
辻:
はい。
ウ:
これは等級シングルAなんですけれども、ちょっと読んでみますね。
辻:
はい。
ウ:
「情報を伝える、なにが起こるか、またはなにが起きたかを示す、利用者の反応を促す、または視覚的な要素を区別する視覚的な手段として、色だけを使用してはならない」と。
辻:
なんか、長くなりましたね。
ウ:
長くなりましたね。
辻:
はいはいはい。
ウ:
で、要はこれは「色だけを使用してはならない」ということをいってまして、まあ確かに達成基準の文面は、いろんなケースを細かく挙げているんですが、
辻:
はい。
ウ:
内容的には2004年版と変わらないということで、色だけを使って情報を伝えたりですとか、なにが起こるかとか起きたかとか、利用者の反応を促すとか、そういうことをしないようにしましょうと。
辻:
はい。
ウ:
いうことで、当然あの、色を使うこと自体は、色を認識できるユーザーからすると、非常に有効な手段なので、
辻:
そうですね。
ウ:
色を使うこと自体禁じるわけではないんですけれども、色だけじゃない、ほかの方法でも、あわせて同じことを伝えましょうと。
辻:
はい。
ウ:
いうものですね。で、たとえば、よくあるのが「必須項目は赤字です」っていってですね。
辻:
あ、はい。
ウ:
入力フォームなんかで、必須項目だけ赤字になってるとか、あるいは同じように「赤字はエラーです」とかですね。
辻:
うーん。
ウ:
あと、グラフの画像なんかでたまにあるのが、たとえば「赤が東京の売り上げ、青が大阪の売り上げ」みたいなですね。
辻:
あー。これは確かに、ありますね。
ウ:
で、まあ、そういった色だけだと、その色がわからないユーザーには情報が伝わらなくなってしまうので、それ以外の情報、テキストで何か必須項目であれば(必須)って書くとかですね、わかるように書きましょうと。
辻:
はい。
ウ:
いうやつなんですが、ちなみに辻ちゃん、普段いろんなウェブページ
辻:
ええ。
ウ:
使ってて。
辻:
はい。あのですね、
ウ:
うん。
辻:
最近は、「赤字は必須項目です」っていうような表現は、前ほど見なくなったんじゃないかなと思うんですよ。
ウ:
確かにそうですね。
辻:
必須とか*とか、
ウ:
うん。
辻:
なんかスクリーンリーダーでも読み上げ可能な形式で
ウ:
うん。
辻:
情報が提供されているように感じる機会が増えたんですけれども、
ウ:
うん。
辻:
やっぱり、さっき例に出していただきました、フォームのエラー表示ですね、どこが間違っているかっていうのを色だけで表現しているケースが
ウ:
あー。
辻:
まだまだあるような気がするんですね。
ウ:
なるほどですね。
辻:
はい。
ウ:
で、この達成基準を満たすことのできる実装方法というのがですね、WCAG 2.0のUnderstanding文書でいくつかリストアップされてるんですけれども、
辻:
はい。
ウ:
テキストでも同じ情報が得られるようにしましょうという話でしたり、あとですね、ちょっとこれは、2004年版では明確に言及されてなかったやつなんですが、パラグラフの文中に、テキストリンクが入っている場合。
辻:
はい。
ウ:
たまにありますけども、よくその、リンクって基本的には、通常デフォルトではアンダーラインが、
辻:
ああ
ウ:
出るんですけれども。
辻:
はいはいはい。
ウ:
スタイルシートとかを使って、アンダーラインを消すっていうことをする場合がありまして、スクリーンリーダーを使っている場合は、リンクはリンクで認識してもらえると思うので、
辻:
はい。
ウ:
問題ないと思うんですけど、画面見てる場合はですね、アンダーラインがあれば、「あ、ここリンクだ」ってすぐわかるんですけど、
辻:
うんうん。
ウ:
それがないと、色が明確に区別つくような色になってれば、もちろん気づけるとは思うんですが、
辻:
はい。
ウ:
やっぱり気づきづらいと。
辻:
うん。
ウ:
いうことがありまして、そういう場合にはですね、コントラスト比
辻:
はい。
ウ:
を、3.1以上にすると。
辻:
3.1以上。
ウ:
つまり、リンクじゃないテキストの色、まあだいたい黒だと思うんですけども、
辻:
はい。
ウ:
それと、テキストリンクの文字色のコントラスト比を3:1以上にする、というのが
辻:
はい。
ウ:
ひとつ加わってます。
辻:
これ、具体的な数値がでてきてますね。
ウ:
そうですね。で、逆に失敗例として挙げられているものがいくつかあるんですけれども、
辻:
はい。
ウ:
やっぱりそれは、今のまさに逆で、色がわからないと、リンクかどうかの区別がきちんとつけられないと。
辻:
はい。
ウ:
いう場合ですね。まあ、よくあの、マウスポインタを置くとアンダーラインが出てくる、みたいな、
辻:
あー。
ウ:
そういうスタイルを指定することもあるんですけれども、
辻:
はいはいはい。
ウ:
それも、それだけじゃダメですと。いうことで、3:1以上のコントラスト比を、テキストリンクのテキストと、リンクじゃないテキストの文字色でつけなきゃいけないと。
辻:
はい。
ウ:
いうのがあります。で、あと画像でですね、やっぱりさっきのグラフなんかでよくあるんですけど、ふたつのデータを並べて比較するときに、さっきはまあ、赤色が何々、青色が何々、っていう例を挙げましたけれども、
辻:
はい。
ウ:
まず、やることがふたつあって、ひとつは画像上でどっちがどっちなのかわかるようにすると。
辻:
はい。
ウ:
よく引き込み線をつけて、こっちが東京、こっちが大阪、とかですね。
辻:
ああー。
ウ:
あとまあ、棒グラフだったら棒グラフの棒のところにパターンといって、模様をつける。たとえば、片方は斜線が入っていて、
辻:
はい。
ウ:
片方はドットが入ってる、みたいな。
辻:
あー、なるほど。
ウ:
感じで、色がわからなくても、そのパターン、模様を見れば違いがわかる、とかですね。
辻:
はい。
ウ:
そういう手法が今までにも紹介されてきていると思うんですが、まあそういうことをやりましょうと。
辻:
はい。
ウ:
で、もうひとつ、そのグラフの画像の代替テキスト。こっちでも、ちゃんとそれがわかるような書き方をしましょうと。
辻:
はい。
ウ:
いうことで、当然あの、代替テキストでどっちがどっちかわからないと意味がありませんので、
辻:
そうですね。
ウ:
まあグラフの場合にはね、データテーブルをすぐ近くにおいて、そっちで同じデータを示すという方法もありますけれども、
辻:
はい。
ウ:
まあいずれにしても、色だけで情報を伝えると、その色がわからないユーザーには情報が伝わらないので、プラスなにかしらの方法で色がわからなくても同じ情報が得られるように、見た目も、それから代替テキストも両方気をつけましょうと。
辻:
はい。
ウ:
いうのが、この達成基準になります。
辻:
はい。
ウ:
まあ、あんまり2004年版と比較して新しいことってないので、あるとしたらさっき言った、リンクとリンクじゃないテキスト。もしアンダーラインを引かないのであれば、3:1以上のコントラスト比をつけましょうと。
辻:
はい。
ウ:
いうのがありますけれども、それ以外は特に新しいことはなく、2004年版と同じ考え方でこの達成基準を満たしていけるかなと。いう感じですね。
辻:
なるほど。
ウ:
はい。で、もういっこ。これはダブルAになるんですけれども、
辻:
はい。
ウ:
コントラストの達成基準もありまして。
辻:
コントラスト。
ウ:
はい。で、これも2004年版にですね、ふたつほど、該当する要件があったんですが、ひとつは5.5(c)で、「画像などの背景色と前景色とには、十分なコントラストをとり、識別しやすい配色にすることが望ましい」と。
辻:
うーん。
ウ:
で、もうひとつが、5.6(c)なんですけれども、こちらでは「フォントの色には背景色などを考慮し、見やすい色を指定することが望ましい」と。
辻:
なかなかこう、抽象的な表現で
ウ:
そうなんですね。
辻:
みなさん迷う…、
ウ:
はい。
辻:
ところですよね。
ウ:
で、2004年版では「十分なコントラストをとり」とかですね。
辻:
うん。
ウ:
「見やすい色を指定しましょう」とかですね。そんな言い方をしてるんですが、これが今度の改正原案を見ると、「コントラスト比」という基準が持ち込まれてまして、
辻:
はい。
ウ:
「少なくとも4.5:1のコントラスト比がなくてはならない」と。
辻:
こちらも具体的な数値で
ウ:
そうですね。
辻:
示されていると。
ウ:
はい。で、まあ、企業名のロゴだとか、ブランド名のロゴなんかに関しては、これは対象外になってまして、
辻:
はい。
ウ:
あと同じように、装飾を目的にした画像に関しても対象外になってます。
辻:
はい。
ウ:
で、とにかく「情報を伝えている文字情報」
辻:
うーん。
ウ:
であれば、それがテキストであろうと、画像にある文字であろうと、同じようにこの「コントラスト比が4.5:1」以上なければならないと。
辻:
はい。
ウ:
いうことになってまして。まあこれに関してはですね、4.5:1というコントラスト比の基準が示されているということもあって、2004年版ではできなかったんですが、今回の改正版からは、チェックツールを使ってチェックすることができるようになります。
辻:
はい。
ウ:
実際にあの、インフォアクシアのサイトでダウンロード配布している「カラーコントラストアナライザー
辻:
あ、はい。
ウ:
というツールがあるんですが、それなんかを使ってもらうとですね、この背景色とこの文字色の場合、コントラスト比がいくつあるかっていうのが計算式つかって数字がでてきますんで、
辻:
はい。
ウ:
そのときに4.5あればOKだけれども、
辻:
うん。
ウ:
4.5なかったら少し色合いを変えて、4.5以上あるような組み合わせにしましょうと。
辻:
はい。
ウ:
いうことで、まあデザイナーさんからするとですね、使える色が限られてきちゃうとかですね、
辻:
ああ、確かに。
ウ:
ちょっとこう、制約が増えたな、と思われることがあるかもしれないんですが、
辻:
うーん。
ウ:
基本的には、情報を伝えてる文字情報が対象なので、
辻:
はい。
ウ:
より多くのユーザーに、きちんと、読みやすいかたちで文字情報を伝えるということを前提にすれば、ぜひこの4.5:1というコントラスト比も気をつけてもらえたらなと。まあダブルAではあるんですけれどもね。
辻:
はい。
ウ:
可能な限り、これはシングルAで適合しようという場合でも、この達成基準はちょっと意識してほしいかなーと思ったりしてます。
辻:
はい。やはりこう、具体的な数値で指定されてることで、コンテンツを作る側のひとたちも、検証がしやすくなりますよね。
ウ:
そうですね。たぶんあの、たとえば今まで、2004年版だと「十分」だとか「見やすい」としか言ってなかったんで、たとえばデザイナーさんが「これで見やすい、十分だろう」と思った色が、クライアントさんからは「ちょっと見づらいんじゃないの」と言われたりとか。
辻:
うーん。
ウ:
たぶんそういう、どうしてもこう主観になってしまうので、
辻:
はい。
ウ:
そういうやりとりがあったと思うんですけれども、まあ今回からは、誰がチェックしても同じ数字が出てきますんで、
辻:
はい。
ウ:
その数字が、4.5:1以上であればOKだし、4.4とか4.0とかだったらダメだっていうことで、○×の判断がしやすくなるっていうところはあるでしょうね。
辻:
はい。
ウ:
ただまあ、コントラスト比は画面との距離だとか、
辻:
うんうん。
ウ:
あとは部屋の明るさだったり。
辻:
ああ、確かにね。
ウ:
モニターの明るさだったり。
辻:
はい。
ウ:
いろんな要素で変わってくるので、結構4.5:1っていっても、見た目には「これ十分コントラスト比あるんじゃないの?」っていうものも、4.5なかったり、っていうものはたまにやっぱりあります。
辻:
ああ。
ウ:
あるんですけど、これはまあひとつの目安として今回示されましたので、
辻:
はい。
ウ:
まず4.5:1というコントラスト比で、色の組み合わせ、カラースキムを、特にビジュアルのデザインをするかたは、考えてみてもらうといいかなと思いますね。
辻:
はい。
ウ:
はい。
辻:
ということで、今日は色について色々お伺いしてきたわけなんですけれども。
ウ:
色について、色々、と。
辻:
(笑)なんかそんな意味深な言い方しないで。
ウ:
いや、いちおう、ひろっといたほうがいいかなと思って。
辻:
あ、恐縮です。ありがとうございます。皆さまの制作の現場でお役立ていただければなと思います。
ウ:
はい。
辻:
ということで、アクセシビリティPodcast、本日は「教えてウエちゃん」をミツエーリンクスのスタジオからお届けしてまいりました。今日は色について色々お伺いしてきたわけなんですけれど、人生色々ということでですね、皆さん色々研究して、
ウ:
アクセシビリティも色々ありますが、
辻:
(笑)。はい、いただければなと、思います。
ウ:
現場で色々考えて、色々頑張っていきましょう、と。
辻:
はい。
ウ:
はい。
辻:
アクセシビリティPodcastでは、引き続き皆さまからのご意見、ご感想などをお待ちしています。このBlogへのコメントまたは、エーイチイチワイ、アットマーク、ミツエードット、シーオードット、ジェイピー。エーイチイチワイ、アットマーク、エム、アイ、ティー、エス、ユー、イー、ドット、シーオードット、ジェイピー、(編注:a11y@mitsue.co.jp)までお寄せください。そして、アクセシビリティPodcastを含むアクセシビリティBlogでは、新しいコンテンツが更新されるたびに、twitterでつぶやきを行っております。アットマーク、エムエルシー、エーイチイチワイ。アットマーク、エムエルシー、エーイチイチワイをtwitterでフォローしていただきますと、コンテンツが更新されるたびに、皆様に情報をお伝えいたします。(編注:MLC A11y Team (mlca11y) on Twitter)そして、この@a11yでも、皆様からのご感想などをお受けしたいと思います。ぜひ、こちらのコメントや、メールアドレスとあわせてご利用いただければな、と思います。
ウ:
はい。
辻:
それでは、
二人:
アディオス、アミーゴース!

コメント

いつぞやずっと前にコメントさせていただきました、高森と申します。

いつも拝聴させていただいておりまして、何か質問したいしたいと思っていたのですが、毎回内容が充実されていてかえって質問することがないような状態でした(笑)

でも今回webアクセシビリティについて質問したいことを見つけたので、コメントで質問させていただきたいと思います。

Ajaxでの機能実装が増えたことで一般ユーザーには快適なことが多かったりしますが、ひとつ気になったことがあります。

私は健常者なのですが、webアクセシビリティに興味があって時おりスクリーンリーダーや音声ブラウザを使ってみたりしています。その中で、Javascript等を使ってページ内の移動をスムーズにする機能(ナビゲーションスキップのリンクや、ページ下の「ページの先頭へ戻る」リンクなど)が増えていますが、これを音声ブラウザで読んだところ、見た目上はスムーズな移動がされていますが、読み上げ上は移動していないことが分かりました。

全ての音声読み上げソフトが当てはまるかどうかは分かりませんが、HPリーダーとNVDAで試してみたところ同じ結果でした。

これだと、視覚障碍者用に設置したナビゲーションスキップの機能なども同様に機能しないため、意味をなさなくなってしまいます。

とはいえ、ページ内をスムーズにスクロールする機能は人によっては親切な機能だとも思うので、単純に機能を削除してしまうのももったいない気がします。

これについて良い解決策などがありましたら教えていただきたいです。長文になってしまい申し訳ありませんが、どうぞよろしくお願いいたします。

Posted by: 高森 : 2010年5月 6日 08:39

高森様

ご質問をいただきまして、どうもありがとうございました。

ページ内リンクに関しましては、実装方法や、スクリーン・リーダーや音声ブラウザによって、挙動に違いがあるかと思います。そのため、ホームページ・リーダーやNVDAが、ページ内リンクでの移動に対応していないわけではなく、私もいくつかのケースで、実際にページ内リンクが機能する例を確認しております。

上記のような背景から、良い解決策をお伝えするのが難しいのですが、ご参考になりましたら幸いです。
引き続き、アクセシビリティPodcastをどうぞよろしくお願いいたします。

Posted by: アクセシビリティ・エンジニア 辻 : 2010年5月 6日 15:52

ミツエーリンクスでは、WCAG準拠JIS X 8341-3対応をはじめ、さまざまなWebアクセシビリティ関連サービスをご提供しています。是非アクセシビリティのページをご覧いただき、お気軽にお問い合わせください。

Pick Up