Headers and Images – Alt Text and the Weight Factor

I am drafting an article for the RI:Technology blog on Screen readers and Search Engines, and was reviewing a paper a colleague wrote about Search. He mentioned sIFR as a technique “to bring content to search engines”. I asked another colleague about this, as I’d always just considered sIFR as a “stylability” technique.
We started talking about the weight factor of search engines, whether content written to a page and then sIFRized would be weighted more heavily than the alt text of an image. I hadn’t really thought about that before. I then mentioned a habit I have of placing images within a heading tag, i.e.<h1><img alt="descriptive text" /></h1>. Toby asked if this really worked, if the alt text would be considered the header. I realized that I’d never really verified it before.

So I took a quick look at an example using FANGS, and learned that alternate text, really isn’t. Turning off images would cause the alt text to display as the appropriate heading level, but at least for FANGS, the alt text does not get surfaced as the heading (the text should show up before the colon in the screen shot below)

FANGS output with no text associated with the header

Now, obviously FANGS is an emulator, and it’s possible that a screen reader would access that alt text. But this gave me something to consider..

8 thoughts on “Headers and Images – Alt Text and the Weight Factor

  • Before I used sIFR and sometimes still I generally just set my h1, h2, whatever style with -9999px text-indent and replace the background with the image I’d prefer to show.

    • Thanks Brandon! I found my notes from the session I attended at Access U – sounds like you’re referring to what’s known as “phark image replacement.” My notes state:

      Fahrer Image Replacement —
      put image as background to h1, text in span, then display: none on span. Doesn’t work if you have images turned off.

      Phark Image Replacement —
      text-indent negative. Still doesn’t work if images are off.

      Shea Enhancement –
      puts empty span inside h1, put background over text.

      sIFR –
      ok, but has alot of dependencies

      (the presentation was by Marla Erwin and her notes are available at http://www.10sharpdesign.com/accessibility

    • I don’t know how long it will be up there — Marla is presenting at this year’s Access U as well (which is going on right now), I’m not sure if she’ll replace those notes with new ones.

  • A few comments….

    Setting styles to negative placements is considered to be spam by search engines. Under some circumstances this can get a site delisted. On a side note, a member of the web spam team at Google proclaimed that if someone where to use a robot file to block access to the CSS file, they will automatically assume that negative floats are taking place. This goes for any CSS trickery, such as nodisplay, or layering text behind images.

    Also, Google has also stated that H tags around images have no effect at all.

    sIFR (which is neither really scalable nor built by Inman, go figure) is a way to style headlines when you want to control color, aliasing, and font. It shouldn’t be considered a flash implementation. The nice thing about it is that you can put a headline in an H1 tag, and replace that content with a more stylized version. A search engine would see that as a H1 headline and weight it accordingly, and not view it as a flash embed, for example.

  • I don’t typically get to read things that make me crack up but your article really made me explode into laughter. You are such a funny composer with entertaining topics. Keep up the great work you do

Comments are closed.