画像にキャプションを付けた

October 15, 2020 (over 1 year ago)

画像にキャプションを付けた．

Markdownでこう書くと

![これは黒毛和牛ビビンバです](../images/2020-10-15-bibimbap.jpg)

こういうHTMLになっていたところを

<p>
  <img
    src="../images/2020-10-15-bibimbap.jpg"
    alt="これは黒毛和牛ビビンバです"
  />
</p>

こういうHTMLになるようにした

<figure>
  <img src="../images/2020-10-15-bibimbap.jpg" alt="" />
  <figcaption>これは黒毛和牛ビビンバです</figcaption>
</figure>

で，こうなる

厳密には画像の alt と caption は別のものだが，現実には内容が被ることが多く，caption を付ける場合は alt を空にするのを推奨している例もあるので採用した．

NOTE: when adding a caption instead of alt text, the alt text attribute should be null (Alt=””).
Best Practices for Accessible Images | California State University, Northridge