[解決済み] サイレント、ループ、自動再生の MP4 <ビデオ> である GIF に alt テキストを追加するにはどうすればよいですか?

質問

を持っています。 私のWordpressウェブサイトのいくつかの記事には、長いGIF動画があります。 . これらのGIFの巨大なサイズを削減するために、私はそれらをMP4ビデオに変換し、現在は <video> タグを使って、このように表示します。

<div>
<video src="myVideo.mp4" autoplay="autoplay" loop="loop" muted="" playsinline="" webkit-playsinline="" width="600">
</video>
<p class="wp-caption-text">My caption that makes it look more like an img than a video</p>
</div>

質問なのですが、altテキストを追加するのに最適な方法は何ですか？ <img> タグはありますか？これらの動画は <video> タグがありますが、実際には画像のようなもので、altテキストを付けることができるはずです。スクリーンリーダーには何が最適で、SEOの目的には何が最適なのでしょうか？

より小さく、より効率的なGIFという私の目標を達成するために、私が気づいていない他の方法はありますか？

どのように解決するのですか？

ここで考慮しなければならないことがいくつかあります。

1. その動画はスクリーンリーダーのユーザーにとって何かプラスになるか？

そうでない場合（つまり、下の説明でビデオの内容を正確に説明している場合）、以下の方法でスクリーンリーダーから隠すのがベストプラクティスでしょう。 aria-hidden="true" . スクリーンリーダーのユーザーのために、情報を重複させないこと。あなたの「キャプション」は実際にはキャプションではないので、これを行うのがベストだと思います。

2. 「キャプション」をより一般的なものにする。

サイズが合わない？自転車を上に持ち上げて近づけてみてください。このパーキングメーターは私の自転車には少し短かったので（ハンドルがメーターに接触しているのがわかる）、空のポールほどは近づけられませんでしたが、それでも十分近づけることができました。

上記の例では、動画を参考にしています。その代わり、ビデオがないかのようにステップを記述してください。次のような表現に変えてみてください。

サイズが合わない？自転車を上に持ち上げて近づけてみてください。私が利用しようとしたパーキングメーターは、私の自転車には少し短く、ハンドルがメーターに触れてしまったので、空のポールほどは近づけられませんでしたが、それでも十分近づけることができました。

上の文章は、動画には一切言及しておらず、それだけで意味がある。すべての「キャプション」をこのように作成すれば、動画がなくても説明書は意味をなすはずです。

3. ビデオを一時停止できますか？

GIFを一時停止できないのは明らかですが、動画を使用する以上、ページ上のすべてのアニメーションを一時停止できるようにすべきです。クリックでビデオを一時停止できるようにするか、ページ上にすべてのアニメーションを一時停止するためのトグルを設けてください。不安障害のある方などにとって、動画は邪魔になる可能性があります。(特に、1つのページで何百ものビデオを同時に再生している場合）。

使用例

このような場合、video 要素を非表示にするために aria-hidden="true" を追加し、説明を更新することで、アクセシブルな形式で情報を提供することと、付加価値のない重複した情報でスクリーン・リーダーのユーザーに負担をかけないことのバランスをうまくとることができます( title の下に正しく記述されている場合、それぞれの動画に対して、無音の動画をアクセシブルにする正しい方法は enhanced audio descriptions のシーンは、あなたのユースケースにはオーバーキルです)。

議論されているように、ビデオを一時停止する方法を追加することを忘れないでください。一度に1つずつでも、できればページの冒頭付近にトグルスイッチで一度に全部でも。