要約
アニメーション画像に発作を及ぼすリスクが無いこと、およびユーザーがそれを無効にできることを確認してください。
注記
このページでは、アニメーション画像形式によって発生する固有の問題についてのみ説明しています。WCAG要件を満たすために、これらのグラフィックには必要に応じて代替テキストと拡張説明も必要です。
テクニック
-
アニメーションが発作のリスクをもたらさないようにします。[[WCAG-2.3.1]] および [[WCAG-2.3.2]]
-
アニメーションは5秒後に停止するか、オフにできるようにします。[[WCAG-2.2.2]]
例
アニメーションGIFを代替となる静止画像に置き換えるJavaScriptを使用したボタンが設けられています。
<img id="rocket"
src="rocket-launch.gif"
alt="Rocket blasting off" />
<button
onclick="replaceImage('rocket', 'static-rocket-launch.jpg')"
>Stop animation</button>
解説
アニメーションGIFなどのアニメーション画像は、出版物ではあまり使用されませんが、その使用には、画像に関する基本的な説明を超える、アクセシビリティに関する特有の課題があります。アニメーション画像は非常に短いビデオクリップのようなものなので、ビデオが引き起こすいくつかの問題についても考慮しなければなりません。
主な懸案事項は、画像が発作の危険をもたらさないかという点です。画像はアニメーション化されているため、フラッシュは1秒あたり3回を超えてはなりません。アニメーションが1秒未満でありアニメーションが無限ループで再生される場合には、アニメーションのフラッシュ回数に1秒間あたりのアニメーションのループ回数を掛けて、1秒あたりのフラッシュ回数を計算しなければなりません。
アニメーションが5秒後に自動的に終了する場合は、ユーザーが動画コンテンツの再生を停止できるというWCAGの要件を満たしています。電子出版物のページ付けにより、通常、ユーザーはアニメーションが完了しないと画像にたどりつけません。この問題を回避するには、ドキュメント内のアニメーション画像をアニメーション化されていない画像に置き換えるコントロール(通常はボタン)を追加します。その後、ユーザーはアニメーションを再生するかどうかを決定できます。
注記
canvas
要素を使用して作成されたアニメーションでも、点滅やユーザーによるオフ設定が必要となるという同じ課題がありますが、このセクションでは説明していない追加の課題も発生します。ナレッジベースの今後の更新では、アニメーション化されたキャンバスについても取り扱う予定です。
関連リンク
- MDN — <img>: 画像埋め込み要素
- HTML —
img
要素