Screen reader reads the same text twice because figcaption is generated from img alt.

[akabekobeko]

Continuation of discussion #15.

Implemented to copy <img> specific attributes to <figcaption> value in # 71.

<figure>
  <img src="image.png" alt="Description">
  <figcaption>Description</figcaption>
</figure>

However, the alt attribute is read aloud by screen readers, so the same text is processed twice.

Discuss whether to avoid copying only the alt attribute to prevent this side effect.

[akabekobeko]

私としては alt は画像に対する代替テキストなので <img> のみでよく、画像を補完する情報となる <figcaption> にはコピーしなくてよいと考えている。

[MurakamiShinyu]

alt 属性はもちろん img 要素のみでよいです。問題なのは、img 要素の alt 属性の値のテキストと、figcaption 要素の内容のテキストが、同一の内容で重複しているので、スクリーンリーダーで同じテキストが２回読み上げられるということです。

現状の vfm では

![Description](image.png)

↓

<figure>
  <img src="image.png" alt="Description">
  <figcaption>Description</figcaption>
</figure>

これをスクリーンリーダーが読み上げるテキストだけにすると

Description
Description

のように、 "Description" が２回繰り返されることになります。 そうならないように、figcaption を出力するのであれば alt 属性は空にするべきではないかというのが https://github.com/vivliostyle/vfm/issues/15#issuecomment-760331260 に書いたことです。 ただし、alt 属性を空にするのではなく、属性 aria-hidden="true" を figcaption に指定するほうがよいかもしれません。 pandoc ではそうなってます:

<figure>
  <img src="image.png" alt="Description" />
  <figcaption aria-hidden="true">Description</figcaption>
</figure>

pandocのissuesを検索すると、この仕様になったときのissueがありました: https://github.com/jgm/pandoc/issues/6491

また、最近もこれに関する議論のissueがあります: https://github.com/jgm/pandoc/issues/6782

[akabekobeko]

すみません、勘違いしていました。そもそも alt のように <img> 固有のものは「コピー対象外」なので逆ですね。id など固有でないものをコピーしているのでした。issue 冒頭も直しておきます。

そのうえで対応方法ですが aria-hidden="true" 指定がよさそうですね。対応容易かつ remark 13 の影響もないため、この方法でよければ v1.0 で実装しますがいかがでしょうか？

[akabekobeko]

タイトルも変更してきました。

[akabekobeko]

v1.0 実装の提案コメントに賛同があったのでマイルストーンを変更しました。

[akabekobeko]

本件は #83 で対応され、村上さんによるレビューも済んでいるため close します。