WordPress.org

Make WordPress Core


Ignore:
Timestamp:
02/23/2019 06:31:05 PM (3 months 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-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">
Note: See TracChangeset for help on using the changeset viewer.