Page is a not externally linkable
phranque - 1:04 pm on Feb 8, 2009 (gmt 0)
the header text, the alt attribute value and the text in the image itself are all equivalent in this example. however if you disable css then you get an echo effect. btw i tried the text-indent attribute suggested by swa66 in that thread and had no success since everything i tried also affected the image placement and that wouldn't solve the echo issue with css disabled, which is the primary purpose of this post.
i am struggling with the same issue that was described in this thread in the CSS forum:
Does hiding text with "Display None" affect SEO? [webmasterworld.com]
as swa66 noted, substituting an image for text is not very friendly.
however i lost this argument about switching a header image to text and i have to admit the font looks cool.
so i am trying to find the best possible solution that addresses accessibility, user agent degradation, semantics, seo, etc in the most optimal manner.
the accessibility/usability quandary is the css-disabled echo effect versus the image-disabled silence effect.
this works well for image- and css-enabled browsers:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test H1 header with image AND text</title>
<style type="text/css">
<!--
.h1 { display: none; } /* so we can have some real text for accessibility and semantics AND the cool font/image */
-->
</style>
</head>
<body>
<h1><span class="h1">Header Text</span><img src="http://example.com/images/TT_headertext.png" alt="Header Text" width="222" height="33"></h1>
</body>
</html>
you will therefore also see the echo effect in for example the Semantic data extractor - QA @ W3C [w3.org].
in that case the alt attribute text is surrounded by square brackets so i wonder if that somehow indicates less trust in the semantic information provided.
i would be tempted to blank out the image alt attribute but then it wouldn't work well with images off and css enabled.
you have to wonder about seo-related issues with using display:none; for the text...