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

聴取方法のご案内

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

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

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

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

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

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

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

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

二人：

辻ちゃん、ウエちゃんのアクセシビリティPodcast！2009！いぇーい

辻：

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

ウ：

後半いってみよう！で、次ふたつめのサンプルなんですけれども、今度はですね、ホテルの予約サイト、という想定なんですが、ページにですね、いろんなホテルとか旅館の名前がこうずらずらーっと並んでいて、

辻：

はい。

ウ：

で、それぞれに対して、地図とか、お客様の声とか、ご予約っていうリンクがそれぞれに並んでいますと。

辻：

はい。

ウ：

なので、地図とか、あとご予約っていう、同じリンクがいくつも同じページにある状態なんですけれども、それだけ聞いてると、途中でやっぱりどのホテルの地図なのかっていうのがわかんなくなってしまうと。

辻：

はいはいはい。

ヒロ：

うーん。

ウ：

というわけで、そういう場合、たとえばそれぞれのホテルとか旅館の名前が見出しとしてマークアップされていれば、スクリーンリーダーをつかって、それを確認することができるんじゃないかと。

ヒロ：

うーん。

ウ：

いうものなんですけれども。

辻：

はい。

ヒロ：

Tabキーでリンクをどんどん聞いていくと、たぶん同じようなリンクが何度も繰り返し読み上げられてしまうんですよね。

ウ：

そうですね。ちょっとこれも辻ちゃんに

辻：

はい。

ウ：

やってみてもらいましょうか。

辻：

はい。

ウ：

はい。

辻：

じゃあ、同じJAWSを使って、Tabキーをちょっと押してみますね。

JAWS：

ミツエーリンクス、ホテル、見出しレベル3、リンク

辻：

で、Tabキーをさらに押しますと

JAWS：

地図、リンク、写真、リンク、アクセス、リンク、お客様の声、リンク、ご予約、リンク、民宿ウエちゃん、見出しレベル3、リンク、地図、リンク、写真、リンク、アクセス、リンク、お客様の声、リンク

辻：

なるほど。こんな感じで同じような項目が入っていると

ウ：

そうですね。

辻：

いう感じですね。で、たとえば

JAWS：

ご予約、リンク

辻：

ご予約、民宿ウエちゃん、あの、どんなサービスかちょっと興味あるんで

二人：

（笑）

ウ：

ないしょです！

辻：

（笑）はい、Shift＋Hを押して見出しにジャンプしてみますね。

JAWS：

民宿ウエちゃん、見出しレベル3、リンク

辻：

このように、簡単に「民宿ウエちゃん」という見出しに飛ぶことができるので、前後関係がある程度わかるという

ウ：

そうですね。

辻：

例ですよね。

ウ：

これは、ホテルとか旅館の名前が見出しでマークアップされていることが重要で、

辻：

はい。

ウ：

見出しでマークアップされていれば、今のJAWSみたいに、直前の見出しを確認しにいくことができると。

辻：

はい。

ウ：

なので、「ご予約」っていうリンクであっても、それが「民宿ウエちゃん」、気になる民宿ですけれども、

二人：

はい（笑）

ウ：

民宿ウエちゃんのご予約なのか、それともミツエーリンクスホテルのご予約なのか

辻：

ああ、はい。

ウ：

なぜミツエーリンクスがホテルで、うちが民宿なんだという。

二人：

（笑）

ウ：

素朴な疑問はわくんですが、

辻：

いやいやいや、なんかわたしが心のこもったおもてなしをさせていただこうかと。

ウ：

なるほど。

辻：

思いますので。

ウ：

民宿ウエちゃんのほうで？

辻：

いや。あの…

ヒロ：

出張ですか？

辻：

いや、あのミツエーリンクスホテルのほうで。

ウ：

つぶしてやる…

辻：

（笑）はい。

ウ：

まあそういう感じでですね、これもおそらく、見出しのマークアップを認識できるスクリーンリーダーであれば、同じようなことができるだろうと。

辻：

そうですね。

ウ：

いうことですね。

辻：

はい。あと、音声ブラウザでいうと、

ウ：

うん。

辻：

NetReaderでも同じようなことができますよね。

ウ：

うん。

辻：

まあ、そういった意味で、見出しをちゃんと認識できるスクリーンリーダー、音声ブラウザ、増えてきましたので、

ウ：

そうですね。

辻：

こういう手法も使えるんじゃないかなと

ウ：

はい。

辻：

思いますね。

ウ：

で、最後みっつめがですね、データテーブルの場合なんですけれども、今日用意したサンプルのデータテーブルはですね、レンタカー会社5社の車種別料金がデータセルにずらりと並んでいて、で、その金額が全部リンクになってると。

辻：

なるほど。

ウ：

というものです。

辻：

はい。

ウ：

で、1列目に横に並んでいる見出しがレンタカー会社の名前、A社B社C社、というふうに並んでます。

辻：

はい。

ウ：

それから、1行目に縦に並んでいる見出しが、車種を示しているという表なんですけれども、これもですね、ふつうにTabキーで移動していくと、データセルに書いてあるのは料金、金額だけなので、

辻：

うん。

ウ：

何円、何円、何円、というふうに、金額だけが読み上げられる

辻：

はい。

ウ：

形になるんですけれども、これもデータテーブルとしてきちんとマークアップがされていればですね、会社名だったり車種が金額と一緒に確認することができるというものです。

二人：

はい。

ヒロ：

テーブル読み上げモードを使えば結構大丈夫そうな気がしますね。

ウ：

そうですね。

辻：

はい。これも例を出してみましょうか。

ウ：

はい。お願いします。

辻：

また同じようにTabキーで1個ずつ飛んでいきますと、

JAWS：

例3、ピリオド、データテーブルのデータセルと見出しセル、見出しレベル2

辻：

今Hキーを押してジャンプしましたので、Tabキーを

JAWS：

6700円、リンク

辻：

ああ、いきなり6700円と読まれましたね。

JAWS：

6800円、リンク

辻：

これを、JAWSのテーブル読み上げコマンドを使って読んでいきますと、左のセルに移動しますね。

JAWS：

A社、縦線、リンク、6700円、縦線、2列、縦線、軽自動車、縦線、1列

辻：

A社の、今の

JAWS：

A社、縦線、リンク、6700円、縦線2列

辻：

この6700円っていうのは2列に書いてあったので、軽自動車の料金ということになりますね。で、右に動かしていきますと、

JAWS：

B社、縦線リンク、6800円、縦線、3列

辻：

B社のほうが若干高いということがわかりますよね。

ウ：

うん。

辻：

で、これちょっと、おもむろに、いろんなところに動いていってみましょうか。

JAWS：

最下段、リンク、8300円、縦線

辻：

今、8300円と聞こえたと思うんですけども、

ウ：

うん。

辻：

ここの一番左に移動しますと、

JAWS：

A、縦線、ワゴン、縦線、1列

辻：

ワゴン、で、B社だったんですね、さっきのは。

ウ：

うんうん。

辻：

ふたつ右に移動します。

JAWS：

A、B社、縦線、リンク、8300円、縦線、3列

辻：

このように、関係が、スクリーンリーダーでもちゃんと理解できるかと思います。

ウ：

はい。という感じなんで、これもやっぱりデータテーブルの読み上げをサポートしているスクリーンリーダー、あるいは音声ブラウザであれば、データセルの中が金額だけのリンクだったとしても、見出しを確認しながら聞いていくことができるので、リンクの意味が理解できるというものですね。

ヒロ：

はい。

ウ：

はい。というわけで、達成基準を読んだだけだと、文脈ってなんじゃらほいって感じなんですけども、今いくつかサンプルを聞いていただいたようにですね、要はリンクテキストの文言だけだとリンク先の内容がわからないんですが、文全体ですとか、直前にある見出し、あるいはデータテーブルの場合にはテーブル読み上げモードとかにして、見出しのセルと一緒にあわせて考えると、リンク先の内容がわかりますと。そうなっていればOKというのがこの達成基準になります。

ヒロ：

うーん。

ウ：

まあつまり、HTMLであればですね、文書構造をきちんとマークアップしてあれば、ユーザーのほうはスクリーンリーダーの機能を使うと、その前後関係とか文脈から手がかりがつかめるので、シングルAの達成基準としては、それでもOKというわけですね。

ヒロ：

でもあの辻ちゃん、ユーザーの立場から考えると、やっぱりリンクテキストの文言だけで理解できたほうがいいんでしょうか。

辻：

そうですね。サンプルみたいに、文脈を頼りにするとなると、当然周囲にある情報を探す手間が増えちゃいますよね。

ウ：

そうですよね。なんでまあ、リンクテキストの文言に関してはですね、達成基準のほうにも、まず「それぞれのリンクの目的が、リンクのテキストだけから、『または』リンクのテキストとプログラムで解釈可能なリンクの文脈とあわせたものから解釈できなければならない」というふうに書いてあるので、まずは可能であれば、というか可能な限りリンクのテキストだけでリンク先がわかるようにするっていうのが前提で、

辻：

はい。

ウ：

それができない、どうしてもできないっていう場合には、後半に書いてあるように、「リンクのテキストとプログラムで解釈可能なリンクの文脈」今、今日紹介したような、文書構造のマークアップをきちんと使って、今日紹介したように文脈をたどっていけばわかるようにする、っていう2段階で考えたほうがいいかと思いますね。

ヒロ：

うーん。なるほど。リンクのテキストだけでわかるようにすれば、等級Aだけじゃなくって、等級AAAの7.2.4.9も同時に満たしたことになる、っていう理解で合ってますか？

ウ：

するどい。その通りです。なのでまあ、7.2.4.4シングルAと、それからトリプルAの7.2.4.9っていうのは、実は同じことを言っていて、

辻：

うーん。

ウ：

シングルAの7.2.4.4のほうは、文脈つきでもOK、まあ若干そっちのが緩くなってる、

ヒロ：

うん。

ウ：

という感じですね。で、まあ、このへんはWCAGワーキンググループのほうでもですね、理想をいうとトリプルAのほうになっているように、リンクのテキストだけでわかるようにすること、なんですけれども、

ヒロ：

うん。

ウ：

実際問題、現実にはどうしても無理な場合もありますので、そういう場合のことも考慮して、シングルAの、少し条件つきOKみたいな、そういった達成基準を用意したというような経緯もあったりします。

辻：

なるほど。ということで、本日はサンプルコンテンツを実際の読み上げ音声とともにご紹介してきましたが、いかがでしたでしょうか。

ウ：

はい。

辻：

アクセシビリティPodcastでは、引き続きみなさまからのご意見、ご感想などをお待ちしております。このBlogエントリーへのコメントか、または以下のメールアドレスまでお知らせください。エーイチイチワイ、アットマーク、ミツエードット、シーオードット、ジェイピー。エーイチイチワイ、アットマーク、ミツエー、ドット、シーオードット、ジェイピーです。（編注:a11y@mitsue.co.jp）そして、アクセシビリティPodcastを含みますアクセシビリティBlogでは、最新の記事がポストされますと、Twitterのほうで、お知らせを配信しております。アットマーク、エムエルシー、エーイチイチワイ。をフォローしていただきますと、アクセシビリティBlogの最新情報を、入手していただくことができます。（編注：MLC A11y Team (mlca11y) on Twitter）

ウ：

僕も、フォローしてますよ。

辻：

恐縮です。ではウエちゃん、次回は…どんな感じにしていきましょうか。

ウ：

そうですね、おそらくベンチのほうはこれぐらいのペースで投げていけと。

辻：

はい。

ウ：

いうことだと思いますので、

辻：

じゃあまた、等級Aについて

ウ：

そうですね、シングルAの達成基準を1個1個紹介しながら

辻：

はい。

ウ：

全体をカバーしていければいいかなと。

辻：

はい。

ウ：

考えております。

辻：

はい。

ウ：

はい。

辻：

では、アクセシビリティPodcast、また次回お会いしたいと思います。それでは、

三人：

アディオス　アミーゴス！

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

Pick Up

• アクセシビリティ

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