homepage Welcome to WebmasterWorld Guest from 54.161.246.212
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / WebmasterWorld / Accessibility and Usability
Forum Library, Charter, Moderators: ergophobe

Accessibility and Usability Forum

This 31 message thread spans 2 pages: < < 31 ( 1 [2]     
accessibility and <h1> header images
phranque

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



 
Msg#: 3844966 posted 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

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



 
Msg#: 3844966 posted 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]
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / Accessibility and Usability
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved