title: Simple slider - CSS background-image vs <img> for srcset-like responsive behaviour & accesibility?
body: <p>I know that the topic of <code>&lt;img /&gt;</code> vs <code>background-image()</code> is extensively covered, but there is one aspect of it that I have doubts about.</p>
  
  <p>I have a full-size slider on my page. It showcases high-resolution images in the background, but they are not part of semantic content, merely design. I want to keep the images crisp, yet not to congest traffic.</p>
  
  <p>I love the <code>srcset</code> feature, and it would be a great tool for this job, but that would require me to use an <code>&lt;img /&gt;</code> tag or similar. On the other hand, I could stick with CSS' <code>background-image()</code> and use a <code>@media</code> workaround (sadly, <code>image-set()</code> isn't standard yet). (I'd like to avoid Javascript for this case).</p>
  
  <p>Both solutions have their disadvantages. <strong>How would each of them weigh on the accesibility &amp; semantic aspects?</strong></p>
  
  <p>One of the goals of this project is to keep the mark-up as lean and structured as possible. So, something like:</p>
  
  <pre><code>&lt;h1&gt;Welcome to Thiswebsite!&lt;/h1&gt;
  &lt;p&gt;We do lots of exciting stuff here.&lt;/p&gt;
  &lt;ul class="slider"&gt;
      &lt;li&gt;
          &lt;h2&gt;Travel &amp; Lifestyle&lt;/h2&gt;
          &lt;p&gt;This is slide 1. Lorem ipsum text and into. &lt;a href="link"&gt;Find out more.&lt;/a&gt;&lt;/p&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;h2&gt;Sodomy&lt;/h2&gt;
          &lt;p&gt;This is slide 2. Wait what? Also info and intro. &lt;a href="link"&gt;Spank me.&lt;/a&gt;&lt;/p&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>...is not that bad even when displayed as plain text. Putting images in there would make it awkward to navigate, though. It's a fringe case, but it really makes me think about what the proper way to layout the elements would be.</p>
  
  <p>Please let me know if information provided is inusfficient. Thank you.</p>