Add unit (px) to suggested image size in customizer

[Presskopp]

When you go to Customizer > Header Media > Add new image

you see a notice about image size like:

Suggested image dimensions: 2000 × 1200

It should have a unit

Suggested image dimensions: 2000 × 1200 px

[afercia]

From an accessibility perspective, worth noting all similar abbreviations should be avoided or expanded with the full form. For example, the suggested dimensions (including the missing "px") gets read out by a screen reader as:
one two zero zero times two eight zero pee ex
Numbers should be properly formatted too.
Recently, in another project, I've changed a similar string in "2000 by 1200 pixels" which is slightly better.

Same for the file size: one gee bee.

By the way, this applies to all the similar cases in core.

[dd32]

@afercia curiously, would <abbr title="pixels">px</abbr> work? (maybe with an aria-* attribute?)

[afercia]

@dd32 the title attribute works like a description and gets announced in addition to the visible text. So:

<abbr title="pixels">px</abbr> = pee ex (short pause here) pixels

Also, there's no guarantee the title attribute will be announced, it depends on the verbosity settings users can tweak in their screen readers.

The aria-label attribute replaces the content instead:

<span aria-label="pixels">px</span> = pixels

By the way, it tends to work best on interactive elements. Thinking also at the resulting translatable string, it would be simpler to use just plain text.

[rianrietveld]

We discussed this in the accessibility bug scrub.
Thank you for this ticket @Presskopp

We concluded: just use plain simple 'pixels', adding extra HTML to explain px seems a unnecessary complication.
Also the x can be replaced by the word 'by' for a clear pronunciation by screen readers.
So the sentence will be:

2000 by 1200 pixels

Note by @celloexpressions that the custom header controls currently say 2000 × 1200 pixels, so that should be unified at some point.

[stormrockwell]

replaced 2000 x 1200 format to the confirmed 2000 by 1200 pixels format

[westonruter]

@stormrockwell thanks for the patch, but you have hard-coded English text in there. It needs to be translatable.

[stormrockwell]

Fixed hard-coded text

[stormrockwell]

Could someone confirm that I am adding the translation functions correctly?

[westonruter]

@stormrockwell there should probably be a single string that gets used with substitutions. For example suggestedDimensions could look like: __( '%1$s by %2$s pixels' ) and then in JS you can replace those placeholders with the values for width and height respectively.

[stormrockwell]

Thank you very much @westonruter for the help. I reformatted 38932.3.patch following those tips.

[westonruter]

Patch looks good. The question of the hour then is how this gets milestoned. Does this go to 4.7.1 or 4.8?

[ocean90]

38932.3.patch​ is missing translator comments for the placeholders. /* translators: 1: ...

Does this go to 4.7.1 or 4.8?

I vote for 4.8

[stormrockwell]

added translators comments

[Presskopp]

I made a new related ticket about adding units in media view:
#39667

[afercia]

Refreshed patch.

[afercia]

In 40573:

Accessibility: Improve the suggested image size text in the media views.

Adds pixels as unit, avoiding abbreviation for a clearer pronunciation by screen
readers. Also, adds the word by instead of the special character times.

Props Presskopp, stormrockwell.
Fixes #38932.