video-poster-text-alternative-present

<video>のポスターにはテキストによる代替がある必要があります

automaticWCAG 1.1.1 (A)確度:medium重大度:seriousperceivable

ポスター画像を持つ<video>要素が、テキストによる代替(アクセシブルな名前)を提供していることを確認します。

適用範囲:次の条件を満たす<video>要素に適用されます。1) 空でないposter属性を持つ、かつ2) 支援技術に公開されている(エンジンの対象判定による)。それ以外の理由でアクセシビリティツリーから隠されている要素も、タブで移動可能であるか、IDREFの関係で参照されている場合は、引き続き対象になります(対象判定による)。role="presentation"またはrole="none"を持つ動画は、フォーカス可能でない場合に限り除外します。

期待される結果:対象となる各<video>要素が、次の方法でポスター画像のテキストによる代替を提供しています。

  • アクセシブルな名前(aria-label / aria-labelledby / title)。

<video>のタグ間にあるフォールバックコンテンツは受け付けません。これは<video>をサポートしないブラウザーでしかレンダリングされないため、実際には支援技術に確実に公開されるとは限りません。また、<video>はラベル付け可能な要素ではないため、ネイティブの<label for="...">による関連付けも受け付けません。名前のない<video>が、空でない<figcaption>を持つ<figure>の唯一のコンテンツである場合は、不合格ではなく確認を求めます(cantTell)。キャプションが名前を付けるのは<video>ではなく<figure>ですが(HTML-AAM。Chromiumは<video>に名前を与えません)、ポスターを説明している可能性があり、それは人にしか判断できないためです。

検出結果が報告する内容:

  • reasonCode:cantTellの検出結果ではVIDEO_POSTER_FIGCAPTION_REVIEWで、キャプションのテキスト(最大100文字)であるfigcaptionも付きます。failではTEXT_ALTERNATIVE_MISSINGです。

これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。

例

pass
<video poster="poster.png" aria-label="Product demo"></video>

aria-labelが、ポスター画像を持つvideo要素に名前を付けています。

fail
<video poster="poster.png"></video>

アクセシブルな名前もフォールバックもありません。poster属性だけではテキストによる代替になりません。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

VIDEO_POSTER_FIGCAPTION_REVIEW

  1. レポートに示された動画を見つけ、再生前のポスター画像を確認してください。
  2. 動画と一緒に表示されているfigureのキャプションを読んでください。
  3. そのキャプションが、ポスターを見ることができない人に動画が何であるかを伝えているか判断してください。

満たす場合:キャプションが動画とそのポスターの内容を特定しています。

満たさない場合:キャプションが動画を特定していないため、ポスターにテキストによる代替がなく、WCAG 1.1.1を満たしません。

ソースコードを見る