sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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.

git-svn-id: https://develop.svn.wordpress.org/trunk@38812 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Joe McGill 2016-10-19 03:05:51 +00:00
parent 500041a4bc
commit 788bb093f2
3 changed files with 33 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/wp-includes/js/media-editor.js
View File

@ -48,28 +48,9 @@
* @returns {Object} Joined props
*/
props: function( props, attachment ) {
var link, linkUrl, size, sizes, fallbacks,
var link, linkUrl, size, sizes,
defaultProps = wp.media.view.settings.defaultProps;
// Final fallbacks run after all processing has been completed.
fallbacks = function( props ) {
// Generate alt fallbacks and strip tags.
if ( 'image' === props.type && ! props.alt ) {
if ( props.caption ) {
props.alt = props.caption;
} else if ( props.title !== props.url ) {
props.alt = props.title;
} else {
props.alt = '';
}
props.alt = props.alt.replace( /<\/?[^>]+>/g, '' );
props.alt = props.alt.replace( /[\r\n]+/g, ' ' );
}
return props;
};
props = props ? _.clone( props ) : {};
if ( attachment && attachment.type ) {
@ -87,7 +68,7 @@
// All attachment-specific settings follow.
if ( ! attachment ) {
return fallbacks( props );
return props;
}
props.title = props.title || attachment.title;
@ -123,7 +104,7 @@
props.rel = props.rel || 'attachment wp-att-' + attachment.id;
}
return fallbacks( props );
return props;
},
/**
* Create link markup that is suitable for passing to the editor

6
src/wp-includes/media.php
View File

@ -866,12 +866,8 @@ function wp_get_attachment_image($attachment_id, $size = 'thumbnail', $icon = fa
$default_attr = array(
'src' => $src,
'class' => "attachment-$size_class size-$size_class",
'alt' => trim(strip_tags( get_post_meta($attachment_id, '_wp_attachment_image_alt', true) )), // Use Alt field first
'alt' => trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) ),
);
if ( empty($default_attr['alt']) )
$default_attr['alt'] = trim(strip_tags( $attachment->post_excerpt )); // If not, Use the Caption
if ( empty($default_attr['alt']) )
$default_attr['alt'] = trim(strip_tags( $attachment->post_title )); // Finally, use the title
$attr = wp_parse_args( $attr, $default_attr );

30
tests/phpunit/tests/media.php
View File

@ -915,6 +915,34 @@ EOF;
remove_filter( 'embed_maybe_make_link', array( $this, 'filter_wp_embed_shortcode_custom' ), 10 );
}
/**
* Tests the default output of `wp_get_attachment_image()`.
* @ticket 34635
*/
function test_wp_get_attachment_image_defaults() {
$image = image_downsize( self::$large_id, 'thumbnail' );
$expected = sprintf( '<img width="%1$d" height="%2$d" src="%3$s" class="attachment-thumbnail size-thumbnail" alt="" />', $image[1], $image[2], $image[0] );
$this->assertEquals( $expected, wp_get_attachment_image( self::$large_id ) );
}
/**
* Test that `wp_get_attachment_image()` returns a proper alt value.
* @ticket 34635
*/
function test_wp_get_attachment_image_with_alt() {
// Add test alt metadata.
update_post_meta( self::$large_id, '_wp_attachment_image_alt', 'Some very clever alt text', true );
$image = image_downsize( self::$large_id, 'thumbnail' );
$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] );
$this->assertEquals( $expected, wp_get_attachment_image( self::$large_id ) );
// Cleanup.
update_post_meta( self::$large_id, '_wp_attachment_image_alt', '', true );
}
/**
* @ticket 33878
*/
@ -1808,7 +1836,7 @@ EOF;
$month = date( 'm' );
$expected = '<img width="999" height="999" src="http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $year . '/' . $month . '/test-image-testsize-999x999.png"' .
' class="attachment-testsize size-testsize" alt="test-image-large.png"' .
' class="attachment-testsize size-testsize" alt=""' .
' srcset="http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $year . '/' . $month . '/test-image-testsize-999x999.png 999w,' .
' http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $year . '/' . $month . '/test-image-large-150x150.png 150w"' .
' sizes="(max-width: 999px) 100vw, 999px" />';