<iframe> 要素による外部リソース埋め込みには <a href> のリンクを付与して欲しい

YouTube 動画を Web サイトに埋め込む場合、公式には以下の埋め込みタグが提供されています。

<iframe
	width="560"
	height="315"
	src="https://www.youtube.com/embed/jNQXAC9IVRw"
	title="YouTube video player"
	frameborder="0"
	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
	allowfullscreen
></iframe>

HTML5 で廃止された frameborder="0" を未だに使っているなど微妙な点がある一方、title 属性が設定されているのは評価できるところです。これは WCAG 2.2 の達成基準 2.4.1「ブロックスキップ」 および達成基準 4.1.2「Name, Role, Value」 に関係するもので、その詳細は達成方法集 H64 で解説されています。

• H64: Using the title attribute of the iframe element
• H64: frame 要素及び iframe 要素の title 属性を使用する(waic.jp)

• 一応日本語訳のリンクも張っておきますが、長らく内容が更新されていないので極力原文の方を参照してください。とくに日本語訳の「例 2」のマークアップ例のように、<iframe> 要素の中に <a> 要素を含めるのは HTML4 時代の古いやり方なので真似してはいけません。

このように埋め込みタグ自体は Web アクセシビリティも考慮したものとなっています。しかしこれはあくまで埋め込み部分しか表していないことには注意したいところです。埋め込み動画がページ内の主要なコンテンツである場合はおそらく見出し（<h1>〜<h6> 要素）と組み合わせるでしょうし、逆に本文の内容を補強する程度のものであれば <p><iframe ...></iframe></p> の単純な形に収まるかもしれません。

いずれにせよ動画のコンテキストによって <iframe> 要素の周囲のマークアップは変わるものであり、そこを考えるのはプラットフォーム管理者（YouTube を運営する Google LLC）ではなく、動画を埋め込んだページのコンテンツ提供者の責務です。

公式の埋め込みタグをそのままページに設定しても動画が再生できないケースがあります。

一例を挙げましょう。デジタル庁のサイトでは会見動画などで YouTube 動画を活用されていますが、例えば河野大臣記者会見（令和5年12月5日）(www.digital.go.jp) を私の普段使いのブラウザ[1]で再生しようとするとこうなります。

このようにページロードの時点ではサムネイル画像と赤い再生ボタンが表示されるものの、再生しようとすると10秒ほどのローディングののちエラー画面になってしまいます。エラー画面の右下には YouTube アイコンが表示されているので、これをクリックすれば動画ページに飛べそうな気がしますが、実際には YouTube のトップページに遷移するので意味がありません。

これもブラウザ設定の一種と言えるかもしれませんが、おそらく多くのユーザーが「設定」という意識なしに使っている機能にいわゆる「リーダーモード」があります。

先に挙げた河野大臣記者会見（令和5年12月5日）(www.digital.go.jp) を Brave ブラウザ(brave.com) のリーダーモードで閲覧するとこうなります。

令和5年12月5日、河野デジタル大臣が記者会見を行いました。会見要旨は後日、掲載いたします。の直上にあるはずの埋め込み動画が表示されていません。枠線などもないので、本来そこに動画が存在することすらユーザーに伝わりません。

• リーダーモードを表示しやすいという理由で Brave での閲覧例を挙げましたが、Firefox や Vivaldi など他のブラウザも似たようなもので、多くの環境では YouTube 埋め込み動画が表示すらされない状況です。
• 私の手元の環境では唯一 iOS Safari のみ、リーダーモードでも動画の表示・再生を行うことができました。なかなかに鬼門ですね……。

YouTube にアップされた動画はいつ見られなくなるか分かりません。第三者の動画は予告なく削除されるかもしれませんし、自分自身がアップロードした動画であってもプラットフォーム側の都合で非公開にされることがあります。外国企業が運営するサービスの場合、日本の常識では考えられないような理由で理不尽な対応が行われることも珍しいことではありません。削除まではされずとも、「埋め込みの許可」の設定があとから不許可に変更されたり、非公開設定に変更されたりすることもあり得ます。

試しに10年前（2013年）に公開された映画の公式サイトをいくつか調べてみたところ、『劇場版 HUNTER×HUNTER―The LAST MISSION―』の予告動画ページ(www.vap.co.jp) はいかなる理由か、6つの動画すべてが非公開に変更されていました。このような場合はそれこそ Chrome をデフォルト設定で使用しているようなユーザーも含め、すべての閲覧者に影響が出ることになります。

YouTube の埋め込み動画は通常モードのほか、プライバシー強化モード(support.google.com) が用意されています。

プライバシー強化モードを使用した場合、埋め込み（src 属性値）のドメインが www.youtube.com から www.youtube-nocookie.com に変更になり、サードパーティ Cookie のセットのタイミングや広告のカスタマイズ有無が変わります。それだけでなく、ブラウザの設定によっては通常モードの埋め込み動画は再生できないがプライバシー強化モードなら再生可能といったように、再生可否すら変わってくることもあります。

以下の検証ページに埋め込み許可、埋め込み不許可、非公開、削除済みの4パターンについて、それぞれ通常モードとプライバシー強化モードのサンプルを用意しましたので、それぞれのパターンについてブラウザの Cookie 設定や通信周りの設定を変えながら、再生可否や動画ページへのリンク遷移の可否、あるいは開発者モードを見ながら Cookie がどのタイミングでセットされるかなどを体験してみてください。

• YouTube embed sample(labs.w0s.jp)

デジタル庁の事例で示したような、ブラウザ設定により動画が再生されない挙動はバグでも何でもなく、Web として正しい挙動です。画像や動画、あるいは外部スタイルシート、外部スクリプトなどの HTML とは別のリソースは、プライバシー上の問題やネットワーク通信量などの事由によりどれをロードしてどれをブロックするか任意に選択できるべきでしょう。旧 Presto Opera ユーザーを意識した Vivaldi ブラウザ(vivaldi.com) では設定画面を開かずとも「画像の読み込み」をユーザーが選択できるなど、そういった思想が強く表れています。しかし埋め込みリソースをブロックしているユーザーは、あくまで埋め込みで勝手にロードされるのを嫌っているだけであり、対象リソースそのものを見たくないと思っているとは限りません。

また『劇場版 HUNTER×HUNTER』の事例で示したような、動画が削除や非公開にされた場合、その動画を再生できないこと自体は当然のことです。しかし問題は埋め込みではこれが何の動画だったのかすら分からないことにあります。

『HUNTER×HUNTER』の作品ファンあるいはアニメ史研究などで予告動画のタイトル、アップされた時期、高評価数、SNS での反応などを調査したいケースがあるでしょう。ところが困ったことに <iframe> 要素の埋め込みでは動画ページの URL すら分かりません。実は削除された動画であってもフレーム内で右クリックをすれば「動画の URL をコピー」することができるのですが、コピーされた URL は https://youtu.be/Y0_VusjbavY のように短縮 URL となります。その実際の URL は https://www.youtube.com/watch?v=Y0_VusjbavY であるという事実は万人が理解していることではありません。youtu.be が短縮 URL であることを知らないユーザーは、短縮 URL を元に調査をしようとして、結果なにも情報が得られないことになってしまいます。

• Internet Archive で "https://youtu.be/Y0_VusjbavY" を検索（ヒットしない）(web.archive.org)
• Internet Archive で "https://www.youtube.com/watch?v=Y0_VusjbavY" を検索（3件のアーカイブがヒット）(web.archive.org)

短縮 URL で Internet Archive を検索しても何も情報が得られませんが、本来の URL であれば動画の正式タイトル、おおよその公開時期、アップロードアカウントを知ることができます。

さて、デジタル庁と『劇場版 HUNTER×HUNTER』の事例のどちらにも共通している問題は、<iframe> 要素の埋め込みにテキスト情報が設定されていないことにより、何らかの理由で埋め込み動画が再生できなかった場合にユーザーが代替手段を取ることができない状況にある（正確には、不可能なわけではないが難しい）ことであると言えます。

それでは <iframe> 要素のテキスト情報に何を設定すればよいかというと、すでに説明してきたように動画ページの URL がなにより重要です。Web アクセシビリティの文脈でよく言われることとして、画像にどのような代替テキストを付けるか悩んだとき「電話越しの相手に画像内容を説明するイメージで考えると良い」という例えがありますが[2]、同様に「紙の本で YouTube 動画を紹介するとしたらどの情報が必要か」を考えれば、URL が最重要事項であることに異論は少ないでしょう。

そのうえで、せっかく HTML なのですから URL は単なる文字列として提示するのではなく、<a href> によるリンクにするとより良いのではないでしょうか。それを鑑みたうえでテキスト情報（リンク）を含んだ YouTube 埋め込みのマークアップの一例を以下に示します。

<style>
iframe:is(
	[src^="https://www.youtube.com/embed/" i],
	[src^="https://www.youtube-nocookie.com/embed/" i]
) {
	border: none; /* frameborder="0" の代わりにスタイルシートで設定する */
}
</style>

<figure>
	<iframe
		width="560"
		height="315"
		src="https://www.youtube.com/embed/jNQXAC9IVRw"
		title="YouTube video player"
		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
		allowfullscreen
	></iframe>
	<figcaption><a href="https://www.youtube.com/watch?v=jNQXAC9IVRw" rel="external">Me at the zoo <!-- 動画のタイトル --></a></figcaption>
</figure>

このようにすることで、なによりコンテンツ提供者は「埋め込み動画が再生可能かどうか」を気にする責務から解放されます。

• なお、title 属性値はページの言語に応じて適宜変更してください。日本語コンテンツにも関わらずデフォルトの title="YouTube video player" のままにしているページを多く見かけますが、title 属性値は人間が読むものなのでページの言語に合わせるのが自然でしょう。

問題ある実例ばかりを挙げてきましたが、良い実例も挙げましょう。といっても世の中のほとんどのサイトは <iframe> 要素にリンクを併記していないため、Togetter(togetter.com) の1例しか知らないのですが……。

Togetter のサービス内容はツイートやさまざまな情報を組み合わせてコンテンツを保存できるサービス(www.togetter.co.jp) と説明されており、特定のテーマに関する複数の投稿を「まとめる」だけでなく「保存」の側面も重要であることが分かります。そして、まとめにはツイート（X の投稿）だけでなく任意の Web ページや Amazon 商品、YouTube 動画などを直接指定することも可能です。作成画面から YouTube 動画を選択すると自動的に動画タイトルが抽出され、まとめページでは動画の直下に YouTube 動画ページへのリンクが挿入されます。

YouTube 動画を一つだけ含んだまとめページ（※なにも “まとめ” てはいない）を作るとこんな感じになります。

• Togetter の YouTube 動画埋め込み機能は Web アクセシビリティ面から評価できる(togetter.com)

このように埋め込み動画の直下にリンクが設定されていることで、前述のようにブラウザ設定によって埋め込み動画が再生できなかったり、リーダーモードで動画が表示されなかったりしても YouTube 動画ページへの導線が（まとめ作成者の意志に関わらず自動的に）確保され、ユーザーに対して動画をどこで再生するかの選択肢が用意されているのは評価できるところです。