Better accessibility

theme/templates/media.html

@@ -17,21 +17,21 @@
     <dl class="meta">
     {% if media.exif.dateobj %}
       <div>
-        <dt><i class="fa fa-calendar" aria-hidden="true" title="Date taken"></i></dt>
+        <dt><i class="fa fa-calendar" aria-hidden="true" title="Date taken"></i><span class="sr-only">Date taken:</span></dt>
         <dd>{{ media.exif.dateobj.strftime('%a, %d. %b %Y') }} </dd>
       </div>
     {% endif %}
 
     {% if media.meta.location %}
       <div>
-        <dt><i class="fa fa-map-marker" aria-hidden="true" title="Location"></i></dt>
+        <dt><i class="fa fa-map-marker" aria-hidden="true" title="Location"></i><span class="sr-only">Location:</span></dt>
         <dd>{{ media.meta.location[0] }}</dd>
       </div>
     {% endif %}
 
     {% if media.exif %}
       <div>
-        <dt><i class="fa fa-sliders" aria-hidden="true" title="Camera settings"></i></dt>
+        <dt><i class="fa fa-sliders" aria-hidden="true" title="Camera settings"></i><span class="sr-only">Camera settings</span></dt>
         <dd>
           <ul>
             {% if media.exif.focal %}
@@ -52,7 +52,7 @@
     {% endif %}
     </dl>
     <ul class="img-links">
-      <li><a href="{{ media.big_url }}"><i class="fa fa-download"></i> <span>Download</span></a></li>
+      <li><a href="{{ media.big_url }}" title="Download original file"><i aria-hidden="true" class="fa fa-download"></i> <span>Download</span></a></li>
     </ul>
   </div>
 </div>