The .hide-text mixin that was added from #2362 is using a technique the originator of it has already abandoned.
h5bp/html5-boilerplate@aa0396e discusses the why, but using em's on padding/margin is the primary reason this original Kellum technique can be trouble. That said there are plenty of other reasons why this technique is strong along with a full swath of screenreader testing.
It'd be nice to standardize our approaches here leading to much lower maintainability cost.
cc @nimbupani @scottkellum @zslabs
Agreed, I would love to propagate the use of well-tested defaults and this kind of standardization would help immensely.
Hiding text is nothing more than a glorified hack. A useful one but still a hack. display: none is the obvious choice but screen readers and search engines skip it. Driving us to more obscure and inelegant solutions to trick screen readers and search engines from thinking the text is still there. Lots of ways to do this and they all have drawbacks but that is the nature of hacks.
In short, I don't think we are going to find an elegant solution to image replacement any time soon and maybe we need to have a new CSS declaration to actually do it right text-decoration: hide; or something. There was a long debate last decade and I assume this will be no different. The debate is so heated because all the methods suck.
H5BP IR: h5bp/html5-boilerplate@09134cd
Simply color: transparent: h5bp/html5-boilerplate#1005 (comment) @chriseppstein
FYI: #2362 (comment)
update hide text to h5bp technique #2586
This looks to be resolved as of 2.0.2.
Is it resolved? Still settling on H5BP method?
(less) update hide text to h5bp technique #2586