title: Accessibility - Difference between <img alt> and <figcaption>
body: <p>There are two ways to specify "accompanying text" with images in HTML:</p>
  
  <ul>
  <li><code>alt</code> attribute</li>
  <li>a separate <code>&lt;figcaption&gt;</code> element.</li>
  </ul>
  
  <p><a href="https://www.w3schools.com/TAGS/tag_figcaption.asp" rel="noreferrer">Example from w3s</a>: </p>
  
  <pre><code>&lt;figure&gt;
    &lt;img src="pic_trulli.jpg" alt="Trulli" style="width:100%"&gt;
    &lt;figcaption&gt;Fig.1 - Trulli, Puglia, Italy.&lt;/figcaption&gt;
  &lt;/figure&gt;
  </code></pre>
  
  <p>In terms of accessibility, what's the difference between the two? What would be appropriate values to put in those slots? For example, should the <code>alt</code> be a visual description of the picture, and <code>&lt;figcaption&gt;</code> a contextual description?</p>
  
  <p>Input from visually impaired users would be greatly appreciated! Extra suggestions are welcome.</p>