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

アクセシビリティBlog

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

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

2008年2月8日

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

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

アクセシビリティPodcast、第10回をお届けいたします。今回は第1回以来の長編ということで、前後編に分けてお送りいたします。まず、前半はWeb制作の現場で使える便利なテクニック、というテーマでのトークをお届けいたします。

概要

第10回 前編では、CSSに関する制作者向けのテクニックについての話題を扱っています。

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

聴取方法のご案内

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

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

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

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

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

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


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

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

植木、辻(以下、二人)
辻ちゃん、ウエちゃんのアクセシビリティPodcast、シーズンツー~!(拍手)
辻:
いやー、いよいよ第10回になりましたね。
植木(以下、ウ):
はい。
辻:
アクセシビリティPodcast。本日もお届けしてまいりたいと思いまーす。
ウ:
はい。
辻:
わたしは、ミツエーリンクスの辻ちゃんこと、辻勝利です。
ウ:
はい、えー、ウエちゃんこと、インフォアクシア植木です。よろしくお願いします。
辻:
よろしくお願いします。
ウ:
はい。いやー、もうあれだね、2月に入ってー、街はすっかりバレンタインムード一色って感じだね。
辻:
あー・・・そうですよね。
ウ:
ね。
辻:
あのー、バレンタインっていうと、
ウ:
うん。
辻:
チョコ募集中なんですよ、僕。あのー、大好きなんで。
ウ:
辻ちゃん?
辻:
はい?
ウ:
つじちゃん・・・? チョコ募集中?(笑)
辻:
(笑)はい。
ウ:
まだチョコ食べるの?
辻:
はい。
ウ:
もーう・・・。そんなことさ、Podcastで言っちゃったら、まずいんじゃないの?
辻:
え?
ウ:
奥さんにばれちゃうよ?
辻:
いやいやいやいや、バレンタインデーだけに、ばれんタイ!
ウ:
九州弁?
辻:
はい。あ、僕、長崎出身なんで。
ウ:
ありがとうございます。さあ、そういうわけでございましてですね、えー、今日は、わたしがメインでお届けしてまいります。
辻:
今回は内容を前編と後編に分けてお送りいたします。まずは、制作者向けのテクニックをご紹介して、そして、今回アクセシビリティPodcastの新コーナー、
ウ:
はい。
辻:
Listener's Voice(リスナーズボイス)もお届けいたしますので、最後まで楽しんでいただきたいと思います。
ウ:
では、制作者向けテクニックからまいりましょう。えー、CSS、を今日は取り上げたいと思います。
辻:
カスケーディング・スタイルシート(Cascading Style Sheets)ですね。
ウ:
そうです。
辻:
はい。
ウ:
CSSというとですね、えー、アクセシビリティのガイドライン、例えば、JISのX 8341-3では、えーと、5.2のbですね、えー、ま、見た目の表現に関するものは、スタイルシートを使って、指定しましょうと、いうのと、それから、スタイルシートをオフにしたときでも、情報の閲覧とか、えー、機能の操作に、えー、支障がないようにしましょうと、いうガイドラインがあったりするわけなんですが、
辻:
はい。
ウ:
えー。CSS、というとですね、やっぱり、よく聞かれるのが、えー、画面見てるユーザーには必要ないから表示したくない、だけど、えー、音声読み上げを聞いてるユーザーには補足してあげたい情報があると、いうときに、スタイルシートをつかえないかと、いうのがあってですね、よく使われるものといえば、辻ちゃん。
辻:
display:none; ですよね?
ウ:
そのとおり。
辻:
はい。
ウ:
で、この、display:none; なんですけれども、ちょっとこれ、気をつけないといけないんですね。
辻:
あー、そうですよね。
ウ:
で、えー、実は音声読み上げを聞いてるユーザーのために、補足したい情報、なんですけれども、実は、音声ブラウザとかスクリーン・リーダーによって、ちょっとこう、読み上げ、の対応が違ってると、いうような、えー、ところもありまして、
辻:
はい。
ウ:
このへんをですね、今回、えー、辻ちゃんがテストファイルで実際に、日本の主要なスクリーン・リーダー、とか音声ブラウザについて、検証してきてくれたと。
辻:
やりましたよー。今朝までかかって。
ウ:
おつかれちゃ~ん。
辻:
ありがとうございます。
ウ:
で、実際に、どのへんの、スクリーン・リーダー、音声ブラウザを使って検証してくれたんですか?
辻:
はい。えーと、もともとの英語版の検証結果、ってのが公開されてたんですけど、それに、さらに加えまして、まず音声ブラウザでは、ホームページ・リーダー、それからボイスサーフィン、えー、aiBrowser、そしてネットリーダーですね。スクリーン・リーダーでは、えー、PC-TalkerFocusTalkNVDAJAWSの検証を行いました。
ウ:
で、えー、結果からいうとですね、このdisplay:none; ってやつはですね、多くの読み上げソフトでは、読み上げられると。で、えー、読み上げられないものとしては、まずホームページ・リーダーのバージョン3.01と3.02、あとスクリーン・リーダーで、JAWSと、それからNVDA。この、えー、3つ、まあホームページ・リーダーはバージョン2つなんで4つ、かな。
辻:
はい。
ウ:
えー、これだと、display:none; は読み上げない、と。それ以外のものは、読み上げてくれる、という結果が出ましたと。
辻:
はい。
ウ:
で、おんなじように、display:none; に似たやつで、visibility:hidden; というのがありますけれども、
辻:
はい。
ウ:
これも、まったく同じ結果が出ましたと、いうことで、本来目的としては、音声読み上げを聞いているユーザーだけに聞いてもらいたい補足の情報なんですけども、JAWS、ホームページ・リーダーの3.01と3.02、あとまあNVDAですね、まあNVDAはまだ、えー、実際使ってるユーザーはほとんどいないと思うんですけれども、
辻:
そうですね。
ウ:
ホームページ・リーダーの3.01と3.02、この間のあの調査結果でも、一番、利用者数が多かった、
辻:
そうですよねー。
ウ:
音声ブラウザで、実は3.04ってのが最新バージョンで、3.04だと、読み上げるようになってるんですけれども、3.01と3.02が読み上げない、実はちょっとこう、肝でしてですね。で、えー、実際にユーザーの声を聞いてると、最新版は3.04なんですけれども、ちょっとやや、不安定なところがあるためにですね、ほとんどの人が3.01あるいは3.02のまま使用しているという実態があります。
辻:
バージョンアップ価格ってのがなかったんですよね。3.04て。
ウ:
あー、なるほどね。
辻:
そのへんもやっぱり、こう影響してるかも、ですね。
ウ:
なので、えー、実際にですね、えー、日本のユーザー、に、えー、聞いてもらうためには、display:none; とか、visibility:hidden; を使うのは、あまり方法としてはよろしくないと、いうことがいえると思うんですけれども。
辻:
はい。
ウ:
じゃ、どうすればいいかということなんですけれども、えー、まあご存知の方も多いと思うんですが、off-leftというテクニックがありまして、ま、これは、CSSを使ってですね、えー、その、画面には表示させたくない情報、表示しなくていい情報を、画面の外に位置を指定すると、いうやつなんですけども、これを使うとですね、えー、JAWSもホームページ・リーダーも、あとその他の日本のスクリーン・リーダー、音声ブラウザ、どれもこう、きちんと読んでくれると、いうことで、えー、音声読み上げを聞いてるユーザーには補足したいんだけれども、えー、画面には表示しなくてもいい情報、っていうのがもしあった場合にはですね、えー、display:none; とか、visibility:hidden; ではなくて、off-leftを使いましょう、と、
辻:
はい。
ウ:
いうのが、今回の辻ちゃんの検証結果からわかったと、
辻:
そうですね。
ウ:
いうことですね。
辻:
はい。そういえば、ウエちゃん。
ウ:
うん。
辻:
CSSといえばですね、僕ちょっと昔から気になってることがありまして、
ウ:
うん。
辻:
夜も眠れずに昼寝して、ご飯も食えずにパン食べて、ずーっと考えてたんですけど、
ウ:
ご飯は食べずに、パン食べる、結局食べてんじゃん、辻ちゃん。
辻:
おそらくdisplay:none; とか、あのー、off-leftとか使ってるんだと思うんですけど、CSS非対応のブラウザのためのメッセージ、ってあるんですよ。
ウ:
あー、たまにあるね。
辻:
はい。
ウ:
なんかあの、現在お使いのブラウザは、スタイルシート非対応のブラウザのため、
辻:
そうそうそうそう、
ウ:
どうたらこうたら、ってやつ、
辻:
はいはいはい。あのメッセージって、こう誰に向けたものなのかなぁって思って、
ウ:
あー・・・。
辻:
いや、あれをこう、スクリーン・リーダーのユーザーが聞くと、自分が使ってるブラウザって非対応なんだー、ってこう、不安に思うだけじゃないかな、って思うんですよ。
ウ:
結構あれだよね、いろんな銀行とか、病院とか、
辻:
ああ、ありますね、
ウ:
メーカーとか、いろんなサイトで結構最近、
辻:
そうそうそう、これ検索すると、いっぱい出てくるんですよ。
ウ:
うーん。きっとあれだろうね、テーブルレイアウトからCSSレイアウトに移ったときに、古いバージョンのブラウザとかだと、スタイルシートがかからずに、レイアウトが崩れたような感じに見えたりとか、したわけじゃない。
辻:
あー、はい。
ウ:
だから、そんときに、こう、その説明としてこういう文章を入れたのかな、っていう。
辻:
うーん。
ウ:
まあ、そういう事情もあるんだとと思うんだけど、まあでもね、スタイルシートっていう言葉自体、たぶん、一般の人はなんのこっちゃっていうね、
辻:
あんまりね、
ウ:
だから、もしこういう、文章を入れるんだとしたら、例えば、スタイルシートについて簡単に説明しているページを用意しておいて、そこでブラウザの設定でスタイルシートをオンにする方法だとか、
辻:
はい。
ウ:
スタイルシートに対応しているブラウザと、そのバージョンとか、なんかそういうこう、スタイルシートに関する情報を提供しているページへのリンク、くらいはなんか、提供してあげた方が、いいんじゃないかな。
辻:
そうですねー。
ウ:
で、これって、前、昔よくあった、フレーム対応のブラウザでご覧くださいとか、JavaScript非対応です、とか。あの、不親切なメッセージと変わんなくなっちゃうもんね。
辻:
そうですねー。結構多いんで、こう制作者の方には気をつけていただきたいな、って思ってます。
ウ:
はい。
辻:
はい。
ウ:
ということでですね、まあCSS使う場合には、こういうところにも気をつけて使わないといけない、ということで、CSSのテクニックについて、ちょっとお話をしました。
辻:
アクセシビリティPodcast前編、Web制作者の方向けのテクニック、いかがでしたでしょうか? 後半のListener's Voiceも是非お楽しみください。それでは、
二人:
アディオス、アミーゴス!

コメント

はじめて投稿させて頂きます。
最近こちらのPodcastingの存在を知り、RSSを登録したのですが、5回目からとなっていました。

できれば最初から聞きたいので1回目からのRSSデータを配信いただくことはできますでしょうか。

Posted by: つみれ : 2008年2月11日 16:51

つみれ様

コメントありがとうございます。

ご指摘いただきましたRSSフィードの配信方法につきまして、対応を終了いたしましたのでお知らせいたします。
ただ、ご利用中のFeedリーダーによりましては、情報を正しく取得できない可能性もございますので、もしまだ問題が解決しないようでしたら、ご使用中のFeedリーダーの名称をお知らせください。

引き続き、今後ともどうぞよろしくお願いいたします。

Posted by: アクセシビリティ・エンジニア 辻 : 2008年2月12日 14:56

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

Pick Up