WordPress.org

Make WordPress Core

Changeset 38812


Ignore:
Timestamp:
10/19/16 03:05:51 (15 months 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.