Make WordPress Core


Ignore:
Timestamp:
02/23/2019 06:31:05 PM (5 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/widgets/class-wp-widget-media-image.php

    r43571 r44767  
    340340        </script>
    341341        <script type="text/html" id="tmpl-wp-media-widget-image-preview">
    342             <# var describedById = 'describedBy-' + String( Math.random() ); #>
    343342            <# if ( data.error && 'missing_attachment' === data.error ) { #>
    344343                <div class="notice notice-error notice-alt notice-missing-attachment">
     
    350349                </div>
    351350            <# } else if ( data.url ) { #>
    352                 <img class="attachment-thumb" src="{{ data.url }}" draggable="false" alt="{{ data.alt }}" <# if ( ! data.alt && data.currentFilename ) { #> aria-describedby="{{ describedById }}" <# } #> />
    353                 <# if ( ! data.alt && data.currentFilename ) { #>
    354                     <p class="hidden" id="{{ describedById }}">
    355                     <?php
    356                         /* translators: %s: image filename */
    357                         echo sprintf( __( 'Current image: %s' ), '{{ data.currentFilename }}' );
    358                     ?>
    359                     </p>
    360                 <# } #>
     351                <img class="attachment-thumb" src="{{ data.url }}" draggable="false" alt="{{ data.alt }}"
     352                    <# if ( ! data.alt && data.currentFilename ) { #>
     353                        aria-label="
     354                        <?php
     355                        echo esc_attr(
     356                            sprintf(
     357                                /* translators: %s: the image file name. */
     358                                __( 'The current image has no alternative text. The file name is: %s' ),
     359                                '{{ data.currentFilename }}'
     360                            )
     361                        );
     362                        ?>
     363                        "
     364                    <# } #>
     365                />
    361366            <# } #>
    362367        </script>
Note: See TracChangeset for help on using the changeset viewer.