Describe the image in the featured image preview

[afercia]

When a featured image is set, a preview is displayed within a button. Pressing the preview button opens the media modal to replace the image.

The preview button has an aria-label="Edit or update the image" which gives the correct information to assistive technology users.

However, there's no indication of what the set image is. All users need to know which image is set, including assistive technology users.

In this case, it's not possible to use the alt attribute because the entire content of the preview button is overridden by the aria-label="Edit or update the image". A possible solution is an aria-describedby attribute on the button to target a visually hidden description.

The description should contain some meaningful text:

• when the image has an alt text: Current image: altText
• when the image doesn't have an alt text: The current image has no alternative text. The file name is: fileName

Note: the second text is the same currently used in core for the media widgets.

This way, the whole preview would be announced, for example, this way:

• Edit or update the image (brief pause) Current image: My awesome image
• Edit or update the image (brief pause) The current image has no alternative text. The file name is: DSC-345678.jpg

[Jackie6]

Hi @afercia I found the default alt text of the image is empty string. Even if I add alt text in the image-modal, the html still shows alt is empty (see below image)

gutenberg/packages/editor/src/components/post-featured-image/index.js

Line 65 in c619130

<img src={ mediaSourceUrl } alt="" />

[afercia]

@Jackie6 yes, but the alt text wouldn't help in this case. As mentioned above, the entire content is overridden by the aria-label on the button. We need to put some meaningful text in the aria-label.

gutenberg/packages/editor/src/components/post-featured-image/index.js

Lines 56 to 70 in c619130

	<Button
	className={ ! featuredImageId ? 'editor-post-featured-image__toggle' : 'editor-post-featured-image__preview' }
	onClick={ open }
	aria-label={ ! featuredImageId ? null : __( 'Edit or update the image' ) }>
	{ !! featuredImageId && media &&
	<ResponsiveWrapper
	naturalWidth={ mediaWidth }
	naturalHeight={ mediaHeight }
	>
	<img src={ mediaSourceUrl } alt="" />
	</ResponsiveWrapper>
	}
	{ !! featuredImageId && ! media && <Spinner /> }
	{ ! featuredImageId && ( postLabel.set_featured_image || DEFAULT_SET_FEATURE_IMAGE_LABEL ) }
	</Button>

[Jackie6]

@afercia Hi Andrea, I have created a pull request to fix the issue. I am not sure what is the best way to get the file name of the image. Because in the API documentation, there is no name or tile. So I just use the basename function to extract the filename from the url of the image.

[afercia]

This was reported a few days ago also on the WordPress Trac. See https://core.trac.wordpress.org/ticket/49651

[aristath]

Just opened a PR for this on #24888 👍

[afercia]

The related Trac ticket was one of the tickets the accessibility team milestoned for WordPress 5.5. The accessibility team would need some help (we did ask for help) to help this issue move on 🙂 Setting the milestone to WordPress 5.6. for visibility.