「辻ちゃん・ウエちゃんのアクセシビリティPodcast」第36回
アクセシビリティPodcast 第36回をお届けいたします。今回のPodcastでは、WAI-ARIAとスクリーン・リーダーの対応状況についてをご紹介いたします。どうぞお楽しみください。
概要
第36回では以下の内容についてお送りいたします。
- ARIA Landmarkについて
 - Live Regionコンテンツの読みあげ
 
なお、話題にあがっているサイトなどのリンク先につきましては、「全文を読む」のリンクよりテキスト化された内容でご確認ください。
聴取方法のご案内
ブラウザ上で再生される方は、下記のFlash Playerをご利用ください。
ダウンロードしてその他のプレイヤーで再生される方は、ダウンロードボタンよりmp3ファイルをダウンロードの上、ご利用ください。
音声がご利用いただけない環境の方には、本エントリーの最後にテキスト化された内容を提供いたしております。
また、iTunesなどRSS対応のソフトウェアをご利用の方には、辻ちゃん・ウエちゃんのアクセシビリティPodcast用RSSも提供いたしております。
なお、ご意見、ご感想などございましたら、当エントリーのコメント入力フォームよりお寄せください。たくさんのご意見をお待ちいたしております。
それでは、どうぞお楽しみください!
「辻ちゃん・ウエちゃんのアクセシビリティPodcast」第36回MP3ファイルのダウンロード
「辻ちゃん・ウエちゃんのアクセシビリティPodcast」第36回 テキスト
- 二人:
 - 辻ちゃん、ウエちゃんのアクセシビリティPodcast!2010!
 - 辻:
 - 第36回目となりました、アクセシビリティPodcast、本日もミツエーリンクスのスタジオからお届けしてまいりたいと思います。わたしは、辻ちゃんこと、ミツエーリンクスの辻勝利です。そして、
 - ウ:
 - はい、ウエちゃんこと、インフォアクシアの植木です。
 - 二人:
 - よろしくお願いします。
 - ウ:
 - 辻ちゃん、今日もヒロちゃんいないけど。
 - 辻:
 - はい、えー、今日も仕事の関係でちょっと、お休みなんですよ。
 - ウ:
 - うーん。出演拒否...、
 - 辻:
 - (笑)
 - ウ:
 - 深刻だね、これね。
 - 辻:
 - いやいやいや
 - ウ:
 - 思ってた以上に。
 - 辻:
 - いやいやいやいや、全然、あの、参加したかったと、申しておりましたので。
 - ウ:
 - 辻ちゃんあれだね、道歩くときは気をつけたほうがいいね。
 - 辻:
 - (笑)そんなに嫌われてるのかなあ。ということで、今日もふたりで、アクセシビリティPodcast熱~く、お届けしてまいりたいと思います。
 - ウ:
 - はい。
 
辻ちゃんも教えてあげる
- 辻:
 - ということで!
 - ウ:
 - ということでっていうか、あれだね、辻ちゃんも...
 - 辻:
 - (笑)族の仲間入りということで。
 - ウ:
 - 対抗してきたね。
 - 辻:
 - はい。わたしもウエちゃんに倣ってですね、これがやってみたいなーと思って、今回やらせていただきました。
 - ウ:
 - 意外とさめた僕がここにいます。
 - 辻:
 - はい。
 - ウ:
 - はい。
 - 辻:
 - えー、今日はですね、
 - ウ:
 - はい。
 - 前回まではウエちゃんにJIS X 8341-3改訂版についてお話ししてもらってきたわけなんですけれども、
 - ウ:
 - はい。
 - 辻:
 - 今回ちょっと、WAI-ARIA(ウェイアリア)について
 - ウ:
 - ほう。
 - 辻:
 - わたしのほうから、デモをご紹介しようかなと。
 - ウ:
 - ほうー。「ありゃーいーね」を。
 - 辻:
 - 「ありゃーいーね」をですね、スクリーン・リーダーの音声で、
 - ウ:
 - ほう。
 - 辻:
 - 実際どんなふうに読まれているのかっていうのをご紹介していこうかと思うんですけれども。
 - ウ:
 - ひさしぶりですね。
 - 辻:
 - はい。
 - ウ:
 - うん。
 - 辻:
 - アクセシビリティPodcastでは、WAI-ARIAについてですね、
 - ウ:
 - うん。
 - 辻:
 - 第18回のコンテンツのなかで、けっこう、キダちゃんにも参加してもらって、
 - ウ:
 - おおおお。
 - 辻:
 - なつかしいですよね。去年になりますかね。
 - ウ:
 - これが36回目だから、ちょうど...、
 - 辻:
 - おととしかな?
 - ウ:
 - 半分。そうだね。
 - 辻:
 - そうですね。半分になりますね。
 - ウ:
 - うん。
 - 辻:
 - 18回のほうでお届けしてきたわけなんですけれども、
 - ウ:
 - はい。
 - 辻:
 - 後編のほうでわたしがいくつかデモをご紹介させていただきました。
 - ウ:
 - うん。
 - 辻:
 - で、今日はですね、さらに、最近JAWS 10が発売になりまして、
 - ウ:
 - はい。
 - 辻:
 - これまでは、NVDAでWAI-ARIA対応コンテンツの読み上げっていうのはできたんですけども、
 - ウ:
 - うん。
 - 辻:
 - 日本のスクリーン・リーダーでもJAWSで読み上げができるようになりましたので、
 - ウ:
 - うん。
 - 辻:
 - 改めてご紹介しようかなと思います。
 - ウ:
 - なるほど。
 - 辻:
 - デモを用意してまいりました。
 - ウ:
 - はい。
 - 辻:
 - はい。まずご紹介するのは、aria-requiredという、
 - ウ:
 - うん。
 - 辻:
 - 項目なんですけれども、aria-requiredというのは、入力が必須の項目について、
 - ウ:
 - うん。
 - 辻:
 - 表現する方法で、前回ウエちゃんに紹介していただいた「赤字は必須項目です」という、
 - ウ:
 - はいはい。
 - 辻:
 - ような項目、ありましたよね。
 - ウ:
 - うん。
 - 辻:
 - で、その必須項目を、スクリーン・リーダーで読み上げ可能なかたちで紹介する手段として、aria-requiredというのがあります。
 - ウ:
 - なるほど。それを使っておくと、スクリーン・リーダーが、それが必須項目だということを認識できると。
 - 辻:
 - そうなんですよね。
 - ウ:
 - なるほど。
 - 辻:
 - で、このaria-requiredのおもしろいところは、
 - ウ:
 - うん。
 - 辻:
 - たとえば日本語のコンテンツの中で、
 - ウ:
 - うん。
 - 辻:
 - このaria-requiredを使っておきますと、
 - ウ:
 - うん。
 - 辻:
 - 英語のスクリーン・リーダーでアクセスしたときには、
 - ウ:
 - うん。
 - 辻:
 - コンテンツそのものは読めないんですけれども、
 - ウ:
 - うん。
 - 辻:
 - 必須項目である部分は、「必須」ではなくて「required」っていうふうに読まれるんですね。
 - ウ:
 - ほう。
 - 辻:
 - だから、言語に依存しないかたちで、
 - ウ:
 - ふんふん。
 - 辻:
 - 必須項目をスクリーン・リーダーに伝えることができるというので、
 - ウ:
 - ふんふんふん。
 - 辻:
 - ちょっとおもしろいなあと思っているんですけれども。
 - ウ:
 - はい。
 - 辻:
 - では実際にコンテンツの読み上げを聞いてみようかと思います。
 - ウ:
 - はい。
 - 辻:
 - 今、NVDAが起動してまして、
 - ウ:
 - うん。
 - 辻:
 - 今回使用するのはFirefoxなんですけれども、
 - ウ:
 - はい。
 - 辻:
 - NVDA、Internet Explorer8とか
 - ウ:
 - うん。
 - 辻:
 - 7もそうだと思うんですけど、
 - ウ:
 - うん。
 - 辻:
 - これまではFirefoxでコンテンツの読み上げは主にやっていたんですけれど、両方でできるようになりましたので、
 - ウ:
 - はい。
 - 辻:
 - ぜひ、使いやすいほうを使っていただければなと。
 - ウ:
 - はい。
 - 辻:
 - 思います。
 - ウ:
 - はい。
 - 辻:
 - この入力フォームが今、出てまして、ページタイトルがですね、
 - NVDA:
 - お問い合わせフォーム2 Mozilla Firefox
 - 辻:
 - 「お問い合わせフォーム2」というふうに読まれました。
 - ウ:
 - はい。
 - 辻:
 - で、このフォームなんですけれども、ちょっと、
 - ウ:
 - うん。
 - 辻:
 - ウエちゃん簡単に、フォームの概要を
 - ウ:
 - はい。テキストフィールドがまず3つ並んでまして、1つ目には「名前(必須)」というラベルがついています。
 - 辻:
 - はい。
 - ウ:
 - で、2つ目が「Eメールアドレス(必須)」
 - 辻:
 - はい。
 - ウ:
 - で、3つ目が「Webサイト(任意)」
 - 辻:
 - はい。
 - ウ:
 - で、4つ目がこの「テキストエリア」なんですけれども、「お問い合わせ内容を入力してください(必須)」と
 - 辻:
 - はい。
 - ウ:
 - いうテキストラベルがついてるフォームですね。
 - 辻:
 - いわゆる一般的な
 - ウ:
 - そうですね。
 - 辻:
 - お問い合わせのフォームなんですけれどもね。
 - ウ:
 - はい。
 - 辻:
 - で、このなかで、aria-requiredという技術が使用されてます。ではまず、名前のフィールドをちょっと読んでみたいと思うんですけれども。
 - NVDA:
 - 名前 かっこ 必須 コロン エディット 必須 オートコンプリートづき
 - 辻:
 - はい、このように読み上げられました。
 - ウ:
 - うん。
 - 辻:
 - 「名前 かっこ 必須」
 - NVDA:
 - 名前 かっこ 必須 コロン エディット 必須 オートコンプリート
 - 辻:
 - この「必須」が2回読まれてるんですけれども、
 - ウ:
 - うん。
 - 辻:
 - 最初の「かっこ 必須」のほうは、
 - ウ:
 - うん。
 - 辻:
 - フォームに実際に書いてあるんですよね。
 - ウ:
 - ふんふんふん。
 - 辻:
 - で、次のフィールドが
 - NVDA:
 - Eメールアドレス かっこ 必須 コロン エディット 必須 オートコンプリートづき
 - 辻:
 - 同じように「Eメールアドレス かっこ 必須」で、「必須」が2度読まれるかたちになってます。
 - ウ:
 - で、実際に名前のフィールドに、ちょっと文字を入力してみたいと思います。
 - NVDA:
 - 名前 かっこ 必須 名前 エディット 必須 オートコンプリート づき
 - 辻:
 - ここでですね、
 - NVDA:
 - ティ エス ユー ジェイ アイ ケイ エイ ティ エス ユー ティ オー エス エイチ アイ
 - 辻:
 - 今、スペースなしで「tsujikatsutoshi」と書きました。
 - ウ:
 - うん。
 - 辻:
 - で、次のEメールアドレスを入れるためにTabキーで移動してみたいと思うんですけれども、
 - NVDA:
 - 名字と名前の間には空白が必要ですアラート 名字と名前の間には空白が必要です
 - 辻:
 - このようにですね、「名字と名前の間には空白が必要です」というふうに、アラートが出ました。
 - ウ:
 - ほうほう。
 - 辻:
 - で、これはアラートでスクリーン・リーダーに通知してるんですけれども、
 - ウ:
 - うん。
 - 辻:
 - これまでのフォームだと、実際に、入力が終わってからデータを送信した後でなければ、こういうエラーメッセージというのは読むことができなかったんですね。
 - ウ:
 - うん。
 - 辻:
 - なのでこのアラートも、スクリーン・リーダーユーザーにとっては、便利な情報源かなと思います。
 - ウ:
 - なるほど。role属性のアラート。
 - 辻:
 - そうですね。
 - ウ:
 - を使うと、今みたいに、アラートが即読まれると。
 - 辻:
 - はい。
 - ウ:
 - なるほど。
 - 辻:
 - では、Eメールアドレスのほうも、ちょっと書いてみようと思うんですけれども、
 - ウ:
 - うん。
 - NVDA:
 - ティ エス ユー ジェイ アイ ピリオド エム アイ ティ エス ユー イー ピリオド シー オー ピリオド ジェイ ピー
 - 辻:
 - わざと間違えたメールアドレスを、「tsuji.mitsue.co.jp」と書いてみました。
 - ウ:
 - うん。
 - 辻:
 - で、移動しますと、
 - NVDA:
 - 不正なメールアドレスですアラート 不正なメールアドレスです
 - 辻:
 - こちらもやはりアラートが出ますと。
 - ウ:
 - なるほど。
 - 辻:
 - はい。で、まあ、フォームのデータを送信する前に、エラーを修正してから送信できるということで、こちらも便利な情報源かなと思います。
 - ウ:
 - これ、特にエラーがなければ、そのまますんなり次の項目に移動する?
 - 辻:
 - そうですね。
 - ウ:
 - うん。
 - 辻:
 - はい。これが、aria-requiredと、role属性のアラートを使った例になります。
 - ウ:
 - うん。
 - 辻:
 - では、次の例をご紹介してみようと思います。これはですね、ランドマーク属性というものでして、
 - ウ:
 - はい。
 - 辻:
 - コンテンツ上の任意の場所に移動するためのランドマークというか、目印みたいなものになります。今ですね、開いているコンテンツが、Marco Zeheさんが書いていらっしゃるBlogの1コンテンツなんですけれども、ちょっとタイトルを読んでみますね。
 - NVDA:
 - イージーアリアティップ シャープ 4 コロン ランドマークス エムエーアールシーオーエス エーシーシーイーエスエスアイビーアイエルアイティーワイ ビーエルオージー Mozilla Firefox
 - 辻:
 - はい、こういう、「Easy ARIA Tip #4」、というページなんですけれども、
 - ウ:
 - うん。
 - 辻:
 - このMarcoさんのBlogには実はランドマークが設定されてまして、
 - ウ:
 - はい。
 - 辻:
 - 簡単にコンテンツの中で移動することができます。
 - ウ:
 - うん。
 - 辻:
 - で、まず出てくるのが
 - NVDA:
 - 大見出しランドマーク エムエーアールシーオーエス エーシーシーイーエスエスアイビーアイエルアイティーワイ ビーエルオージー
 - 辻:
 - 「大見出し ランドマーク」というふうに読まれてるんですけれども、
 - ウ:
 - うん。
 - 辻:
 - これは、いわゆるbanner(バナー)になります。
 - ウ:
 - なるほど。
 - 辻:
 - はい。
 - ウ:
 - これはbannerという名前ですけど、そのページのヘッダーの部分を示すためのランドマークですね。
 - 辻:
 - そうですね。
 - ウ:
 - はい。
 - 辻:
 - ランドマークがありまして、次に出てくるのが
 - NVDA:
 - メインランドマーク Firefox 3.5.4
 - 辻:
 - 「メインランドマーク」というのが出てきます。
 - ウ:
 - メインコンテンツがここにありますよ、というのを示す、
 - 辻:
 - そうですね。
 - ウ:
 - ランドマークですね。
 - 辻:
 - はい。次に、NVDAで「D」キーを押すことで、ランドマークジャンプができるんですけども、
 - ウ:
 - あー、なるほど。
 - 辻:
 - はい。これ、JAWSになりますと、セミコロンで移動することになります。
 - ウ:
 - ふんふんふんふん。
 - 辻:
 - で、もう一度Dキーを押してみますと、
 - NVDA:
 - コンテンツ情報 ランドマーク
 - 辻:
 - はい、この「コンテンツ情報」
 - ウ:
 - うん。
 - 辻:
 - というランドマークがありまして、いわゆる、このコンテンツの情報ですね、だいたいフッターの部分にあたるんですかね。
 - ウ:
 - そうですね、コピーライトとか、
 - 辻:
 - そうですね。
 - ウ:
 - プライバシーポリシーなんかへのリンクがある部分に使う、というふうに仕様書には書いてますね。
 - 辻:
 - はい。
 - ウ:
 - はい。
 - 辻:
 - そのような感じで、コンテンツのなかの任意の場所に移動することができます。
 - ウ:
 - なるほど。
 - 辻:
 - で、今回紹介したのは、大見出し、bannerというランドマークと、mainというランドマーク、そしてコンテンツ情報のランドマークなんですけれども、
 - ウ:
 - うん。
 - 辻:
 - このほかにもですね、検索をするためのランドマーク
 - ウ:
 - search(サーチ)、ってありますね。
 - 辻:
 - searchですね。
 - ウ:
 - はい。
 - 辻:
 - 検索をするための入力項目などにジャンプするsearchというランドマークですとか、
 - ウ:
 - うん。
 - 辻:
 - あとですね、application(アプリケーション)というランドマークがあるんですね。
 - ウ:
 - うん。
 - 辻:
 - で、このapplicationというのがちょっと特殊で、
 - ウ:
 - うん。
 - 辻:
 - いわゆる、最近コンテンツのなかでアプリケーションの機能を実装したようなものがありますよね。
 - ウ:
 - はい。
 - 辻:
 - それを、スクリーン・リーダーで使うときに、そのアプリケーションにジャンプして、しかも、スクリーン・リーダーって、JAWSとかNVDAは仮想バッファーというところでコンテンツの中の情報を読むことができるんですけれども、
 - ウ:
 - うん。
 - 辻:
 - applicationを操作するときっていうのは、その仮想バッファーのモードっていうのから抜けて、
 - ウ:
 - ふんふんふん。
 - 辻:
 - いわゆる、実際に入力とかをするときに、直接コンテンツに情報をわたさないといけないので、
 - ウ:
 - うん。
 - 辻:
 - JAWSでいうと、フォームモード、っていうのがあるんですけれども、
 - ウ:
 - うん。
 - 辻:
 - フォームモードがオンの状態っていうのにしないといけないですし、
 - ウ:
 - うんうんうん。
 - 辻:
 - NVDAでいくと、ブラウザモードをオフにする、っていう状態にしないといけないんですね。
 - ウ:
 - ふんふんふん。
 - 辻:
 - で、それを、applicationというランドマークがあると、スクリーン・リーダー側で自動的に制御してくれるようなことも、
 - ウ:
 - あー、なるほど。
 - 辻:
 - できるようになってます。
 - ウ:
 - はい。
 - 辻:
 - で、このランドマークなんですけれども、
 - ウ:
 - うん。
 - 辻:
 - 海外ではけっこうたくさん、Blogですとか、
 - ウ:
 - うん。そうですね。
 - 辻:
 - はい。Gmailとかでも使われてるんですけれども、
 - ウ:
 - うん。
 - 辻:
 - あとはYahoo!などでも用いられてます。
 - ウ:
 - うん。
 - 辻:
 - で、日本であんまりたくさん例を見たことがないんですけれども、
 - ウ:
 - うん。
 - 辻:
 - これからですね、対応するスクリーン・リーダーも徐々に出てきてますので、多くの場面で使っていただければなと。
 - ウ:
 - そうですね。
 - 辻:
 - はい。
 - ウ:
 - どうしてもHTMLでマークアップしようとすると、たとえばh1どこに置くか、とか
 - 辻:
 - そうですね。
 - ウ:
 - けっこう悩みますけど、これは、たとえばヘッダーだったらbannerっていうまずランドマークを作って、ナビゲーションだったらnavigationっていうvalueもありますから、
 - 辻:
 - はい。
 - ウ:
 - ナビゲーションはここですよ、っていうことを示すことができるし、サイト内検索だったらsearchっていうのを使えばいいし、メインコンテンツはmainっていうvalueをつければ、ここからここがメインコンテンツですよ、っていうのが示すことができるんで、
 - 辻:
 - そうですね。
 - ウ:
 - またちょっと見出しの、見出しジャンプとはまた違ったナビゲーションができるような。
 - 辻:
 - はい。
 - ウ:
 - そんな感じですよね。
 - 辻:
 - はい。
 - ウ:
 - うん。
 - 辻:
 - このメインへのジャンプというのは、これまでは、隠しリンクで本文へジャンプとかって設定してたようなものを、
 - ウ:
 - うん。
 - 辻:
 - このランドマークに変えることで、スクリーン・リーダーが確実にジャンプできるような
 - ウ:
 - うん。
 - 辻:
 - 仕組みが作れるんじゃないかなと。
 - ウ:
 - うん。
 - 辻:
 - いうふうに、思ってます。
 - ウ:
 - これ早く、日本のスクリーン・リーダーもサポートしてほしいですね。
 - 辻:
 - そうですね。
 - ウ:
 - はい。
 - 辻:
 - はい、それではですね、ライブリージョンというのを今度紹介したいと思います。
 - ウ:
 - はい。
 - 辻:
 - これはどういうときに使われるものかっていいますとですね、
 - ウ:
 - うん。
 - 辻:
 - 今回用意してきた例がですね、スコアボードの読み上げというものなんですけれども、
 - ウ:
 - うん。
 - 辻:
 - 最近、オリンピックとか、ありましたけれども、
 - ウ:
 - 野球とか、
 - 辻:
 - そうですね。
 - ウ:
 - これからサッカーのワールドカップもあるし、
 - 辻:
 - はい。こういうスコアボードをWeb上とかで公開されるケースもあるかと思うんですけれども、
 - ウ:
 - うん。
 - 辻:
 - そういった情報をリアルタイムにスクリーン・リーダーでも読ませてしまおうという技術です。
 - ウ:
 - ほう。たしかにああいうやつって、生で、自動的に更新されて、点数が入ると、点数がぽーんと変わったり、0から1になったりするやつとかありますけど、それをスクリーン・リーダーでも読み上げてくれるようにしようと。
 - 辻:
 - はい。
 - ウ:
 - はい。
 - 辻:
 - そうですね。NVDAでは、昨年末に公開された開発版からこのライブリージョンの読み上げがサポートされまして、
 - ウ:
 - はい。
 - 辻:
 - JAWSのほうでは、JAWS10.0からこのライブリージョンの読み上げが可能になりました。
 - ウ:
 - はい。
 - 辻:
 - ということでですね、今日はJAWSを使って、スコアボードの読み上げというのをやってみたいと思うんですけれども、
 - ウ:
 - はい。
 - 辻:
 - まずこのページのタイトルがですね、
 - ウ:
 - うん。
 - JAWS:
 - スコアボードのシミュレーション
 - 辻:
 - 「スコアボードのシミュレーション」ということでですね。
 - ウ:
 - うん。
 - 辻:
 - ウエちゃん、簡単にこのページの説明をお願いしてもいいですか。
 - ウ:
 - はい。えーとこれは、非常にシンプルなサンプルなんですけれども、2チームの対決の模様をですね、速報で伝えるページなんですが、
 - 辻:
 - はい。
 - ウ:
 - 点数が入ると、自動的にそこの部分、たとえば片方のチームのスコアが0から1とか、
 - 辻:
 - はい。
 - ウ:
 - 1から2、っていうふうに、リアルタイムでアップデートされていくと。
 - 辻:
 - はい。
 - ウ:
 - ページ自体は、読み込みしないんですけれども、そこの部分、スコアの部分だけが自動的に更新されていくと。
 - 辻:
 - はい。
 - ウ:
 - いうやつですね。
 - 辻:
 - はい。
 - ウ:
 - はい。
 - 辻:
 - 今回はですね、辻ちゃん対ウエちゃんの対決ということでですね、
 - ウ:
 - なんと物騒な。
 - 辻:
 - (笑)コンテンツを作ってきましたので、
 - ウ:
 - はい。
 - 辻:
 - このページ、リロードしないとスコアが動かないので、
 - ウ:
 - うん。
 - 辻:
 - リロードしてみますね。
 - ウ:
 - はい。
 - JAWS:
 - スコアボードのシミュレーション
 - 辻:
 - で、今、スタートしました。
 - JAWS:
 - 辻ちゃん コロン 1
 - 辻:
 - 今、「辻ちゃん コロン 1」と読み上げたんですけれども、今、辻ちゃん側に1点が入った、ということになります。で、今ですね、ページの読み上げ自体はストップしてまして、僕は全然
 - JAWS:
 - ウエちゃん コロン 2
 - 辻:
 - キーボードに触ってないんですけれども。あ、いつのまにかウエちゃん2点入ってますね。
 - ウ:
 - よっしゃ!
 - 辻:
 - はい。で、どんどん進んでいきまして、これ1分間くらいデモがあるんですけれども、
 - ウ:
 - うん。
 - 辻:
 - 点数が入るたびに自動的に読み上げるということになります。
 - ウ:
 - うん。
 - 辻:
 - で、実はこの下の方に、あと残り何秒です、というのも出てるんですけども、
 - ウ:
 - うん。
 - 辻:
 - その部分は、
 - JAWS:
 - ゲーム終了 感嘆符 ウエちゃんの勝ち 感嘆符
 - ウ:
 - Yes!
 - 辻:
 - はい、今、ゲームが終了したんですが、時間も書かれてるんですけども、時間の部分は、自動的に読み上げないようになってるので、
 - ウ:
 - なるほど。
 - 辻:
 - スコアの部分だけが読み上げ更新されるというふうになってます。
 - ウ:
 - なるほどですね。
 - 辻:
 - ページ少し、読んでみましょうか。
 - ウ:
 - うん。
 - JAWS:
 - 見出し レベル1 ゲーム終了 感嘆符 ウエちゃんの勝ち 感嘆符
 - 辻:
 - はい、ページの先頭に
 - JAWS:
 - スコアボードのシミュレーション
 - 辻:
 - 戻りまして、
 - JAWS:
 - ブランク 見出し レベル1 辻ちゃん対ウエちゃん たたいて てん かぶって てん じゃんけんぽん対決
 - 辻:
 - というふうに、ページ見出しがついてますね。
 - JAWS:
 - 見出し レベル2 残り時間見出し レベル2 00:00
 - 辻:
 - さきほど試合が終了したので、
 - ウ:
 - うん。
 - 辻:
 - 残り時間が「00:00」になってると。
 - ウ:
 - なるほど。
 - 辻:
 - で、その下に読んでいきますと、
 - JAWS:
 - 見出し レベル3 辻ちゃん コロン 1見出し レベル3 ウエちゃん コロン 2見出し レベル1 ゲーム終了 感嘆符 ウエちゃんの勝ち 感嘆符
 - 辻:
 - というふうに、ページの中に書かれています。
 - ウ:
 - たたいてかぶってじゃんけんぽん対決だったんですね。
 - 辻:
 - はい(笑)あの、今知りました。
 - ウ:
 - なるほど。
 - 辻:
 - このようにですね、応用例といいますかですね、
 - ウ:
 - うん。
 - 辻:
 - 以前アクセシビリティBlogのなかで紹介したことのある、
 - ウ:
 - うん。
 - 辻:
 - 「Accessible Interface to YouTube」という、Youtubeのコンテンツを、よりアクセシブルなかたちで利用するというページがあるんですけれども。
 - ウ:
 - はい。
 - 辻:
 - そのなかでも使用されてます。
 - ウ:
 - なるほど。
 - 辻:
 - たとえばですね、
 - ウ:
 - うん。
 - 辻:
 - 再生ボタンを押しますと、
 - ウ:
 - うん。
 - 辻:
 - 「playing」とかですね、
 - ウ:
 - うん。
 - 辻:
 - 一時的にストップしますと「pause」とか、そういう読み上げが自動的に行われるようになってます。
 - ウ:
 - ほう。確かに今までAjaxなんかを使ってページの一部分だけを自動的に更新するようなやつって、スクリーン・リーダーがその情報を取得できなかったから、読み上げなかったんだよね。
 - 辻:
 - そうですね。
 - ウ:
 - うん。
 - 辻:
 - これは、結構、Ajaxコンテンツの
 - ウ:
 - うん。
 - 辻:
 - ネックとも言われてた部分じゃないかと思うんですけれども。
 - ウ:
 - 一部が書き換わるとそこを察知して、読み上げてくれると。
 - 辻:
 - はい。
 - ウ:
 - なるほどですね。
 - 辻:
 - このように、技術はどんどん進んでいるわけなんですけれども。
 - ウ:
 - はい。
 - 辻:
 - 今回紹介したARIA対応コンテンツも、どんどん増えていってくれるといいなーと思います。
 - ウ:
 - そうですね。コンテンツも増えて、スクリーン・リーダーとかブラウザのサポートも増えていってくれると
 - 辻:
 - そうですね。
 - ウ:
 - いいですよね。
 - 辻:
 - はい。
 - ウ:
 - はい。
 - 辻:
 - ということで、アクセシビリティPodcast、今回は「辻ちゃんも教えてあげる」ということで、お届けしてまいりました。
 - ウ:
 - はい。
 - 辻:
 - アクセシビリティPodcastでは、引き続きみなさまからのご意見、ご感想などをお待ちしております。このBlogへのコメントのかたちか、またはメールアドレスエーイチイチワイ、アットマーク、ミツエードット、シーオードット、ジェイピー。エーイチイチワイ、アットマーク、エム、アイ、ティー、エス、ユー、イー、ドット、シーオードット、ジェイピー、(編注:a11y@mitsue.co.jp)までお寄せください。
 - ウ:
 - はい。
 - 辻:
 - そして、アクセシビリティPodcastを含むアクセシビリティBlogでは、Twitterのアカウントを使いまして、コンテンツが更新されるごとに、皆さまに情報をお届けしていきます。
 - ウ:
 - はい。
 - 辻:
 - アットマーク、エムエルシー、エーイチイチワイ。@mlca11yをフォローしていただきますと、コンテンツが更新されるたびに、みなさまに情報をお伝えいたします。
 - ウ:
 - はい。
 - 辻:
 - こちらの、アットマーク、エムエルシー、エーイチイチワイのほうでも、アクセシビリティPodcastへのご感想などを、お待ちしております。
 - ウ:
 - ああ、なるほどね。
 - 辻:
 - はい。140文字以内なので、
 - ウ:
 - うん。
 - 辻:
 - ちょっとコンパクトに書かなければいけないという制限はあるんですけども、
 - ウ:
 - まあでも逆に、ひとこと感想で
 - 辻:
 - そうですね。
 - ウ:
 - 書きやすいかもしれないね。
 - 辻:
 - はい。
 - ウ:
 - うん。
 - 辻:
 - ぜひお願いいたします。
 - ウ:
 - お待ちしてます。
 - 辻:
 - はい。
 - ウ:
 - はい。
 - 辻:
 - それでは、
 - 二人:
 - アディオス アミーゴス!
 
コメント
ARIA Landmark、Live region等はRIAをアクセシブルにする正攻法の一つとして推進したいものです。
ただ、WAI-ARIAはXHTML 2.0の拡張の一つとして検討されていたものと理解しています。現在有効な仕様に矛盾しない形でARIAマークアップを使えないとすれば、WCAG2のロバスト性とのかねあいで自己矛盾してしまうと思います。
XHTML 2.0がストップしてHTML5に向かおうとしている状況なので、今後の動向が気になります。そのあたりの最新事情もどこかで取り上げていただけないでしょうか。
井上様
コメントをいただきまして、どうもありがとうございました。
いただきましたご質問につきましては、別途当社のWeb標準Blogの方で取り上げさせていただけたらと考えております。
引き続き今後ともどうぞよろしくお願いいたします。
ミツエーリンクスでは、WCAG準拠やJIS X 8341-3対応をはじめ、さまざまなWebアクセシビリティ関連サービスをご提供しています。是非アクセシビリティのページをご覧いただき、お気軽にお問い合わせください。

