こんにちは!2014年7月23日(水)にAccSellメール・マガジン第46号を発行しました!
- [連載]中根雅文の「全盲のコンピューター利用に関する四方山話」
- 第45回:存在感を増すUnixシステム
- [連載]植木 真の「"勝手に" & "こっそり" Webアクセシビリティ診断」
- 第10回:できるだけアクセシブルにまとめてみよう。
- [不定期連載]山本和泉の「izuizuのアクセシビリティ100本ノック」
- 5本目:iframeを改めて考えてみる
100本ノックはようやく5本目。今回はizuizuの思い込みマークアップ編です。
[不定期連載]山本和泉の「izuizuのアクセシビリティ100本ノック」
第5本目:iframeを改めて考えてみるこんにちは。
「izuizuのアクセシビリティ100本ノック!」5本目です!
今回は、以前から存在が気になっていたiframeについて考えてみます。そもそもiframeってどういうもの?
iframeというのは、Webページ内に別のHTMLファイルの内容を表示させるための枠です。たとえば、トップページの「What's New」などでよく見かけます。
サンプルページはこちらサンプルファイルでは、index.htmlにnews.htmlを読み込ませて表示させています。
該当のソースコードは以下のような感じです。
<div> <iframe src="news.html"></iframe> </div>
なんで今回考えてみたいと思ったの?
index.htmlのソースコードの中にはnews.htmlの内容は記述されていないので、スクリーンリーダーではnews.htmlの内容は無視されるのではないかと勝手に思い込んでいます。なので、個人的にiframeはアクセシビリティ的にできるだけ使わないほうがいいと思っています。
が、いろいろな事情でどうしてもiframeを使わないといけないこともあるのではないかと。そんなとき、どうしたらいいのだろう、というのを調べてみました。
HTML5からなんか使えるようになったっぽい
iframeについて改めて調べてみたところ、HTML5からiframeに「seamless属性」というのが追加されたようです。これはあたかも親文書(ここでいうindex.html)の一部として認識される属性のようです。ということは、news.htmlの内容などがスクリーンリーダーでどういう仕組みかわらからないけど、読んでくれるんじゃないの?もしや、これ使えるんじゃないの?!
ソースコードはこんな感じ<div> <iframe src="iframe.html" seamless></iframe> </div>
seamless属性を追加したら、まるっとiframe問題は解決してしまうのではないかしら?ということは、積極的にiframeって使っていいんじゃないの?と勝手に妄想を膨らましてしまいました。
中根監督と植木コーチのiframeについての意見をぜひ伺いたいです!