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

聴取方法のご案内

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

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

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

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

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

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

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

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

植木、辻（以下、二人）

辻ちゃん、ウエちゃんのアクセシビリティPodcast、シーズンツー～！（拍手）

辻：

内容を拡大してお送りしております、アクセシビリティPodcast、それでは、後半をお楽しみください。

Listener's Voice

植木（以下、ウ）：

はい、ということで、えー、新コーナー、Listener's Voice。

辻：

はい。

ウ：

ね。えー、名前のとおりですね、リスナーからいただいたメールに、辻ちゃん・ウエちゃんがお答えしますよ、と、

辻：

はい。

ウ：

いうコーナーなんですが、えー、

辻：

ついにいただきました。

ウ：

ね、1発目ということで、

辻：

はい。

ウ：

えー、今日ですね、えー、メールをいただいたのは、マークアップエンジニアの坂井さん、

辻：

はい。

ウ：

です。えー、「辻さん、植木さん、はじめまして、こんにちは。」

辻：

こんにちはー。

ウ：

「辻ちゃん・ウエちゃんのアクセシビリティPodcast、いつも楽しく拝聴させていただいております。」

辻：

はい。

ウ：

えー、「今では、アクセシビリティ関連の貴重な情報源になっています。3ヶ月延長されると聞いて安心しました。ホッ。」

辻：

ありがとうございます。

ウ：

ホッって書いてある、

辻：

ホッ。

ウ：

僕達もホッ、って感じ。

辻：

そうですねー。うれしいですねー。

ウ：

で、えー、「今回はアクセシビリティに関して質問がありまして、メールさせていただきました。」

辻：

はい。

ウ：

ありがとうございます。

辻：

はい。

ウ：

えー、「自分のブログにもエントリーしたのですが、検索結果ページのアクセシビリティについてです。」

辻：

うーん。

ウ：

えー、「各検索エンジンによってマークアップがそれぞれ違うのですが、」

辻：

あー、そうですねー。

ウ：

「アクセシビリティの観点から見てどれがベストなのでしょうか？」

辻：

難しいですねー。

ウ：

「音声ブラウザからどれが一番使いやすいのでしょうか？」

辻：

うーん。

ウ：

で、「アクセシビリティに関心はあるものの、実際に音声ブラウザ等で確認する機会がなかなかありません。」

辻：

はい。

ウ：

「アドバイスいただければ幸いです。どうぞ、よろしくお願いいたします。」と。

辻：

はい、わかりました。

ウ：

ということで、

辻：

今日はあの、JAWSを使って、

ウ：

うん。

辻：

GoogleとYahoo!と両方、あのー、音声を作ってきましたので、

ウ：

はい。

辻：

聞いていただきたいと思うんですが、

ウ：

はい。

辻：

えー、まずGoogleの検索、について、音声を聞いてください。えーと、例によって、アクセシビリティを検索してみました。

JAWSの音声（以下、JAWS）：

Google。Google検索。エディット。フォームモードオン。ア、ク、セ、シ、ビ、リ、テ、イ、カタカナ、アクセシビリティ、フォームモードオフ。11個の見出しと70個のリンク。アクセシビリティハイフン、Google検索。スポンサーリンク見出しレベル2。アクセシビリティとは、すみつきアクセシビリティすみつきとじ、ハイフン、意味なかてん解説、アクセシビリティハイフン、ダブリュアイケイアイピーイーディーアイエー、見出しレベル2。アクセシビリティコロン、富士通見出しレベル2。

辻：

このようにですね、あのー、見出しでマークアップされてます。

ウ：

うん。

辻：

見出しジャンプ機能を使うと、えー、簡単に検索結果、のページタイトルを読み上げることができます。

ウ：

うん。

辻：

で、今度Yahoo!なんですけど、まずYahoo!を、えー、Internet Explorerで検索してみました。

JAWS：

ヤフーかんたんふ、ジャパン。エディット。フォームモードオン。ア、ク、セ、シ、ビ、リ、テ、イ、カタカナ、アクセシビリティ、フォームモードオフ。5個の見出しと92個のリンク。ヤフーかんたんふ、検索。アクセシビリティ。ウェブ検索結果、見出しレベル1。ヤフーかんたんふ、サービス。見出しレベル2。スポンサーサイト、見出しレベル2。リンク。スポンサーサイト、見出しレベル2。リンク。スポンサーサイト、見出しレベル2。リンク。先頭。ウェブ検索結果、見出しレベル1。

辻：

えーとですね、実は、見出しジャンプで飛んでいきますと、今みたいにぐるぐる回っちゃうんですね。

ウ：

ふんふんふん。

辻：

で、スポンサーサイト、のリンクの見出しのある、途中に、実は検索結果ってのが出てくるんですけど、

ウ：

うん。

辻：

そこには残念ながら見出しジャンプではたどりつけないと。

ウ：

なるほど。

辻：

ただ、CSSを切った状態で、検索結果を閲覧しますと、ちょっと状況が変わります。

ウ：

ほー。

JAWS：

ウェブ検索結果、見出しレベル1。ヤフーかんたんふ、サービス。見出しレベル2。スポンサーサイト、見出しレベル2。リンク。ウェブ結果見出しレベル2。10個のリスト。いちピリオド。リスト項目リンクアクセシビリティコロン、富士通。にピリオド。リスト項目リンク富士通ウェブなかてんアクセシビリティ指針コロン、富士通。さんピリオド。リスト項目リンクアクセシビリティとは、すみつきアクセシビリティすみつきとじ、ハイフン、意味なかてん解説ドッツドッツドッツ。

辻：

このように、ですね、今、ウェブ結果、っていう見出しが聞こえたかと思うんですけど、

ウ：

うん、聞こえたね。

辻：

これが、あのー、見出しジャンプで飛べるようになるんですね。

ウ：

ということは、これはさっき（編注：前編）のdisplay:none; を使ってるのかな？

辻：

そうーですね。

ウ：

画面には出てないけど、HTMLには書かれていて、スタイルシートをオフにすると、読み上げでも聞こえると。

辻：

はい。

ウ：

はい。

辻：

なので、えーと、この、ウェブ結果っていうのが聞こえたら、JAWSでは、あのー、リスト項目に飛ばすコマンドで「I」ってのがあるんですけど、これをどんどん押していくと、ページタイトル、あの検索結果のページタイトルをどんどん読んでいくことができると。

ウ：

なるほど。つまりYahoo!は、リストを使ってると、

辻：

検索結果、そうですねー。リストで、

ウ：

ということだね。

辻：

はい。

ウ：

なるほどー。まあ、たぶん、ページタイトル、これ10個ぐらい並んでるところをどうマークアップするかっていうと、ま、さっきのようにGoogleみたいに見出しでマークアップするのか、あと今のYahoo!みたいに、リストを使うのか、で、まあリストも、えー、番号つきリストもあれば、定義リストも使えるだろうし、

辻：

はい。

ウ：

たぶんそのどっちか、っていう感じ、になるのかな。

辻：

そうですね。

ウ：

使い勝手としてはどうなんだろうねー。

辻：

うーん・・・まあ難しいところなんですけど、えーと、現状の日本のスクリーン・リーダーのことを考えると、やはり、えー見出しジャンプができるスクリーン・リーダーって結構増えてきたので、見出しを使ってマークアップした方が、日本のスクリーン・リーダーユーザーは使いやすいかもしれません。

ウ：

うん。あとあれだね、あのー、そのページのh1の大見出しとして、ユーザーが入れたキーワードを使って、なになにの検索結果、っていう見出し、つけてほしいな、と思うんだけど。

辻：

あ、そうですねー。あると便利ですよね。

ウ：

うーん。

辻：

あと、検索結果、って、果たして、こう、自分が検索したワードで見つかったのかなぁ、ってのが検索結果にたどりつくまでわかんないってことがあるので、

ウ：

うんうん。

辻：

例えば、なになにの検索結果、かっこ何件みたいなですね、そういう情報まで出していただけるとベストかな、なんて思うんですけど。

ウ：

なるほどね。ということは、なになにの検索結果、何件、っていう大見出しを立てて、あとは、並んでるページタイトルは、まー、見出しでマークアップするのが現時点では、日本語のサイトではよさそう、と、いうのが結論ですかね？

辻：

はい。

ウ：

はい。

辻：

マークアップ的にはどうなんですかね？ 検索結果ってどっちがいいんでしょうねぇ？

ウ：

うーん、文書構造からいうと、まぁ見出しでもいい気がするし、リストでもいい、気がするし、もしかしたらリストの方がいいのかもしれないですけどね。ただまあ現状、日本の音声ブラウザ、スクリーン・リーダーだと、リストのナビゲーション、ってまだ実装はされていない、ケースがほとんどなので、現時点での使い勝手、っていうことを優先するんだと、見出しを使っておいたほうが、やっぱりいいのかな、

辻：

なるほど。

ウ：

はい。

辻：

ということで、あのー、お答えになりましたでしょうか？

ウ：

はい。

辻：

はい、このようにですね、アクセシビリティPodcastでは、みなさまからのご意見・ご質問などを、えー、お待ちしております。えー、どしどしお寄せください。

ウ：

どんなちっちゃな質問でもいいからね。

辻：

そうですね。

ウ：

たくさん、お待ちしてます。

辻：

はい。

ウ：

はい。

辻：

というわけで、アクセシビリティPodcast第10回、えー、今回もミツエーリンクスのスタジオから、お送りしてまいりました。それでは、

二人：

アディオス、アミーゴス！

コメント

辻さん、植木さん、回答ありがとうございます。
実際の音声を聞きながら解説していただくと、とてもわかりやすく勉強になりました。
自分なりの答えを、あとでブログにまとめたいと思います。

それでは、これからも楽しみにしています。

坂井様

コメントありがとうございます。
Listener's Voiceでの私とウエちゃんの解説がお役に立てたとのこと、大変うれしく思っております。
今後もWebアクセシビリティに関する疑問などございましたら、どんな小さなことでもかまいませんのでお知らせください。

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

はじめまして。いつも大変楽しみに読ませてもらっています。

今回のエントリーも大変参考になりました。

今回の件で一つ質問なのですが、li要素の中に見出し要素を使うようなはマークアップ（リスト＋見出し）は考えられないでしょうか。例えば、Live Searchなどはその形式でマークアップされています。

それとも、見出しとリストでマークアップするとスクリーン・リーダーで聞き取りづらいといったことがあるのでしょうか？

もしよろしければ教えて下さい。よろしくお願いします。

hoka様

ご質問をいただきまして、ありがとうございました。
Live Searchの検索結果につきまして、手元の音声読み上げ環境で、どのような読み上げが行われるかを聞いてみました。
マークアップの妥当性につきましては見解が分かれる部分かと思われますが、スクリーン・リーダーでの読み上げに関しましては、リストの中に見出しがあっても、特に聞き取りにくいという問題はございませんでした。

ご参考になりましたら幸いです。

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

Pick Up

• アクセシビリティ

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