Welcome to WebmasterWorld Guest from 54.166.55.74

Forum Moderators: ergophobe

Message Too Old, No Replies

accessibility and <h1> header images

   
1:04 pm on Feb 8, 2009 (gmt 0)

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month Best Post Of The Month



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...

1:22 am on Feb 21, 2009 (gmt 0)

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month Best Post Of The Month



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