要約

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

テクニック

• フレームに意味のあるラベル（ aria-label 、 aria-labelledby 、 title ）をつけるようにします。
  [[WCAG-2.4.1]] および [[WCAG-4.1.2]]
• 特定のユーザー向けではないフレームを、ラベルで識別します。
• iframeのサイズを設定する際には相対単位を使用します。
• スクロールをautoに設定します。

例

<iframe
      href="quiz01.xhtml"
      title="Quiz 1"
      class="quiz">
      あなたのユーザーエージェントはインラインフレームをサポートしていません。クイズ１を開くには、<a href="quiz01.xhtml">こちらのリンク</a> を開いてください。
</iframe>

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

解説

インラインフレームは一般的に支援技術とうまく動作しますが、使用時には次のアクセシビリティの考慮事項に常に従う必要があります。

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

関連リンク

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