Changeset 44767 for trunk/src/wp-includes/widgets/class-wp-widget-media-image.php

Timestamp:

02/23/2019 06:31:05 PM (6 years ago)

Author:

afercia

Message:

Accessibility: Improve the image and gallery widgets preview accessibility.

In an authoring context, the image alt attribute purpose is different from the one for the front end. For example, screen reader users need to know what the selected image is, even when the original alt value is empty.

This change introduces a new pattern for the alt text in an authoring context:

• uses the alt text if not empty
• when there's no alt text, informs users the image has no alternative text and provides a reference to the image filename

Also, makes the gallery media widget preview an unordered list to make screen readers announce the number of images automatically.

Fixes #43137.

File:

• trunk/src/wp-includes/widgets/class-wp-widget-media-image.php (modified) (2 diffs)

trunk/src/wp-includes/widgets/class-wp-widget-media-image.php

@@ -340 +340 @@
         </script>
         <script type="text/html" id="tmpl-wp-media-widget-image-preview">
-            <# var describedById = 'describedBy-' + String( Math.random() ); #>
             <# if ( data.error && 'missing_attachment' === data.error ) { #>
                 <div class="notice notice-error notice-alt notice-missing-attachment">
@@ -350 +349 @@
                 </div>
             <# } else if ( data.url ) { #>
-                <img class="attachment-thumb" src="{{ data.url }}" draggable="false" alt="{{ data.alt }}" <# if ( ! data.alt && data.currentFilename ) { #> aria-describedby="{{ describedById }}" <# } #> />
-                <# if ( ! data.alt && data.currentFilename ) { #>
-                    <p class="hidden" id="{{ describedById }}">
-                    <?php
-                        /* translators: %s: image filename */
-                        echo sprintf( __( 'Current image: %s' ), '{{ data.currentFilename }}' );
-                    ?>
-                    </p>
-                <# } #>
+                <img class="attachment-thumb" src="{{ data.url }}" draggable="false" alt="{{ data.alt }}"
+                    <# if ( ! data.alt && data.currentFilename ) { #>
+                        aria-label="
+                        <?php
+                        echo esc_attr(
+                            sprintf(
+                                /* translators: %s: the image file name. */
+                                __( 'The current image has no alternative text. The file name is: %s' ),
+                                '{{ data.currentFilename }}'
+                            )
+                        );
+                        ?>
+                        "
+                    <# } #>
+                />
             <# } #>
         </script>