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

聴取方法のご案内

ブラウザ上で再生される方は、下記の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-Talker、FocusTalk、NVDA、JAWSの検証を行いました。

ウ：

で、えー、結果からいうとですね、この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回目からとなっていました。

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

つみれ様

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

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

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

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

Pick Up

• アクセシビリティ

  Webサイトのアクセシビリティ対応状況の診断から構築・運用支援まで幅広く対応、障害者差別解消法への対応が気になるかたにも