title: When is it acceptable to leave the alt text empty on an HTML image (if ever)?
body: <p>It has been my understanding up to this point that the <code>alt</code> attribute is required, and should not be left blank. This seems to be confirmed in existing questions, such as <a href="https://stackoverflow.com/questions/21206735/alt-attribute-on-images-and-title-attribute-on-links-required-in-html5">this one</a>.</p>
  
  <p>However, in reading the <a href="http://developers.whatwg.org/embedded-content-1.html#attr-img-alt" rel="noreferrer">HTML spec</a> today, I noticed the following:</p>
  
  <blockquote>
    <p><em>A single image can have different appropriate alternative text
    depending on the context.</em></p>
    
    <p><em>In each of the following cases, the same image is used, yet the alt
    text is different each time. The image is the coat of arms of the
    Carouge municipality in the canton Geneva in Switzerland.</em></p>
    
    <p><em>Here it is used as a supplementary icon:</em></p>
  
  <pre><code>&lt;p&gt;I lived in &lt;img src="carouge.svg" alt=""&gt; Carouge.&lt;/p&gt;
  </code></pre>
  </blockquote>
  
  <p>It goes on to show other examples with various <code>alt</code> text, but this in this (and a couple other examples) the <code>alt</code> text is missing.</p>
  
  <p>The spec later says <em>(emphasis mine)</em>:</p>
  
  <blockquote>
    <p>Except where otherwise specified, <strong>the alt attribute must be specified
    and its value must not be empty</strong>; the value must be an appropriate
    replacement for the image.</p>
  </blockquote>
  
  <p>Is it ok to use <code>alt=""</code>? If so, when is this an acceptable use? If the image does not need <code>alt</code> text, should it be a CSS background image?</p>
  
  <p><strong>Note</strong>: This is based on the WHATWG HTML Living Standard, not the W3C HTML5 specification.</p>