Changeset 44767

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.

Location:

trunk/src/wp-includes/widgets

Files:

• class-wp-widget-media-gallery.php (modified) (2 diffs)
• class-wp-widget-media-image.php (modified) (2 diffs)

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

@@ -176 +176 @@
         ?>
         <script type="text/html" id="tmpl-wp-media-widget-gallery-preview">
-            <# var describedById = 'describedBy-' + String( Math.random() ); #>
             <#
             var ids = _.filter( data.ids, function( id ) {
@@ -183 +182 @@
             #>
             <# if ( ids.length ) { #>
-                <div class="gallery media-widget-gallery-preview">
+                <ul class="gallery media-widget-gallery-preview" role="list">
                     <# _.each( ids, function( id, index ) { #>
                         <# var attachment = data.attachments[ id ]; #>
                         <# if ( index < 6 ) { #>
-                            <dl class="gallery-item">
-                                <dt class="gallery-icon">
-                                <# if ( attachment.sizes.thumbnail ) { #>
-                                    <img src="{{ attachment.sizes.thumbnail.url }}" width="{{ attachment.sizes.thumbnail.width }}" height="{{ attachment.sizes.thumbnail.height }}" alt="" />
-                                <# } else { #>
-                                    <img src="{{ attachment.url }}" alt="" />
-                                <# } #>
-                                <# if ( index === 5 && ids.length > 6 ) { #>
+                            <li class="gallery-item">
+                                <div class="gallery-icon">
+                                    <img alt="{{ attachment.alt }}"
+                                        <# if ( index === 5 && data.ids.length > 6 ) { #> aria-hidden="true" <# } #>
+                                        <# if ( attachment.sizes.thumbnail ) { #>
+                                            src="{{ attachment.sizes.thumbnail.url }}" width="{{ attachment.sizes.thumbnail.width }}" height="{{ attachment.sizes.thumbnail.height }}"
+                                        <# } else { #>
+                                            src="{{ attachment.url }}"
+                                        <# } #>
+                                        <# if ( ! attachment.alt && attachment.filename ) { #>
+                                            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' ),
+                                                    '{{ attachment.filename }}'
+                                                )
+                                            );
+                                            ?>
+                                            "
+                                        <# } #>
+                                    />
+                                    <# if ( index === 5 && data.ids.length > 6 ) { #>
                                     <div class="gallery-icon-placeholder">
-                                        <p class="gallery-icon-placeholder-text">+{{ ids.length - 5 }}</p>
+                                        <p class="gallery-icon-placeholder-text" aria-label="
+                                        <?php
+                                            printf(
+                                                /* translators: %s: the amount of additional, not visible images in the gallery widget preview. */
+                                                __( 'Additional images added to this gallery: %s' ),
+                                                '{{ data.ids.length - 5 }}'
+                                            );
+                                        ?>
+                                        ">+{{ data.ids.length - 5 }}</p>
                                     </div>
-                                <# } #>
-                                </dt>
-                            </dl>
+                                    <# } #>
+                                </div>
+                            </li>
                         <# } #>
                     <# } ); #>
-                </div>
+                </ul>
             <# } else { #>
                 <div class="attachment-media-view">

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>