SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Header: h1 or alt?

    I'm helping an artist friend with their website, and I've backed myself into a corner. They have multiple pages and a header div at the top of each one.

    For each page's header, they want to design a really fancy image in Photoshop instead of creating one with HTML and CSS (they want the font to be really fancy, too, so we can't just lay text over an image).

    Each page has a different header, e.g. "Welcome to the Home Page," "News and Upcoming Events," etc.

    Here's the problem: If the person who views the website has images enabled, I don't want them to see the corresponding h1 (because the h1 just repeats the text in the image). If the person doesn't have images enabled, I do want the h1 to appear.

    I could set the image's "alt" text to nothing, but the h1's CSS has "display:none". A viewer could end up with an empty header.

    I could use the "alt" attribute instead of the h1, but I use h2,3,etc. later in the page, so I'd be skipping (and it doesn't seem appropriate to use h1 anywhere but at the top of each document). Also, do text-only browsers and screen-readers render h1 in such a fashion that an "alt" header can't replicate? I don't know, so I assume they do.

    Is there a graceful solution to this awkward situation that keeps the Photoshop headers?

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're inserting the header image using a IMG element, you can put the IMG inside the H1 and give the IMG good alt text. Users with images will get the graphical header as the H1. Users without images will get the alt text as the H1.

    If you'd prefer to use a CSS background image (rather than a IMG) to insert the header, you can use one of many CSS image replacement techniques to replace the H1 text with an image.
    Last edited by chris cressman; Apr 9, 2009 at 12:33. Reason: Clarification

  3. #3
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  4. #4
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    I use technique #8 on this list, and it has worked out well. I recommend it for the best accessibility all the way around. The only flaw it has, as the site mentions, is that transparent images will show the text below. Use with discretion.

    If you're concerned about the extra markup, you can use Javascript to pipe it in for you. That way it will be ignored by other user agents such as screen readers or robots.
    Eric Roberts - Racine, WI Web Design & Development
    www.cryode.com

  5. #5
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Aken - I use the same approach as well

    What do you think about this?
    Code HTML4Strict:
    <h1><img src="header.gif" width="" height="" alt="Text here"></h1>
    To me using alt text for header text just feels off...

  6. #6
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personally, I wouldn't do it that way. First of all, I don't know how search engines would react to a header tag with only image content - would it pull the alt as the header? I don't know.

    Also you'd still have a full image that might be way out of context layout-wise when CSS is disabled, if the logo happens to contain any background or other layout elements beyond the logo text. Also depending on transparencies and colors, it might be very hard to read also.
    Eric Roberts - Racine, WI Web Design & Development
    www.cryode.com

  7. #7
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Awesome, thanks all.

  8. #8
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aken and myself think it is not the best practice to target keywords using alt text....

    Anyone disagree, and if so why?

    This would help sdleihssirhc as well with making the best choice

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Hmmm, they do index alt text of images. If they are in a header, then it's text in a header. So, in principle it should work.

    I tend to use Gilder-Levin as well because alt text is pretty impossible to style. It's always pretty tiny on my screen and my browser never tells me there's an image there, no border or "broken image" icon or anything.

  10. #10
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For what it's worth, I just did a random quick test of how browsers handle alternate text of a missing image inside an <h1> tag.

    The browsers I have available are FF3, IE6 & 7, Chrome and Safari 3.2 (all on my PC).

    Firefox is the only one that actually acknowledges that the image is missing and replaces it with the alternate text. It renders the text just like a normal <h1>. The rest of the browsers show some form of broken image graphic.

    That said, I think it's really bad practice that some of the major browser user agents don't replace broken images with their alternate text, since that's one of the benefits of the alt text to begin with. Granted it's not really related to things like screen readers or people with images turned off, but it's still handy to have.

    Also based on what I've researched about Google's alt text actions, it more than likely would consider the alt text of an image inside an <h1> tag as the actual H1 content, giving it the priority it deserves. However I still would recommend other methods based on other accessibility issues.
    Eric Roberts - Racine, WI Web Design & Development
    www.cryode.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •