spec: <figure> for image container

[uetchy]

Goals

![Sample](./sample.png)

<figure>
  <img src="./sample.png" alt="Sample">
  <figcaption>Sample</figcaption>
</figure>

Image with anchors

![Sample Image](./sample.png){#fig:sample}

<figure>
  <img src="./sample.png" alt="Sample Image" data-ref="fig" id="sample">
  <figcaption>Sample Image</figcaption>
</figure>

Image without caption

![](./sample.png)

<figure>
  <img src="./sample.png">
</figure>

or

<img src="./sample.png">

Discussion

It might be related to cross-ref.

[tk0miya]

{#fig:sample}

Is a space allowed between URI and attributes? PHP Extra says "immediately after"
https://michelf.ca/projects/php-markdown/extra/#spe-attr

[uetchy]

Not yet stipulated but the way PHP Extra does looks reasonable as it has less complexity in parsing the syntax.

[tk0miya]

+1

[MurakamiShinyu]

![Sample Image](./sample.png){#fig:sample}

<figure>
  <img src="./sample.png" alt="Sample Image" data-ref="fig" id="sample">
  <figcaption>Sample Image</figcaption>
</figure>

Questions:

• The alt should be empty when figcaption is given. See: Accessibility - Difference between <img alt> and <figcaption> - Stack Overflow
• Why id="sample" (not id="fig:sample") for {#fig:sample}? Omitting "fig:" from ID is not good because it confuses users and makes it difficult to prevent duplicate IDs. I found remark-crossref uses similar syntax {#sec:first} but uses sec:first for the ID.

[MurakamiShinyu]

現状の課題まとめ

現状の vfm (1.0.0-alpha.15) で残っている課題:

• Invalid HTML <p><figure>…</figure></p> is generated (#47)
  • HTML仕様で、p要素内にfigure要素を入れるのは誤り
  • 画像（![…](…)）が段落の一部である場合（行の途中だったり前後に空白行なしでテキストがある場合）には <figure> 要素を生成するべきではない
• The alt should be empty when figcaption is given. See: Accessibility - Difference between <img alt> and <figcaption> - Stack Overflow
• 属性が <img> タグに出力されるが、それを囲む <figure> タグには出力されない
  • <img> タグのみに意味がある属性以外は <figure> タグにも属性がコピーされるのがよいのでないか
  • id 属性は <figure> に移動したほうがよいのでないか

[akabekobeko]

@MurakamiShinyu
#47 対応によって現状の課題は解決したと認識しているのですが、いかがでしょうか？もしそれでよろしければ issue を close したいです。残件があるとしたら実装難度 (影響範囲) も含めて v1.0 対応を議論しましょう。

[MurakamiShinyu]

#47 対応によって現状の課題は解決したと認識しているのですが、いかがでしょうか？もしそれでよろしければ issue を close したいです。残件があるとしたら実装難度 (影響範囲) も含めて v1.0 対応を議論しましょう。

現状の課題にあげた3項目のうち、最初の #47 は解決しましたが残りは解決していません。v1.0での対応は見送るとしてもissueはopenのままでしょう。

[akabekobeko]

属性については #47 であわせて実装されています。これは PR 中の @MurakamiShinyu さんコメントを受けてのことで、PR が close されたことをもって対応済みという認識でした。

残りの html - Accessibility - Difference between <img alt> and <figcaption> - Stack Overflow も属性のコピーで対応になると思われます。

これらについて対応漏れがある場合は指摘をお願いします。

[MurakamiShinyu]

属性については #47 であわせて実装されています。これは PR 中の @MurakamiShinyu さんコメントを受けてのことで、PR が close されたことをもって対応済みという認識でした。

すみません、そうでした。訂正します。

残りの項目について:

• The alt should be empty when figcaption is given. See: [Accessibility - Difference between and - Stack Overflow]

現状では、 ![Text](image.png) で "Text" が alt="Text と <figcaption>Text</figcaption> の両方に出力されます。screen reader では2回 "Text" が読み上げられることになるため、あまり適切ではありません。それをどうするかは課題として残ってます。

v1は現状のままでv2での検討でよいと思います。

[akabekobeko]

すみません、元 issue が #47 で PR は #71 でした。属性対応の PR コメントは #71 中の話ですね。

screen reader では2回 "Text" が読み上げられる

コピー対象は属性を判定して処理しているため alt だけ除外することは簡単に対応できます。ただ「どうするか」を議論する必要はるので継続検討しましょう。

本件は close して↑の検討は別 issue を立てます。

[akabekobeko]

alt の問題は新たに立てた #75 で議論を継続しましょう。本件は close します。