Make WordPress Core

Changeset 38812


Ignore:
Timestamp:
10/19/2016 03:05:51 AM (7 years ago)
Author:
joemcgill
Message:

Media: Remove alt fallbacks to improve accessibility.

This removes the fallbacks in wp_get_attachment_image() and in
wp.media.string.props which attempt to generate an alt value
from the image caption or title if an alt attribute isn't explicitly
set.

This allows for image HTML to be generated that contains an empty alt
value, i.e., alt="" which is much preferable for screen readers than
reading redundant content in the case of a caption, or when reading the
image title, which is often generated from the filename and not helpful
as alt text.

Props odie2, joedolson, rianrietveld, afercia, iamjolly, joemcgill.
Fixes #34635.

Location:
trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/media-editor.js

    r38652 r38812  
    4949         */
    5050        props: function( props, attachment ) {
    51             var link, linkUrl, size, sizes, fallbacks,
     51            var link, linkUrl, size, sizes,
    5252                defaultProps = wp.media.view.settings.defaultProps;
    53 
    54             // Final fallbacks run after all processing has been completed.
    55             fallbacks = function( props ) {
    56                 // Generate alt fallbacks and strip tags.
    57                 if ( 'image' === props.type && ! props.alt ) {
    58                     if ( props.caption ) {
    59                         props.alt = props.caption;
    60                     } else if ( props.title !== props.url ) {
    61                         props.alt = props.title;
    62                     } else {
    63                         props.alt = '';
    64                     }
    65 
    66                     props.alt = props.alt.replace( /<\/?[^>]+>/g, '' );
    67                     props.alt = props.alt.replace( /[\r\n]+/g, ' ' );
    68                 }
    69 
    70                 return props;
    71             };
    7253
    7354            props = props ? _.clone( props ) : {};
     
    8869            // All attachment-specific settings follow.
    8970            if ( ! attachment ) {
    90                 return fallbacks( props );
     71                return props;
    9172            }
    9273
     
    124105            }
    125106
    126             return fallbacks( props );
     107            return props;
    127108        },
    128109        /**
  • trunk/src/wp-includes/media.php

    r38795 r38812  
    867867            'src'   => $src,
    868868            'class' => "attachment-$size_class size-$size_class",
    869             'alt'   => trim(strip_tags( get_post_meta($attachment_id, '_wp_attachment_image_alt', true) )), // Use Alt field first
     869            'alt'   => trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) ),
    870870        );
    871         if ( empty($default_attr['alt']) )
    872             $default_attr['alt'] = trim(strip_tags( $attachment->post_excerpt )); // If not, Use the Caption
    873         if ( empty($default_attr['alt']) )
    874             $default_attr['alt'] = trim(strip_tags( $attachment->post_title )); // Finally, use the title
    875871
    876872        $attr = wp_parse_args( $attr, $default_attr );
  • trunk/tests/phpunit/tests/media.php

    r38760 r38812  
    917917
    918918    /**
     919     * Tests the default output of `wp_get_attachment_image()`.
     920     * @ticket 34635
     921     */
     922    function test_wp_get_attachment_image_defaults() {
     923        $image = image_downsize( self::$large_id, 'thumbnail' );
     924        $expected = sprintf( '<img width="%1$d" height="%2$d" src="%3$s" class="attachment-thumbnail size-thumbnail" alt="" />', $image[1], $image[2], $image[0] );
     925
     926        $this->assertEquals( $expected, wp_get_attachment_image( self::$large_id ) );
     927    }
     928
     929    /**
     930     * Test that `wp_get_attachment_image()` returns a proper alt value.
     931     * @ticket 34635
     932     */
     933    function test_wp_get_attachment_image_with_alt() {
     934        // Add test alt metadata.
     935        update_post_meta( self::$large_id, '_wp_attachment_image_alt', 'Some very clever alt text', true );
     936
     937        $image = image_downsize( self::$large_id, 'thumbnail' );
     938        $expected = sprintf( '<img width="%1$d" height="%2$d" src="%3$s" class="attachment-thumbnail size-thumbnail" alt="Some very clever alt text" />', $image[1], $image[2], $image[0] );
     939
     940        $this->assertEquals( $expected, wp_get_attachment_image( self::$large_id ) );
     941
     942        // Cleanup.
     943        update_post_meta( self::$large_id, '_wp_attachment_image_alt', '', true );
     944    }
     945
     946    /**
    919947     * @ticket 33878
    920948     */
     
    18091837
    18101838        $expected = '<img width="999" height="999" src="http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $year . '/' . $month . '/test-image-testsize-999x999.png"' .
    1811             ' class="attachment-testsize size-testsize" alt="test-image-large.png"' .
     1839            ' class="attachment-testsize size-testsize" alt=""' .
    18121840            ' srcset="http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $year . '/' . $month . '/test-image-testsize-999x999.png 999w,' .
    18131841                ' http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $year . '/' . $month . '/test-image-large-150x150.png 150w"' .
Note: See TracChangeset for help on using the changeset viewer.