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

聴取方法のご案内

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

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

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

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

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

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

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

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

植木、辻（以下、二人）

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

植木（以下、ウ）：

（雅楽のイメージで）ツンツクツクツクツン。ツンツクツクツクツン。ヒヤァ～・・・

辻：

みなさま、あけましておめでとうございます。アクセシビリティPodcast、シーズン2、第8回をお届けいたします。ウエちゃん。

ウ：

はい。

辻：

おめでとうございまーす。

ウ：

おめでとうございまーす。今年もよろしくお願いしまーす。

辻：

よろしくお願いいたします。えー・・・

ウ：

新年一発目っていうことでね、

辻：

そうですね。

ウ：

じゃあ、辻ちゃん、今年の抱負を聞かせてもらおうかな。

辻：

そうですね、僕はやっぱり絹ごしですかね。

ウ：

あー・・・絹、まあ木綿よりは絹の方がいい気がする、まあ俺どっちかというとこの季節は湯豆腐かなぁ・・・って、それ豆腐だよ、辻ちゃん。

辻：

すいません。では、アクセシビリティPodcast第8回をお届けしてまいりたいと思います。

ウ：

はい。

辻：

今回からは、Web制作の現場で使える便利なテクニックをご紹介していきたいと思います。

ウ：

はい。

辻：

今回からですね、ウエちゃんにメインでお話いただいて、僕はあの、スクリーン・リーダーのユーザーの立場でコメントしていきたいな、と思います。

ウ：

はい。

辻：

ウエちゃん、お願いします。

ウ：

了解です。

辻：

はい。

ウ：

じゃあ、えーとまず、ひとつめ。今日はですね、まずHTML、にえー、フォーカスをして、えー、見出しのマークアップとか、えー、単語のスペース、あとリンクのラベルとか、えー、title属性、alt属性とかですね、そのへんちょっとお話していこうかと思います。

辻：

はい。

ウ：

じゃまずひとつめ。えーと見出しのマークアップ、ということで、まあh1とかh2とかですね、えー、見出しをちゃんとマークアップしましょうというのがあるわけなんですが、

辻：

やっぱりあれですね、あの、見出しをつけるのは身だしなみってことですよね。

効果音（カラス）：

カー、カー。

ウ：

ま、これ見出しをちゃんとその、マークアップすることで、えー、スクリーン・リーダーでは、見出しジャンプ、ま、見出し読みモードみたいなやつでですね、えー、そのページの見出しをこう、拾い読みすることができるようになると、

辻：

はい。

ウ：

いうことで、えー、ま、この見出し、マークアップの仕方に関してはですね、いろんな、えー、考え方があるんですが、えー、ま、やっぱりツリー構造になるようにですね、h1を頂点としたツリー構造になるようなマークアップをすると、非常に理解しやすくなるんじゃないか、ということで、

辻：

そうですね。じゃあ、僕、あのぉ、ちょっとサンプル作ってきたんで、

ウ：

うん。

辻：

音声聞いてくださーい。

ウ：

はい。

ホームページ・リーダーの音声（以下、HPR）：

見出し1。（電子音）アクセシビリティとウェッブ標準、SEO。見出し2。（電子音）JIS X はちさんよんいちのさん制定により進んだアクセシビリティ対応。見出し2。（電子音）企業サイトが取り組むその理由。見出し3。（電子音）企業サイトの事例。見出し2。（電子音）アクセシビリティとウェッブ標準、SEOとの関係。

ウ：

はい。というわけでね、これはホームページ・リーダー、

辻：

あ、そうですね。はい。

ウ：

ね。で、おんなじようにですね、去年の10月に発売されたNetReaderという新しい音声ブラウザでも、おんなじように、

辻：

うん。そうですね。

ウ：

見出しを教えてくれると。

辻：

はい。ちょっと通知の方法が違うんですけれども、これも音声聞いていただきましょうか。

ウ：

あ、はーい。

NetReaderの音声（以下、NR）：

（電子音）アクセシビリティとウェッブ標準てんSEO。1の1。見出し1、レベル1。（電子音）JIS X はっせんさんびゃくよんじゅういちマイナスさん制定により進んだアクセシビリティ対応。2の1。見出し2、レベル2。（電子音）企業サイトが取り組むその理由。11の1。見出し3、レベル2。

ウ：

はい。ということで。で、たまに見かけるのが、

辻：

はい。

ウ：

えー、例えば一番最初h1じゃなくて、h3からはじまっちゃったりとか、

辻：

ああ、ありますね。

ウ：

h2の次にh3じゃなくて、h4に飛んじゃうとかね。

辻：

うんうん。

ウ：

こう、ばらばらに出てくるっていうのがあるんですけど、

辻：

はい。

ウ：

こういうのってどうなの、やっぱり聞いてるほうとしては、

辻：

うん。あのー、

ウ：

文書構造が理解しにくくなったりするものなのかな？

辻：

そうですね。あのー・・・、やっぱりこう見出しを気にして聞くJAWSユーザーですとか、ホームページ・リーダー、NetReaderなんかの利用者は本当にあのー、あれ？って、やっぱり感じますね。

ウ：

うーん、なるほど。じゃ、ちょっとこれも、

辻：

はい。

ウ：

悪い例としてサンプル作ってきてもらったんで、

辻：

はい。

ウ：

ちょっとこれも聞いてもらいましょうか。

辻：

はい。

HPR：

見出し3。（電子音）おすすめコンテンツ。見出し3。（電子音）今月のイチ押し。見出し1。（電子音）アクセシビリティとウエッブ標準、SEO。見出し2。（電子音）JIS X はちさんよんいちのさん制定により進んだアクセシビリティ対応。見出し2。（電子音）企業サイトが取り組むその理由。見出し4。（電子音）企業サイトの事例。

ウ：

うん。確かにこう聞いてると、あれ、見出し3どこいっちゃったの？みたいな、

辻：

そうですね。

ウ：

感じがありますね。はい。というわけで、えーと見出しのマークアップをする際にはですね、h1を頂点としたツリー構造になるように、えー、見出しのマークアップをしていきましょうと。

辻：

はい。

ウ：

というのが、まずひとつめのTIPSです。ふたつめはですね、最近まあ、減ってきているとは思うんですけども、

辻：

はい。

ウ：

えー、たまに単語の中にスペースを入れてしまう、入れてしまっているっていうケースがあります。

辻：

ありますねー。

ウ：

そうすると、えー、音声読み上げだと、えー、一個の単語じゃなくて、一文字ずつ読まれてしまうと、いうのがあるわけなんですが、これもですね、辻ちゃんが作ってきてくれた、まあいい例、

辻：

いい例の方を、

ウ：

の方からまず最初に聞いてもらいましょう。

辻：

そうですね。

HPR：

（電子音）天気予報。（電子音）関東地方。栃木。晴れ。群馬。曇り。茨城。雨。埼玉。晴れ時々曇り。千葉。晴れのち曇り。東京。晴れ。神奈川。晴れ時々曇り。山梨。曇り。

ウ：

というふうにですね、ま、これ、えーと、県名がずらーっと並んでるんですけど、神奈川だけ3文字なので、

辻：

はい。

ウ：

見た目、こう揃えるために、えー、2文字の都道府県名には間にこう、スペースを入れる、っていうことがですね、

辻：

あー、千葉とかそうですよね。

ウ：

うん。たまーにあるんですよ。これ、スペースを入れてしまうとどうなるか、っていうのをですね、じゃちょっと聞いてもらいましょう。

辻：

はい。

HPR：

（電子音）天気予報。（電子音）関東地方。とち、き。晴れ。むれ、うま。曇り。し、しろ。雨。き、たま。晴れ時々曇り。せん、は。晴れのち曇り。ひがし、きょう。晴れ。神奈川。晴れ時々曇り。やま、り。曇り。

ウ：

ね。

辻：

うん。

ウ：

むれ、うま、なんていわれてもね。

辻：

そうですね。

ウ：

よくわかんないですよね。で、これ、どうなの？ 最近やっぱり辻ちゃん、普段使ってて、

辻：

うんとー、

ウ：

Blogなんかで、

辻：

そうなんですよね。

ウ：

聞くとかって、

辻：

うん。さっきの天気予報みたいな例は、

ウ：

うん。

辻：

意外と減ってきたんですけど、あのー、Blogの記事などで、あんまり、こう、意図してあけてるわけではないんだけど、実はスペースがあいちゃってるケースっていうのがたまーにあって、

ウ：

うん。

辻：

そうするとスクリーン・リーダーでは、やはり、こう単語としてうまく読み上げられないケースってのが、あるんですね。

ウ：

うん。

辻：

なので、あの、Blogの記事をアップする時とかですね、こうコンテンツをアップする時には、気をつけていただきたいですね。公開した後にも。

ウ：

そうですね。ま、これ、えーと、スペースだけじゃなくてですね、間に改行、brとかタグ入れて、縦書きにしたいからっていって、一文字ずつ改行しちゃう時なんかも、おんなじような、

辻：

ありますねー、はい。

ウ：

ことになりますね。えー、ということで、まあこの、えーと、ひとつの単語として認識されなくなる、っていうのは実は検索ロボットにとってもおんなじことになりますので、まあそういう意味でもですね、是非気をつけてもらいたいかなー、と、

辻：

そうですねー。

ウ：

思います。じゃ、今度、えーと、3つ目のテクニック、今度はリンクのラベル、がこれ、リンクのラベルっていうのはその、リンクはってある所の文言っていうことなんですけども、

辻：

はい。

ウ：

えーと、ちゃんとリンクのラベル、がですね、えー、リンク先の内容がわかるように記述されていれば、えー、音声読み上げで聞いていても、ちゃんとどこへのリンクかっていうのがわかると、

辻：

そうですね。

ウ：

いうことで、えー、ちゃんとわかりやすく書きましょうってのがあるんですが、

辻：

はい。

ウ：

じゃ、これもちょっとまず、えー、いい例のサンプルから、聞いてみてもらいましょう。

辻：

はい。

HPR：

（電子音）日本のスクリーンリーダー。ジェイ、エー、ダブリュー、エスの詳細。ピー、シー、トーカーの詳細。きゅうじゅうごリーダーの詳細。フォーカス、トークの詳細。日本のスクリーンリーダーの全文を読む。

ウ：

はい。ということで、

辻：

これ、女性の声で読まれているのが（編注：強調箇所が女性の声です。）、リンク項目なんですよね。

ウ：

あとなんか、JAWSがジェイ、エー、ダブリュー、エスとかって、読んでる。まあこれは、気にしなくてもいいかな、と。

辻：

ああ、これは、そう、どうしようもないっていうか、まあ。

ウ：

で、これはですね、えー、ちゃんとリンク先、がわかるように記述されているので、えー、まあ、よくね、タブキーを使ってリンクのラベルだけを拾って読んでるっていうユーザーが多いので、

辻：

そうですね。

ウ：

まあこうなってれば問題はない、と。

辻：

はい。

ウ：

で、ちなみに、今このスクリーン・リーダーの名前が出てきたリンクなんですけど、これリストを使ってるんですけども、

辻：

はい。

ウ：

なんか、こうリストを使うと、JAWSでは、

辻：

そうですね、項目を読む前に、何項目のリストかっていうのを、ちゃんと通知してくれるんですね。

ウ：

うん。じゃ、ちょっとこれも聞いてみましょうかね。

辻：

はい。

JAWSの音声（以下、JAWS）：

4個のリスト。リンク、ジョーズ、の詳細。リンク、ピーシーハイフントーカー、の詳細。リンク、きゅうじゅうごリーダーの詳細。リンク、フォーカス。トークの詳細。リスト終了。しかしてん・・・

ウ：

はい。ということでまあ、リストでちゃんとマークアップしておくと、ちゃんとスクリーン・リーダーでも何項目のリストがあります、と、

辻：

はい。

ウ：

いうふうに教えてくれるってことで、これもやっぱり、結構ユーザーの立場からすると、

辻：

そうですね、たまにこう、複数の、例えば10個とか20個とか、たくさんの項目の、リストがあったりするんですけど、そのリストを読むときに、こう事前に、何項目、このリストがあるんだよ、っていうのを伝えてもらうと、わかりやすいってのはありますね。

ウ：

うーん。これあれだね、JAWS以外のスクリーン・リーダー、音声ブラウザにも是非、

辻：

そうですね。

ウ：

搭載して欲しい、

辻：

はい。

ウ：

ところですよね。

辻：

そうですねー。

ウ：

はい。で、このリンクのラベルなんですけれども、えー、こちらとか、ここをクリック、みたいなところにしかリンクをはっていないと、えー、さっきタブキーを使って、リンクのラベルだけをこう拾い読みしてる場合には、えー、そのリンクのリンク先がどういうページかまったくわからないと、

辻：

そうですね。

ウ：

いうことで、えー、非常にユーザーが困ってしまうというケースがあります。

辻：

はい。

ウ：

困ってしまうケースを聞いてもらいましょう。

辻：

はい。

HPR：

こちら。こちら。こちら。こちら。全文を読む。

ウ：

というふうにですね、ま、こうなるとちょっとこうお手上げになっちゃいますよね。

辻：

そうですね、まあこういうケースはほんとにカーソルキーを使って、本文を、こちらって書かれてるとこの周囲を読まないとわかんないですよね。

ウ：

うーん。と、このへんも細かいところですけれども、ちょっと注意をしていきたいといきたいなー、と。

辻：

やっぱりまだー、あるんですよね。こういうこちら、こちらって書いてあるページって。

ウ：

はーい。で、とはいえ、一覧、とか詳細っていうふうに、どうしてもページのスペースの関係上、あんまりこう、文字数入れられないっていう場合もあって、

辻：

はい。

ウ：

で、まあ1個のページに一覧、とか詳細とかっていうのが2つ、3つあったりとか、

辻：

はい。

ウ：

えー、ゆう場合もあるんですけども、まあひとつの解決策として、えー、title属性を使って、えー、補足説明をする、っていうやり方があります。で、えー、これもやっぱ実際にあったケースなんですけれども、ま、そのtitle属性、まあリンクのラベルの補足をするっていう使い方もあれば、えーと、新しいウインドウで開きますよー、っていうことをですね、こうtitle属性を使って、えー、教えてあげるっていうやり方をしているページがあったんですけれども、

辻：

あー、ツールチップみたいな。

ウ：

そうですね。

辻：

はい。

ウ：

で、これもですね、ちょっと、場合によっては問題になりうるということで、まず、じゃあそのtitle属性に、新しいウインドウで開きますっていう補足説明を書いているページを、ホームページ・リーダーで読み上げると、こうなります。

辻：

はい。

HPR：

ジェイ、エー、ダブリュー、エスの詳細。ピー、シー、トーカーの詳細。

ウ：

はい。ということで、まあこれは普通に聞こえてくる、っていうことと、

辻：

そうですね。

ウ：

あと、まあ、title属性でいくら補足説明してあってもですね、えー、今聞いてもらったように、そこになんか補足説明があるかどうかって聞いてる分には全然わからないので、

辻：

そうですね。

ウ：

実際にユーザーには聞いてもらえないと、

辻：

はい。

ウ：

いう問題があります。で、この同じページを今度PC-Talkerで聞くとですね、またちょっと違う読み上げになってしまうんですね。

辻：

はい。

ウ：

じゃ、ちょっとこれもサンプルを聞いて、みてください。

PC-Talkerの音声（以下、PCT）：

新しいウインドウで開きます。リンク、新しいウインドウで開きます。リンク、かぎ、日本のスクリーンリーダーかぎとじの全文を読む。

ウ：

という感じでですねー、まあ、title属性を使うとツールチップが出るので、たしかにその、マウスポインタを当てた時に、画面見てるユーザーには、あ、このリンク新規ウインドウで開くんだなー、っていうのが伝わるんで、まあそういう意味ではいいんですが、

辻：

はいー。

ウ：

PC-Talkerを使っているユーザーからすると、実はリンクのラベル、ではなくて、これtitle属性だけを読みあげられてしまうんで、

辻：

こっちが優先されちゃうんですよねー。

ウ：

なんで、まったく、リンク自体が意味わかんなくなっちゃう、と、いう問題があります。なので、まあできるだけ、えー、title属性で補足するんではなくて、リンクのラベルにきちんと書く、というのを最優先でやってもらって、で、どうしてもそれができないという場合にはですね、えー、PC-Talkerみたいにtitle属性だけしか読み上げられない場合でも意味が伝わるように、まあフルフルでラベルを書いてもらうと、いうのがテクニックとしてはいいんじゃないかな、と思います。

辻：

なるほど。

ウ：

じゃあ、次ですね。今度はalt属性。ええまあ、画像を使うときにですね、alt属性で、代替テキストを書くと。これはもう基本中の基本といってもいいものだと思うんですけれども、えー、よく見かけるのが、すぐ近くに、テキストリンクがあって、で、そのテキストリンクと同じページにリンクがはられているリンク画像、

辻：

うーん。

ウ：

が、並んでいるような場合ですね。

辻：

ありますねー。

ウ：

で、そういう場合に、alt属性どうするか、まあ普通であれば、ちゃんと、えーと、リンクのラベルとしてリンク先がわかるような代替テキストを書きましょうっていう原則があるんですけれども、

辻：

はい。

ウ：

こういう場合は、それにしたがってしまうと、その並んでるテキストリンクとおんなじリンクがふたつ並ぶことになってしまうので、

辻：

そうですね。

ウ：

えー、こう繰り返されてしまうと、いう問題があります。

辻：

はい。

ウ：

で、こういう場合には、alt属性を空にしましょうと、いうことで。じゃ、まずalt空にしてある、えー、例をですね、えー、聞いてみてください。

HPR：

書籍ウェッブアクセシビリティ。書籍ウェッブ標準デザインテクニック即戦ワークブック。書籍シーエスエス、ズン、ガーデン、ブック。

ウ：

はい。で、これはちゃんと代替テキストを空にしてある、まあ本の表紙と本のタイトルがこうリンクで並んでる、というページなんですけれども、で、もしこれにですね、画像の方にも代替テキストを入れてしまうとどう聞こえてくるか。

HPR：

書籍ウェッブアクセシビリティ。書籍ウェッブアクセシビリティ。書籍ウェッブ標準デザインテクニック即戦ワークブック。書籍ウェッブ標準デザインテクニック即戦ワークブック。書籍シーエスエス、ズン、ガーデン、ブック。書籍シーエスエス、ズン、ガーデン、ブック。

ウ：

というふうにですね、おんなじリンクがこう2回繰り返されてしまうと、

辻：

はい。

ウ：

いうことで、こういうケースはやっぱり、辻ちゃん使ってると、

辻：

そうですね。やっぱり、結構あったりするんですね、で、これはまだ、なんだろ、おんなじ内容なので、ああ、まぎらわしい、なっていうので終わるんですけど、

ウ：

うん。

辻：

たまに、キャッチコピーがaltに入っているようなケースっていうのがあるんですね。なんかこう、例えば、書籍なんとか絶賛発売中、とかっていうaltになってたりすることがあって、あ、もしかしたらこれ違うページが開くんじゃないかなとか思って、

ウ：

あー、あるね。

辻：

あけることがあるんですね。なので、これはできれば避けたいかなー、と。

ウ：

そうですね。ま、えーと、代替テキストは必要がない場合はですね、えー、まあalt自体はつけなければいけないので、altをこう、空にする、という処理が必要で、もちろん、大事な、画像、情報をちゃんと伝えてる画像には代替テキストを書いてもらわないと、困ると、

辻：

そうですね。

ウ：

いうことですね。

辻：

ほんとにあの、例えば一発置換とかで間違って、こうaltを空にしちゃうようなことがあると、大事な情報が伝わらなくなってしまうケースっていうのがありますんで、ほんとに、あの、これは気をつけていかなければいけないな、と、

ウ：

はい。

辻：

思います。

ウ：

まあ、あのー、代替テキストをつける、まあ気をつける人が増えてきてるのはすごくいいことだと思うんですが、えー、場合によっては、書かない方がいい、空にした方がいいっていうケースもありますので、えー、是非注意してください。

ウ：

というわけで、今日はですね、HTMLにフォーカスして、えー、よくある間違い、のポイントを、えー、紹介していきました。

辻：

はい。なんか、あれですね。こうテンポよかったですね。

ウ：

まあね。

辻：

（笑）

ウ：

俺がメインだからね。

辻：

（笑）そんな、そんな。じゃあ、えー、次回は是非ですね、ミツエーリンクスの名に懸けて、テンポ良くお送りしたいと思います。

ウ：

おー、楽しみにしてるよ、辻ちゃん。

辻：

はい。じゃあ、せめてですね、エンディングは僕がテンポ良く締めたいと思います。えー、アクセシビリティPodcastでは、引き続き皆様からのご質問、ご意見などをお待ちしております。メールか、コメントの形でお寄せください。宛先は、エーイチイチワイ、アットマーク、ミツエードット、シーオードット、ジェイピー。エーイチイチワイ、アットマーク、エムアイティーエスユーイー、ドット、シーオードット、ジェイピーです。（編注：a11y@mitsue.co.jp）

ウ：

おー、やっぱなんかテンポいいね、辻ちゃん。

辻：

そうですか。

ウ：

うん。

辻：

いや、うれしいですねー。

ウ：

よっし。

辻：

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

ウ：

はい。

辻：

それでは、

二人：

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

ウ：

今年もよろしく。

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

Pick Up

• アクセシビリティ

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