| This 31 message thread spans 2 pages: < < 31 ( 1 [2] ) | |
| accessibility and <h1> header images
|
phranque
msg:3844968 | 1:04 pm on Feb 8, 2009 (gmt 0) |
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. the header text, the alt attribute value and the text in the image itself are all equivalent in this example.
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> |
|
however if you disable css then you get an echo effect.
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. 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.
you have to wonder about seo-related issues with using display:none; for the text...
|
phranque
msg:3854446 | 1:22 am on Feb 21, 2009 (gmt 0) |
| relying on alt text with images off/css on means you can't style the text to look as similar as possible to the image. |
|
But that isn't true! |
|
forgot to follow up on this.
it's true that you can style the alt text but if the image is using a font that isn't typically installed on a majority of clients such as a proprietary font...
|
| This 31 message thread spans 2 pages: < < 31 ( 1 [2] ) |
|
|
|
