Stop repeating label, add image dimensions in image gallery & choosers for screen reader users (#5355)

- Images in the image listing now have an empty alt tag
- All information about the image, including title and image dimensions are now in the heading below
- The dimensions are visually hidden because they only relevant to screen readers, as sighted users can get and idea of the image dimensions from the thumbnail

CHANGELOG.txt

@@ -21,6 +21,7 @@ Changelog
  * Removed version number from the logo link’s title. The version can now be found under the Settings menu (Thibaud Colas)
  * Added "don't delete" option to confirmation screen when deleting images, documents and modeladmin models (Kevin Howbrook)
  * Added `branding_title` template block for the admin title prefix (Dillen Meijboom)
+ * Add image dimensions in image gallery and image choosers for screen reader users (Helen Chapman)
  * Fix: ModelAdmin no longer fails when filtering over a foreign key relation (Jason Dilworth, Matt Westcott)
  * Fix: The Wagtail version number is now visible within the Settings menu (Kevin Howbrook)
  * Fix: Scaling images now rounds values to an integer so that images render without errors (Adrian Brunyate)
@@ -39,6 +40,7 @@ Changelog
  * Fix: Screen readers now announce "Dashboard" for the main nav’s logo link instead of Wagtail’s version number (Thibaud Colas)
  * Fix: Screen readers now treat page-level action dropdowns as navigation instead of menus (Helen Chapman)
  * Fix: Make icon font implementation more screen-reader-friendly (Thibaud Colas)
+ * Fix: Remove duplicate labels in image gallery and image choosers for screen reader users (Helen Chapman)
 
 
 2.5.1 (07.05.2019)

docs/releases/2.6.rst

@@ -30,6 +30,7 @@ Other features
  * Removed version number from the logo link’s title. The version can now be found under the Settings menu (Thibaud Colas)
  * Added "don't delete" option to confirmation screen when deleting images, documents and modeladmin models (Kevin Howbrook)
  * Added ``branding_title`` template block for the admin title prefix (Dillen Meijboom)
+ * Add image dimensions in image gallery and image choosers for screen reader users (Helen Chapman)
 
 Bug fixes
 ~~~~~~~~~
@@ -52,6 +53,7 @@ Bug fixes
  * Screen readers now announce "Dashboard" for the main nav’s logo link instead of Wagtail’s version number (Thibaud Colas)
  * Screen readers now treat page-level action dropdowns as navigation instead of menus (Helen Chapman)
  * Make icon font implementation more screen-reader-friendly (Thibaud Colas)
+ * Remove duplicate labels in image gallery and image choosers for screen reader users (Helen Chapman)
 
 
 Upgrade considerations

wagtail/images/templates/wagtailimages/images/results.html

@@ -20,7 +20,13 @@
             <li>
                 <a class="image-choice" title="{% if collections %}{{ image.collection.name }} » {% endif %}{{ image.title }}" href="{% url 'wagtailimages:edit' image.id %}">
                     {% include "wagtailimages/images/results_image.html" %}
-                    <h3>{{ image.title|ellipsistrim:60 }}</h3>
+
+                    {% trans "pixels" as translated_pixels %}
+                    <h3>{{ image.title|ellipsistrim:60 }}
+                        <span class="visuallyhidden">
+                            {{ image.width }} {{ translated_pixels  }} &#215; {{ image.height }} {{ translated_pixels}}
+                        </span>
+                    </h3>
                 </a>
             </li>
         {% endfor %}

wagtail/images/templates/wagtailimages/images/results_image.html

@@ -15,4 +15,4 @@
 
 {% load wagtailimages_tags %}
 
-<div class="image">{% image image max-165x165 class="show-transparency" %}</div>
+<div class="image">{% image image max-165x165 class="show-transparency" alt="" %}</div>