title: How to build accessible gallery?
body: <p>I'm working on a website, and I want to add gallery to it. But I have a problem - the gallery must be accessible to blind etc, and I have no idea how to do it.</p>
  
  <p>Usually, in those kinds of galleries, I would do the html like this: </p>
  
  <pre><code>            &lt;ul&gt;
                  &lt;li data-src="path/to/image/1.jpg"&gt;&lt;/li&gt;
                  &lt;li data-src="path/to/image/2.jpg"&gt;&lt;/li&gt;
                  &lt;li data-src="path/to/image/3.jpg"&gt;&lt;/li&gt;
                  &lt;li data-src="path/to/image/4.jpg"&gt;&lt;/li&gt;
                  &lt;li data-src="path/to/image/5.jpg"&gt;&lt;/li&gt;
                  &lt;li data-src="path/to/image/etc.jpg"&gt;&lt;/li&gt;
              &lt;/ul&gt;
  </code></pre>
  
  <p>and using css and jquery I would use the <code>data-src</code> and add it as a background to the <code>li</code> (because not all photos are squers, so I'll use <code>background-size: cover;</code>). Then, when user will click on the <code>li</code>, a popup will appear with the full size image. </p>
  
  <p>There are some problems with that. For example, it must be clickable using <code>tab</code> in the keyboard. I can add <code>a</code> to the <code>li</code>, but is it ok not having href? And what the machine will "think" when it'll see empty <code>ul</code> list? Another problem is the popup. The html of the popup and it's <code>img</code> tag located at the bottom of the page, so the machine won't be able to see it immediately after click. Another problem is the <code>alt</code>. There won't be description to photos (because they aren't uploaded by me), so I'll leave the <code>alt</code> empty? </p>
  
  <p>Thanks!</p>