The Rundle/Phark Technique
This technique was developed by Mike Rundle for use on his
Phark site. It hides the element text by setting an extremely large
negative text-indent
that pushes the
text off the screen to the left where it can’t be seen.
<h1 id="header">This is the headline.</h1> #header { height:20px
;text-indent:
-5000px
; background: url(headline.gif
) no-repeat; }
This method offers the following advantages:
No extra
span
element.Screen reader-accessible.
It doesn’t use any hacks.
Disadvantages include the following:
It causes problems in Internet Explorer 5.0 for Windows (the background may be moved with the text).
It won’t work under the CSS-on/Images-off scenario.
Some search engines look down upon pages that use large negative
text-indent
values.
Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.