<picture>要素

Technical Summary

Definition / Categories

項目	仕様上の整理
意味	子のimgに対する複数sourceとresource selectionのcontextを提供するcontainer
Categories	Flow content、Phrasing content、Embedded content、Palpable content
Context	Embedded contentが期待される場所
Content model	0個以上のsource、続いて1個のimg。script-supporting elementsは仕様上許可される位置に置ける
Tag omission	開始タグ・終了タグとも省略不可
Content attributes	Global attributesのみ。候補条件は子のsource、表示される画像とaltは子のimgが担う
DOM interface	HTMLPictureElement

Source selectionの境界

ユーザーエージェントはpicture内のsourceを文書順に評価し、media条件とtypeの対応可能性を候補選択へ反映します。選択されたsourceはsrcsetと、必要に応じてsizesからimage source setを構成します。その後の候補選択は、表示slot、pixel density、環境条件などを含む画像処理モデルと接続します。

属性	picture内の意味
media	media query listが現在の環境に適合するかを候補条件にする
type	画像のMIME typeを示し、対応できない形式の候補を取得前に飛ばせる場合がある
srcset	選択されたsourceが提供するimage candidates
sizes	width descriptorを使うsource setのsource size。条件により省略可否が変わる
src	picture内のsourceには使用せず、fallbackのimgへ置く

sourceは単独で表示内容を表す要素ではありません。また、picture内のsourceと、audio・video内のsourceでは、src・srcsetなどの意味とresource selection algorithmが異なります。

Art directionとresolution switching

目的	主なモデル	注意点
同じ構図の解像度候補	img srcset sizes	slot sizeとpixel densityに基づく候補選択を、不要なmedia条件で固定しない
構図・切り抜きの切り替え	複数source media + fallback img	候補ごとに画像の意味が変わりすぎないか、altと周辺説明を確認する
画像形式の切り替え	複数source type + fallback img	type条件は取得前の対応判定の入口であり、実際の取得・decode・表示を同一視しない

FallbackとAccessibility

pictureは画像の表示面そのものではなく、選択contextです。画像の意味を伝えるaltはfallbackとなるimgに置きます。named image、empty-alt image、画像が選択される前後のAccessibility Treeは、picture自身のroleと混同せず、選択されたimgのmappingとして観測します。

したがって、source候補が複数あることだけを理由に複数の画像を支援技術へ公開するとは限りません。実際のbrowser tree、platform API、支援技術の結果は環境ごとに分けて記録する必要があります。

DOM Interface

const picture = document.querySelector('picture');
const sources = picture.querySelectorAll('source');
const image = picture.querySelector('img');

picture instanceof HTMLPictureElement;
sources[0] instanceof HTMLSourceElement;
image.currentSrc;

HTMLPictureElementはHTMLElementを継承するinterfaceで、source selectionを直接返す専用APIを持つものではありません。選択後のURLを観測する入口は、子のimgのcurrentSrcです。

Fact / Evidence（主張 / 根拠）

content model、source selection、属性の適用条件、fallback、Accessibilityを分離し、仕様上の主張と実装観測を同一視しないように記録します。

Evidence

1. HTML Standard: The picture element — meaning、categories、content model、HTMLPictureElement、selection context
2. HTML Standard: The source element — picture内のmedia、type、srcset、sizes、dimension attributes
3. HTML Standard: Images — source set、candidate selection、表示slot、pixel density、art direction
4. HTML Accessibility API Mappings: picture — pictureと選択されたimgのAccessibility mappingの入口
5. Web Platform Tests: embedded content — picture、source、img、responsive imageに関係するテスト群の入口

Implementation Evidence

仕様上の主張とは別に、ブラウザーのsource selection、currentSrc、network request、Accessibility Treeの観測を記録します。専用fixtureはまだ実行していないため、未実行項目を確認済みとは扱いません。

Fixture候補: picture-v1では、mediaの順序、typeの候補選択、srcset・sizes、fallbackのimg、viewport・DPR変更時のcurrentSrc、network requestを確認する。named / empty-altのAccessibility Treeは、選択されたimgとpictureの公開状態を分けて観測する。

source selection、画像取得、decode、候補選択後のtree、platform API、支援技術の結果は、ブラウザー・OS・viewport・DPR・network・画像形式に依存し得ます。単一環境の観測を、すべての実装に共通する結果として登録しません。

Coverage / Open Issues

• 確認済み意味、Categories、Context、Content model、tag omission、HTMLPictureElement
• 確認済みsourceのmedia・type・srcset・sizesとimg fallbackの仕様上の境界
• 確認済みresolution switchingとart direction、画像形式選択、altとAccessibility mappingの入口
• 未完了Chrome、Firefox、Safariでのsource selection、currentSrc、network request、viewport・DPR変更の比較
• 未完了WPTの個別実行、形式ごとのdecode・error・fallback、動的なsource挿入・移動・属性変更
• 未完了HTML-AAM全mapping、Accessibility Tree、platform API、支援技術、CORS・referrer policy・cache・保存データ条件

このページは初期Coverageです。仕様上の入口と根拠を整理していますが、Pendingと表示した実装・WPT・AAM項目を確認済みとは扱いません。

Related surface

初心者向けの画像候補、alt、寸法、読み込みの説明はYugienのpicture要素ページを参照してください。単一画像とsrcset・sizesの画像処理モデルはimg要素、sourceの親要素別の属性条件・候補選択はsource要素、media element内での選択との比較はvideo要素で確認できます。audio要素固有の範囲は別Topicとして扱います。