要約

インラインフレームに一意のタイトルを付け、ユーザーがコンテンツを読むか操作するかを決定できるようにします。そして、サイズ変更やズーム後もフレーム内のコンテンツを使用できるようにします。

テクニック

• aria-label、aria-labelledby、title により、フレームに意味のあるラベルを付けます。
  [[WCAG-2.4.1]] および [[WCAG-4.1.2]]
• 特定のユーザー向けではないフレームを、ラベルで識別します。
• iframeのサイズを設定する際には相対単位を使用します。
• scrolling属性をautoに設定します。（訳注：HTML5ではiframeのscrolling属性は廃止されています。）

例

<iframe href="quiz01.xhtml" title="Quiz 1" class="quiz"> Your user agent does not support inline frames. Please follow <a  href="quiz01.xhtml">this link</a>  to open Quiz 1. </iframe>

<iframe
      href="script.xhtml"
      title="empty"
      tabindex="-1"
      height="0"
      width="0"
      class="hidden">
</iframe>

解説

一般的にインラインフレームは支援技術とうまく調和しますが、使用時には以下のアクセシビリティにおける考慮事項に従ってください。

• 各インラインフレームには、埋め込まれたコンテンツの目的を明確に示す説明をタイトル（iframe要素のtitle属性）として付けてください。
• iframeの高さと幅を設定する際は、サイズ変更を容易にするために、パーセンテージやemなどの相対単位を使用してください。
• scrollingはautoに設定する必要があります。そうすることで、ユーザーがフレーム内のコンテンツのサイズを変更し、枠内に収まらなくなった場合でも、コンテンツにアクセスできるようになります。（訳注：HTML5ではiframeのscrolling属性は廃止されています。）
• iframe要素は、インラインフレームをサポートしていないユーザーエージェントに対して、埋め込まれたフォールバック コンテンツ（コンテンツ ファイルへの直接リンクなど）を提供する必要があります。
• フレームにユーザー向けのコンテンツが含まれていない場合は、title属性でその旨を示し、CSS displayプロパティをnoneに設定し、高さと幅を0に設定します。ユーザーが要素にタブ移動できないように、tabindex属性を-1に設定します。

関連リンク

• MDN — <iframe>: インラインフレーム要素
• HTML —iframe要素