alt attribute missing from site icon preview

[TacoVerdo]

Problem description
When adding a new site icon (favicon), in the preview step the content of the alt attribute is missing (see image Example_in_Chrome_inspector) from the image that shows the preview for the browser icon (see image preview_browser_icon). Looking at the source code of the page (see image Example_page_source), the correct alt tag is there, so it seems to be removed from the DOM at some point.

While the alt attribute information seems to be removed, an empty height attribute is added in the DOM.

Possible cause
A possible cause is that JavaScript is wrongly changing the attributes.

Steps to reproduce

1. Open the Customizer
2. Click 'Site identity'
3. Click 'Select image' below 'Site icon'
4. Select an image and click 'Select'
5. You're now on the 'Crop image' page. On the right, you'll see two previews. The problem occurs for the first image on the right, just below the header 'As a browser icon'.

[swissspidy]

In wp-includes/media-template.php, the alt attribute is actually empty in the tmpl-crop-content template:

<img src="images/browser.png" class="browser-preview" width="182" height="" alt="" />

No idea where the other variables like {{ data.url }} come from at first glance, but it's a good starting point.

[afercia]

As far as I see the browser icon preview is made with two images. The first one for the browser toolbar, the second one is placed on top of the first one and represents the actual "icon". Looks right to me, makes sense the image for the browser interface having an empty alt attribute.
Worth reminding the HTML inspector in your browser can be confusing sometimes since it shows empty attributes as just alt instead of alt="". Always better to double check pressing F2 to see the real HTML.
Would you please double check? Thanks :)

[shahpranaf]

Hi @TacoVerdo,

Firstly thanks for posting this bug. Along with your bug of "favicon preview image", @swissspidy also found another bug of empty alt for "Crop image". So have added patch for both.
Let me know if the alt name used by me is correct or not?
For crop image : "Crop your image"
for Favicon: "Preview as a browser icon"

Thanks

[jeremyfelt]

Looks like the empty alt tag was added during the 4.4 milestone. See #34583.

[TacoVerdo]

@shahpranaf It seems to make more sense to not have the same alt description for the 'background' and the actual icon.
The alt tag as shown in https://core.trac.wordpress.org/attachment/ticket/36450/Example_page_source.png might be better here, so Browser interface preview .

[swissspidy]

Looks like I found the wrong template I guess. @afercia is right:

Looks right to me, makes sense the image for the browser interface having an empty alt attribute.

[celloexpressions]

So to confirm @afercia, we currently have an alt tag on the browser image, so it should be empty on the preview image, correct? If so we could close this ticket I think. I believe this is also what we do in the new in-customizer preview introduced in 4.5.

[afercia]

Noticed the similar "browser interface" image used for the sidebar control does have an alt attribute 'Browser interface preview' that should be removed for consistency.

Also, some text is redundant when using a screen reader:

• the bold text and the alt attributes say the same thing
• the site name is just for visual purposes, should be hidden for assistive technologies

See in the screenshots below where I've highlighted the text I'd like to hide for AT.

I'd be in favor of closing this ticket and open a new one focused on these small improvements.

[afercia]

Closing in favor of #36562.