Question about the use of an alt tag

Marketing
1

I have a question concerning the use of an alt tag. I have text that is pertinent to the site that I would like to put under the h1 tag, but this is an image. Would I be able to set up the image as a background, then set up an h1 (or any text tag for that matter) with the text inside of it under an alt tag?

First off, this appears to look fine, but I was wondering if anyone knew if it had any bearing on the seo either good or bad. I don’t want to loose this content and it has to be an image, but I also don’t want to be penalized for something that might be seen as deceptive.

2

Using an <img> to display a graphic of text was the original image replacement technique!

If you create a graphic of the text that you want to use in your <h1>, it would be absolutely semantically appropriate to have <h1><img src=“heading.png” alt=“This is my heading”></h1>, although I would recommend sticking title=“This is my heading” in there as well.

It may not be the preferred image replacement technique for most circumstances, but I don’t think there are any semantic reasons not to use it.

3

JJMcClure, I’m not sure if you’re saying that you can never put an <img> inside an <h1> (in which case I question, why not?) or if you’re saying you shouldn’t put <h1> tags around images solely to boost their importance.

If the image, for example, was an image of the text “Joe’s Cupcake Recipes” in a non-web font on a page about Joe’s cupcake recipes, up at the top so it was clearly the page heading, would you have a problem with this:

<h1><img src=“heading.png” alt=“Joe’s Cupcake Recipes”></h1>

…?

If so, why?

If not, then you guys are talking past each other.

As for the image replacement thing, all Stevie means is that before people used fancy CSS replacement techniques, <h1><img …></h1> was how you replaced header text with an image. Still can be. If you mean replacing text with an image when you say “image replacement”, then literally replacing text with an <img> tag is exactly that, however inelegant you believe the code is.

Again, for clarity: the claim “looking nicer” isn’t a reason for using h1 tags, its for using an image instead of text within the <h1> tags that are there anyways. The <h1> element signifies a page heading, whatever it is that is serving to identify the page heading to visitors and user agents.

This isn’t an arbitrary image that <h1> tags are being added to. It’s the page header, which happens to be an image instead of text.

4

The purpose of the alt attribute is to supply the information the image provides to those who can’t see the image. If used correctly for that purpose then the search engines will also be able to tell what the image was about by reading the alt text.

To get the alt text right you should completely ignore SEO when writing it as it is far more important that it convey what the purpose of the image is. If it does not then you have just converted your page into junk for anyone who can’t see the image.

5

They didn’t say which program it was, and the article (called Too much accessibility - TITLE attributes or similar) has been 404 since they redid their site. I got an email reply a while back saying they were slowly putting old articles back in. However I also remember a mention that it had been reported, since text inside an attribute should be considered separate from text nodes.

And I goofed, it wasn’t Royal Society of the Blind (oz) but Royal National Institute of Blind People (uk).

6

I don’t think that wrapping an image in <H1> tags is semantically correct markup, plus you’re saying to the search engine ‘we want this text to be considered important even though our visitors can’t see it’, I just don’t think it looks good.

Perhaps use an image replacement technique instead?

7

But it’s not visible text, it’s an attribute, therefore only the search engine bots know that it’s wrapped in an H1 tag and will therefore assume it’s for their benefit since no one else can see it.

A screen reader won’t know to give it emphasis because it won’t see it as a heading, only as an Alt desc (not 100% on that, anyone know for sure?). Also, what happens if someone has images turned off?

If we’re talking about ‘looking nicer’ then that’s still no reason to wrap it in heading tags. It looks the same whether it has <h1> tags or not.

8

If the image IS the main heading then semantically it belongs inside the <h1> tag.

9

Amen!

…and the rest of what you wrote was spot on as well :slight_smile:

10

You shouldn’t need to do that as having the text run together like that is a bug in the program since the actual content does have a word boundary at that point even without the space.

Have you reported that as a bug in whichever program it is that does that so that they can fix it?

11

A screen reader does not give an h1 emphasis anyway. Mine announces how many headers are on a page. I can go to the h1 by using the H quick-key. It will go to the first set of <h#> tags. Depending on my settings, it will either read the alt text like regular text, or if the coder was stupid and left it out, it would read out the image url. Alt text is pretty much the same as text so long as it’s actually present… if an image is being used for a link, and there’s no alt text, you get “Link Graphic (the url)” but when there’s alt text you don’t hear a difference. “Link home, link about, link contact us, link documentation” whether it’s anchor text or alt text. Semantically, it’s just a list of anchors either way.

<li><a href=“home.html”><img src=“home.png” alt=“Home”></a></li>

Reads out like
<li><a href=“home.html”>Home</a></li>

I would not add a title in this case because if you’ve set your reader up to read both title text, alt text and regular text you may get doubles. The Royal Society of the Blind even suggest adding a space at the end of title text to prevent the last word of the title text from running into the first word of the element text:
<a href=“home.html” title="XCorp’s Home Page ">go home</a> (bad example as far as text but you see the gap… without the gap some readers may say “XCorp’s Home Pagego Home”)

Also, what happens if someone has images turned off?

If they are using Firefox, and you’ve CSS’d the image’s text properties, you may notice absolutely nothing at all. It will visually look like any other text.

However all the other browsers hold open the dimensions of the missing image (if they know it) and make a big red x and the alt text is usually smaller. I’m no fan of Firefox but I prefer the way they deal with images than the way all other browsers do.

So if I were visually impaired but not totally blind I’d prolly still use FF because of the easier alt text reading and better rendering. But listening is exactly the same.

What I cannot say is whether a search engine will discount alt text as the sole text in a header (well, I do know they pick it up because of what I see in results of some sites I’ve written), after I read from SEOMoz something about alt text not being regarded at the same “level” as regular text (however this was only in links, there was no mention of something plain-text like headers). Luckily, I don’t give a damn.

12

I never said it was the best way, but using an <img> element with appropriate alt text was and is a valid way to replace text with a graphic for supporting user-agents.

If you want to put that text in H1 tags that’s fine although that text is usually a link so once again, not an H1 situation because it’s not a heading.

Huh? Text-replaced-by-images generally occurs in one of two places - it could be for action buttons (which, as you say, would be links) - or it could be used for headings, à la CSS Zen Garden, which would not by and large be links. And so replacing the text with an image inside an <h1> element would be entirely appropriate. And while, as I said, the better techniques use CSS to achieve that, there is nothing intrinsically wrong with using an <img> element. Can you enlighten us as to why you are so outraged by that?

Please correct me though if there was a pre-CSS image replacement technique that I’m not aware of.

Um … the <img> element :rolleyes:

No, it wouldn’t. H1 is a text formatting tag and an alt desc is not text in a presentational sense.

<h1> is not a text formatting tag. I know this, because it is allowed and recommended in HTML 4.01 Strict, which formatting tags are not. Formatting tags are generally deprecated, or deprecated in certain uses, such as <font>, <b>, <center> and so on. What <h1> is is a semantic markup tag, which gives the meaning of its contents. It does not specify any formatting.

And does “an alt desc is not text in a presentational sense” actually make sense? Because I can’t see any there. The alt text is text, it is the text to be used if the image is unavailable, and so should be considered as equivalent to the image in both content and context. If you were using the text that is in the alt just as text, and forgoing the image replacement, and you would put it in an <h1>, then it is absolutely right that you can put the <img> element in the <h1>.

What is it that you do for a living?

That’s none of your business, particularly when written so clearly intending to cause offence, but it is nothing to do with web design.

13

No, it wasn’t. Proper image replacement wasn’t possible until CSS was invented which allowed the text to be set to display:none; (which caused problems for screen readers) or indented off the page and therefore not visible to the human user, only to the other user agents. If you want to put that text in H1 tags that’s fine although that text is usually a link so once again, not an H1 situation because it’s not a heading.

Please correct me though if there was a pre-CSS image replacement technique that I’m not aware of.

No, it wouldn’t. H1 is a text formatting tag and an alt desc is not text in a presentational sense. What is it that you do for a living?

14

I don’t think that wrapping an image in <H1> tags is semantically correct markup

If the text alternative == the text, I don’t see why not

plus you’re saying to the search engine ‘we want this text to be considered important even though our visitors can’t see it’, I just don’t think it looks good.

The assumption in my example above is fancy corporate logo text looks nicer than plain text/no user has this jawsome font we use in our logo.

Perhaps use an image replacement technique instead?

Image replacement is usually the better option if you
a) want to style the text (styling alt text except in FF is difficult-to-impossible)
b) don’t mind an extra layer of code, or want :hover/:focus/:active changes

However, seeing how often people want to use an image with text, instead of text, in simple situations, I’m saying the alternative text should be regarded no differently than any other kind of text within the same tag type.

15

To make things clear:

<h1><img src=“logo.png” width=“thewidth” height=“theheight” alt=“Milwaukee Soap Corporation”></h1>

Should be considered the same as

<h1>Milwaukee Soap Corporation</h1>

I keep hearing there are some user agents who do not always see/show alt text. I don’t know who those user agents are, but search engines have no trouble with alt text. Alt text inside any tag should be considered equal to regular text inside the same tag.

16

If i get it right, you said you want to use header tag on your alt text, right? I don’t think you can do that… But i suggest to still use the alt attribute and add text around the images… it also helps…

17

The first rule of talking about alt tags is that there is no such thing as an alt tag…

There is an alt attribute, which is tied to an img element. The purpose of the alt attribute (alt text) is to be used instead of the image if for any reason the image is not available. So if there is text included as part of the image, the alt should repeat that text. If the image is a picture, but the picture is important to an understanding of the page and interaction with it, use the alt to describe the image as succinctly as you can. If the image is purely decorative, your best bet is to have alt=“” (ie empty alt text), which tells user agents that can’t render the image to ignore it completely.

If the text you want to include in the alt attribute fits that description then fine, go right ahead. If it doesn’t then it sounds like keyword stuffing, which is a Bad Thing™ and likely to get you penalised in Google. Relevant text should be included in the visible content, and not hidden from users by any means, whether that’s putting it as an alt attribute, positioning off screen, setting foreground and background colours to be the same, or any other method of obfuscation.