aタグの中にfigureタグがある時のVoiceOverでの読み上げ
概要
aタグの中にfigureタグとimg,figcaption,pタグを置いた状態でaタグにフォーカスした時、
VoiceOverでそれぞれどう読み上げられるかを見てみる記事です。
実験結果
実験結果は以下のページにあります。
ページをみて試してもらえばわかりますが、結果を先に書いておきます。
実験結果（altなし）
altが空でfigcaptionなし、pタグもなし
aタグの中に読み上げるテキストが全くないので当然読み上げられません。
これは想像通りですね。一番ありえないマークアップです。
altが空でfigcaptionなし、pタグはある
aタグの中にはpタグにだけテキストが入っています。
これはpタグのテキストが読み上げられます。これも想像通りです。
altが空でfigcaptionあり、pタグはなし
aタグの中は
<figure>
<img src="" alt="" />
<figcaption>figcaptionタグテキスト</figcaption>
</figure>
こうなっています。
これはfigcaptionタグの中のテキストが読み上げられます。これもまぁそうだろうなと思います。
これしかテキストないですし。
altが空でfigcaptionあり、pタグもあり
aタグの中が
<figure>
<img src="" alt="" />
<figcaption>figcaptionタグテキスト</figcaption>
</figure>
<p>pタグテキスト</p>
こうなっています。
この時自分はfigcaptionタグの中のテキストとpタグの中のテキストが読み上げられるのだろうなと思っていましたが、結果はどうかというと、pタグの中のテキストだけ読み上げられます。
そうなんだ…
なぜそうなるのか予想
figureは自己完結型のコンテンツを表すタグなので、aタグの中に他に読めるテキストがある場合はそちらを読み、独立したコンテンツであるfigureの中は読まれないようになるのでしょう。
逆に読み上げるテキストが何もない時は仕方なくfigureの中のテキストを読んでくれるようです。
実験結果（altあり）
altがはいっていて、figcaptionなし、pタグもなし
先ほどの予想を踏まえてみてみましょう。
この例ではaタグの中にaltのテキストしかないのでaltテキストが読み上げられそうです。
予想通り、altテキストが読み上げられます。
altがはいっていて、figcaptionなし、pタグはある
aタグの中は
<figure>
<img src="" alt="altテキスト" />
</figure>
<p>pタグテキスト</p>
こうなっています。
figureは独立しており、他に読めるテキストとしてpタグの中のテキストがあるのでpタグのテキストが読み上げられそうです。
予想通りpタグのテキストが読み上げられます。
altがはいっていて、figcaptionあり、pタグはなし
aタグの中は
<figure>
<img src="" alt="altテキスト" />
<figcaption>figcaptionタグテキスト</figcaption>
</figure>
こうなっています。
figureの中のテキスト以外読み上げる対象がありません。
この場合何が読み上げられるかというと、altテキストとfigcaptionタグテキスト です。
なるほど…
altがはいっていて、figcaptionあり、pタグもあり
aタグの中は
<figure>
<img src="" alt="altテキスト" />
<figcaption>figcaptionタグテキスト</figcaption>
</figure>
<p>pタグテキスト</p>
こうなっています。
この場合、pタグのテキストが読み上げられます。
まとめ
リンクカードのようなコンテンツはWebサイトにはよくありますが、「imgタグはfigureタグで囲む」で全部figureタグを使っている方も中にはいらっしゃるのではないでしょうか。
読み上げは大丈夫ですか？
私は今までaタグの中のテキストは全て読み上げられると思っていました。
今業務で小さな部分からアクセシビリティの向上を目指して対応を行なっており、その中で読み上げを確認したところ一部のテキストが読み上げられないことに気づいて実験してみました。
伝えたいコンテンツが読み上げられているのか、みなさんちゃんと確認するようにしましょう。
補足
VoiceOverでランドマークを表示してみましょう。
figure部分が全部「/」になっています。マジ？
読み上げはされるんですけどね…
画像が来たらfigure！でマークアップするのはやめた方がいいのではないかと思います。
Discussion