WordPress.org

Make WordPress Core

Changeset 44767


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

Legend:

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

    r44661 r44767  
    176176        ?>
    177177        <script type="text/html" id="tmpl-wp-media-widget-gallery-preview">
    178             <# var describedById = 'describedBy-' + String( Math.random() ); #>
    179178            <#
    180179            var ids = _.filter( data.ids, function( id ) {
     
    183182            #>
    184183            <# if ( ids.length ) { #>
    185                 <div class="gallery media-widget-gallery-preview">
     184                <ul class="gallery media-widget-gallery-preview" role="list">
    186185                    <# _.each( ids, function( id, index ) { #>
    187186                        <# var attachment = data.attachments[ id ]; #>
    188187                        <# if ( index < 6 ) { #>
    189                             <dl class="gallery-item">
    190                                 <dt class="gallery-icon">
    191                                 <# if ( attachment.sizes.thumbnail ) { #>
    192                                     <img src="{{ attachment.sizes.thumbnail.url }}" width="{{ attachment.sizes.thumbnail.width }}" height="{{ attachment.sizes.thumbnail.height }}" alt="" />
    193                                 <# } else { #>
    194                                     <img src="{{ attachment.url }}" alt="" />
    195                                 <# } #>
    196                                 <# if ( index === 5 && ids.length > 6 ) { #>
     188                            <li class="gallery-item">
     189                                <div class="gallery-icon">
     190                                    <img alt="{{ attachment.alt }}"
     191                                        <# if ( index === 5 && data.ids.length > 6 ) { #> aria-hidden="true" <# } #>
     192                                        <# if ( attachment.sizes.thumbnail ) { #>
     193                                            src="{{ attachment.sizes.thumbnail.url }}" width="{{ attachment.sizes.thumbnail.width }}" height="{{ attachment.sizes.thumbnail.height }}"
     194                                        <# } else { #>
     195                                            src="{{ attachment.url }}"
     196                                        <# } #>
     197                                        <# if ( ! attachment.alt && attachment.filename ) { #>
     198                                            aria-label="
     199                                            <?php
     200                                            echo esc_attr(
     201                                                sprintf(
     202                                                    /* translators: %s: the image file name. */
     203                                                    __( 'The current image has no alternative text. The file name is: %s' ),
     204                                                    '{{ attachment.filename }}'
     205                                                )
     206                                            );
     207                                            ?>
     208                                            "
     209                                        <# } #>
     210                                    />
     211                                    <# if ( index === 5 && data.ids.length > 6 ) { #>
    197212                                    <div class="gallery-icon-placeholder">
    198                                         <p class="gallery-icon-placeholder-text">+{{ ids.length - 5 }}</p>
     213                                        <p class="gallery-icon-placeholder-text" aria-label="
     214                                        <?php
     215                                            printf(
     216                                                /* translators: %s: the amount of additional, not visible images in the gallery widget preview. */
     217                                                __( 'Additional images added to this gallery: %s' ),
     218                                                '{{ data.ids.length - 5 }}'
     219                                            );
     220                                        ?>
     221                                        ">+{{ data.ids.length - 5 }}</p>
    199222                                    </div>
    200                                 <# } #>
    201                                 </dt>
    202                             </dl>
     223                                    <# } #>
     224                                </div>
     225                            </li>
    203226                        <# } #>
    204227                    <# } ); #>
    205                 </div>
     228                </ul>
    206229            <# } else { #>
    207230                <div class="attachment-media-view">
  • 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.