タイトルがない、または中身の分からないiframe

地図のフレームには名前がなく、動画の名前は動画サービスの初期値のため、どちらもフレームの中身をスクリーンリーダー利用者に伝えません。

各フレームに中身を表す短い名前が付き、スクリーンリーダーは「Kiln Room（4 Mill Lane）の地図 フレーム」「スタジオ紹介の動画 フレーム」と読みます。道順を知りたい人は、どちらに入ればよいか分かります。動画の初期値のタイトルは、新しい名前と並べて残さず、書き換えています。title はフレームに名前を付けるためのHTMLの属性で、ブラウザーとスクリーンリーダーは、どのARIA属性よりも長くフレームの title を読んできました。

チャット、予約、決済、レビューのウィジェットは、多くの場合スクリプトで iframe を挿入するため、タイトルを書き足せる自分たちのマークアップがありません。それでも、中に読み込まれる内容が提供元のドメインから来ていても、iframe 要素そのものはページの一部なので、名前を付けられます。次のうち、最初に使えるものを選んでください。

まず、ウィジェット自身の設定を使います。多くのSDKは、初期化のときにタイトル、ラベル、アクセシビリティの設定を受け取るか、渡したコンテナからタイトルを写します。設定の名前は提供元によって違うため、ドキュメントを確認してください。提供元の更新を経ても残る修正は、設定だけです。CMSやネットショップのプラグインがテンプレートで iframe を出力する場合も同じです。まず設定を探し、なければプラットフォームが用意しているテンプレートの上書きやフィルターフックを使います。どちらもプラグインを更新しても残りますが、プラグインのファイルを直接書き換えた修正は消えます。

設定がなければ、自分たちのスクリプトでタイトルを付けます。SDKに準備完了や読み込み完了のコールバックがあればその中で、なければウィジェットのコンテナを監視して付けます。開く、閉じる、次の手順へ進むといった操作のたびにフレームを差し替えるウィジェットが多いため、一度付けて終わりにせず、付け続けます。

監視するのは文書全体ではなく、ウィジェットのコンテナだけにします。このオブザーバーは属性ではなくフレームの追加に反応するため、タイトルを付けても再び呼ばれることはありません。ウィジェットが複数のフレームを追加する場合は、すべてに同じ名前を付けず、利用者が操作するフレームを選んで付けます。この方法は提供元のマークアップが変わらない間しか持たず、スクリプトの読み込みに失敗すれば何もしません。応急処置として扱い、名前がないことを提供元に報告し、提供元が更新するたびにページを確認し直してください。

SDKは、メッセージのやり取りや不正利用のチェックのために、何も表示しない小さな補助フレームも追加することがあります。display: none で隠されたものには何も要りません。1、2ピクセルの大きさでページに残っているものはスクリーンリーダーに伝わるため、「決済のセキュリティチェック」のように役割で名前を付け、隠すよう提供元に依頼します。閉じたShadow Rootの中にあるフレームには、ページのどのスクリプトからも届かず、直せるのは提供元だけです。

ウィジェットを直せない場合も、問題はページに残ります。WCAGは、管理できない第三者のコンテンツについて部分適合の表明を認めていますが、それは不足を説明するもので、解消するものではありません。アクセシビリティ方針でそのウィジェットを挙げ、予約用のメールアドレスなど、同じことをする別の方法を示し、提供元を選ぶときや契約を更新するときの判断材料にしてください。

iframe に aria-label や aria-labelledby を付けても名前は付き、どちらも title より優先されます。ここではどちらも何も加えません。title と aria-label の両方があるフレームは、名前を2つ持ち、いずれ食い違うおそれがあるため、title だけを付けます。

フレームのマークアップがどこから来るかで、タイトルを付ける場所が決まります。

• 自分たちのテンプレートにあるフレーム：マークアップに title を書きます。埋め込み用のコンポーネントでは、「埋め込みコンテンツ」のような初期値にせず、必須のpropsにします。
• コンテンツ編集者が貼り付けるフレーム：埋め込みブロックにタイトルの必須欄を設けます。貼り付けたコードから属性を消したり、動画サービスの初期値を残したりするエディターもあるため、公開されたページで確認します。
• 外部のウィジェット、プラグイン、SDKが挿入するフレーム：編集できるマークアップがないため、前の節のとおり、ウィジェットの設定を使うか、スクリプトでタイトルを付けます。

名前はページの言語で書きます。動画サービスの初期値は英語のことが多く、日本語に設定したスクリーンリーダーは、それを不自然な発音で読みます。名前は短く具体的にします。「春に撮影した、陶芸スタジオを2分で紹介する動画」ではなく「スタジオ紹介の動画」です。名前と一緒にロールが読まれるため、「フレーム」や「iframe」を名前に入れる必要はありません。

トラッキング用のフレームのように、display: none、visibility: hidden、hidden 属性で隠されたフレームは支援技術に伝わらないため、名前は要りません。警告を消すために、見えているフレームを aria-hidden で隠すのはやめてください。中のフォーカスできる要素は、何も読まれないままフォーカスを受け取ります。

フレームの中の文書が自分たちのものなら、その文書にもフレームの名前と同じ内容の <title> を付けます。フレームに入るときにその文書のタイトルを読むスクリーンリーダーがあり、フレームを単独で開いたときにはページのタイトルになります。