Make WordPress Core

Opened 8 years ago

Closed 8 years ago

#36450 closed defect (bug) (invalid)

alt attribute missing from site icon preview

Reported by: tacoverdo's profile TacoVerdo Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.4
Component: Customize Keywords: good-first-bug has-patch
Focuses: accessibility, javascript Cc:


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'.

Attachments (5)

preview_browser_icon.png (53.1 KB) - added by TacoVerdo 8 years ago.
Example_in_Chrome_inspector.png (99.8 KB) - added by TacoVerdo 8 years ago.
Example_page_source.png (139.5 KB) - added by TacoVerdo 8 years ago.
patch_36450.patch (1011 bytes) - added by shahpranaf 8 years ago.
36450-2.patch (1011 bytes) - added by TacoVerdo 8 years ago.

Download all attachments as: .zip

Change History (14)

#1 @swissspidy
8 years ago

  • Keywords needs-patch good-first-bug added

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

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

Version 0, edited 8 years ago by swissspidy (next)

#2 @afercia
8 years ago

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 :)

#3 @shahpranaf
8 years ago

  • Keywords reporter-feedback has-patch added; needs-patch removed

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"


#4 @jeremyfelt
8 years ago

  • Version changed from trunk to 4.4

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

#5 @TacoVerdo
8 years ago

@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 might be better here, so Browser interface preview .

8 years ago

#6 @swissspidy
8 years ago

  • Keywords reporter-feedback removed

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.

#7 @celloexpressions
8 years ago

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.

#8 @afercia
8 years ago

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.

#9 @afercia
8 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed

Closing in favor of #36562.

Note: See TracTickets for help on using tickets.