［不定期連載］山本和泉の「izuizuのアクセシビリティ100本ノック」
第5本目：コーチ＆監督指導からの実験結果報告

こんにちは。
あっという間に9月ですね。気づいたら年末も近い！夏休みの宿題もまだなのに！

さて、自分から言い出しておいて右往左往している「iframe問題」。

前回、中根監督、植木コーチから「スクリーンリーダーで確認したのかい？」という指摘にあたふたしてしまったのはここだけの話（全然内緒になってない）。

ということで、今回のiframe問題をスクリーンリーダーで検証してみました！今回試してみたスクリーンリーダーは、Mac OS X に標準で入っている「VoiceOver」です。

結論：iframeは問題なく読み上げられる

まず、スクリーンリーダーでサンプルページを試してみました。サンプルページはこちら

見出し1から順番に読み上げられ、いよいよフレームの箇所へ！いざ！

VoiceOver（以下VO）「フレーム。2014年7月20日・・・」

ふつー！フツー！普通になにかに戸惑うこともなく「ですがなにか？」ってな感じでスムーズに読み上げられました。いままで心配していたのは一体なんだったのだろう・・・

seamless属性のアリナシ問題

サンプル2では<iframe>タグ内に、HTML5から追加になった「seamless属性」を入れてみました。

<div>
  <iframe src="iframe.html" seamless></iframe>
</div>  

サンプルページ2はこちら

こちら、サンプル1と全く変化がありませんでした。seamless属性は、ブラウザー表示をしたときにiframeの枠線を表示させないで親ページと一体化したように見せる（ブラウザーの種類による）属性です。ブラウザーの表示のための属性のようですが、スクリーンリーダーになにか変化はあるかなぁ、って思ったのですが、全くもってアテが外れました。

ということで、<iframe>タグって私が心配していたより、使えるかも？
ただ、iframe内も問題なく読み上げられる、ということは、iframe内のHTMLとかのデータが多すぎるとその中身を全部読み上げるということですよね。ということは、用法用量を正しく使わないとかなりツライことになるなぁ、ということが、今回の実験で知ることができました。

ただ、<iframe>タグにあるtitle属性のこととか、その他ももう少し検証してみる必要があるので、またいろいろ実験していこうと思います！

AccSellのお問い合わせページも試してみた

前回、中根監督から「AccSellのお問い合わせフォームについて、なぜ僕が特に文句も言わずに2年間も現状で提供されているのか」という指摘がありました。
なので、こちらも試してみました！

AccSellのお問い合わせフォームは、Googleのフォームを利用していて、<iframe>タグで設置しています。
結論、全く問題なく読み上げられていました。なるほど。。。

だから、中根監督はお問い合わせページでGoogleのフォームを使うときに「いいんじゃない？」って言ってくれていたんだ・・・。ありがとうございます！

Mac OS XのVoiceOverを使う時の注意点

今回、初めてMac OS Xに標準で搭載されているスクリーンリーダー「VoiceOver」を使ってみました。
VoiceOverを起動して、ブラウザー（現時点では正式サポートはSafariのみのようです）をアクティブにしたところ、ずっと<title>タグしか読み上げられなくて、何十回も<title>タグの内容ばかり聞かされて、またはブラウザーのメニューボタンやリンクボタンばかり読み上げあれて、フラストレーション溜まりまくって、Macを投げ飛ばそうかと思ってしまいました（やらなかったけど）。

調べても調べても解決方法が見つからず、途方に暮れていたその時！突然ブラウザーに表示している中身を読み上げ始めました。

ページをリロードしたらVoiceOverちゃんが中身をしゃべってくれたのです！
リロード！！リロードしたらしゃべったよ！

ということで、私のように「スクリーンリーダーってハードル高すぎるわー」って思っていて、でもちょっと使ってみたいな、そしてMacユーザーさんは、VoiceOverでブラウザー読み上げをするときは、ページを開いたあと「リロード」してみてください。新しい世界が広がりますよ、まじで。

ただ、リロードして読み上げるのは正しい方法ではないっぽいです。
なので、正式な読み上げ方法がわかったらまたメルマガで報告します！！がんばるぞーーー！