so far i was doing it like this:
<img src="image.png" alt="Keyword" />
Now, i discovered that images can have title attribute too:
<img src="image.png" alt="Keyword" title="Keyword"/>
Is there any other optimization i could pull off to boost image links value?
I think that's the best you can do really, someone told me to try and make image names as descriptive as possible, for instance:
image_001.jpg --> honda_accord_2009.jpg
Granted image.png is just an example, but it might apply.
That's all I could think of.
Think of the alt attribute as an alternative text replacement for the image. Imagine for a moment that you had to describe the image to someone who could not see it. That is the sort of information you should be conveying in the alt attribute.
Similar to the alt attribute, title is used for the same purpose. It helps to convey extra information about an element. You can apply the title attribute to most elements but you must give all your images an alt attribute.
In my opinion, having both an alt and a title on an image is redundant, especially if they are conveying the same information.
I would have to say yes, the title tag would add value to your SEO. Check this link for full details - http://www.seocentral.com/tutorials/alt-title-attributes.html
Don't over-optimize your links and/or images.
As other users pointed out every image should contain an alt-attribute.
On decorative images the alt tag should be places but it should be empty since it doesn't convey any information.
The alt tag should describe the meaning of the image within the current context. Imagine trying to explain the image to a blind person. If you can't come up with a good way to explain why the image is relevant there the alt tag should be empty (if the image should be placed there at all)
Check out this article for more information on that:
http://www.userfocus.co.uk/articles/alt_text.html
The title tag creates this little popup when you hover over the link or image for about a second. This should be used to give the describe the image and might be a better place to put a keyword.
What you also missed in the question is the filename. If the image is relevant to the topic of the page you could use keyword.jpg or something.
This would also help it in image search engines.
Related
Let's say I have an image like the one below.
According to WCAG, this image is functional because it links the user to another page. It seems like I should put the destination of the link in the alt attribute like alt="comic homepage".
Wouldn't someone with a vision impairment also like to know what the image is showing? Would that user appreciate something like alt="comic that links to the cloudtweaks homepage"? The comic doesn't seem to be purely decorative.
<a href="http:////cloudtweaks.com">
<img src="comic.png" alt=??? />
</a>
This page does something similar (scroll near the bottom of the page).
You have asked this question but not provided enough context. Seeing the surrounding content, the entire page, or the entire site would help.
Is there surrounding text that explains either the image or where the link goes?
Will the image appear on the page after the link, perhaps a more full version of the image (as in, all the panels if this image is one of many)?
Does the site behave similarly to another site or section of this site with which you have confidence users are familiar?
A screen reader is going to announce that it is a link, that it is an image, and then it will announce the image alt text. If you do not feel it necessary to provide some text outside of the image to show users, then you probably do not need to try to force it into the alt text nor into a title attribute (also, do not use a title attribute).
Basically you want to give sighted and non-sighted and low-sighted users the same experience. If you feel it necessary to manage expectations on where the link goes by using the alt then you should just provide it around the link or before the collection of links. Then it helps all users. If you do not think you need to manage the user's expectations, then do not force it on the non-sighted users by jamming extra text down their screen readers.
This situation is documented on the WC3 Website: Image used alone as a linked logo
The WCAG says that you should not describe the image text in this situation but the link function.
When an image is the only content of a link, the text alternative for the image describes the unique function of the link.
If you think that the text within the image should be described to screen readers users, you have to change the structure of your HTML, excluding the image from the link, for instance.
Comics
Image of the day:
<img src="..." alt="If the clouds ever did go down would it be called fog?" />
or adding the description after (note that using aria-describedby the description might be hidden)
<img src="..." alt="Comics" />
<div id="desc" style="display:none">If the clouds ever did go down would it be called fog</div>
But this may be quite perturbing, I would say...
For accessibility purposes when linking an image associated with a few brief words of text, is it better to put links on them separately or together?
Together:
<img src="">Go to this page
Separately:
<img src="">Go to this page
(Assuming we put other accessibility arguments aside - like alt attributes, etc.)
Combine them into a single link. Whether you put an alt attribute on the image that is non-empty, depends on whether the image is already described by the text or not.
http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/H2
So I've been trying to make my site as accessible as possible (for non-JavaScript users, web crawlers, screen readers, etc), and I hit a large snag.
The site I'm developing is very image heavy. (I draw stupid stuff in my spare time and the site is a sort of a "showcase".) Each page in the site has a single image (or multiple, if context is needed or the image is several panels) that is usually accompanied by a single caption underneath. So when I got to the point where I had to add accessibility options, I wasn't sure what to do. For example, let's say I had an image of a man eating an apple and the joke was there's a worm in it. So the first thing I did was add a ludicrously descriptive alt text since it was the only way to provide an "equivalent" for screen readers.
<img src="appleeat.png" alt="A man bites into an apple. As it turns out, there's a worm in it!">
This seemed okay at first, but then things went awry really quickly when I suddenly found myself needing to add alt text up to 300 characters (!!!) for the more elaborate jokes and images. Not only that, but apparently alt text isn't for descriptions anyway.
So I'm having these problems:
Alt text is for equivalents, not descriptions. However, the only way to provide an equivalent in this case is to provide a description.
longdesc seems to be more suited for this feat, but longdesc is not supported by any browser (at least, according to W3Schools) even though it does seem to be in the HTML5 specification.
<figcaption> seems to be the way to go, but it ends up displaying text underneath the image in question, which is definitely not very appealing for my site, especially if I want to add additional captions and context in <p> tags or something.
So what do I do? What would I put, and where? I'm totally stumped on this, and frankly I'm not certain that making a site based entirely on images accessible to people who can't see very well is a good idea.
The alt attribute is for alternative text, i.e. textual replacement for an image, so in the example, it is adequate if it reasonably tells the same story as the image. In reality, most images cannot have texts that are full “alternatives” or “replacements”; it’s usually a matter of capturing some of the most essential message, if possible.
An alt text can be of any length. The statement that alt texts should not be descriptions does not mean that it cannot be detailed if needed. The point is that there are too many descriptions that say something about an image without conveying its message (like “big red bullet” or “A man in a canoe”).
The longdesc attribute is supported by some software but highly debated and not part of W3C HTML5 CR but being developed as an independent “extension”.
The figcaption element is for captions presented along with an image. It does not address the issue of alternative text at all. It is meant to be presented to the user, whether he sees the image or not.
If you want to provide complex alternative text (where "complex" could mean: containing lists, tables, audio/video etc.), you could either use an img element with a longdesc attribute, or an object element instead of img.
longdesc
In HTML 4.01, longdesc is part of the specification. In HTML5, it was removed, and is now developed as an HTML5 extension (but it’s currently only a Working Draft from 2013 Update: it became a W3C Recommendation).
Problem: You would either have to include the content on the same page, but then you shouldn’t visually hide it (as not only screen reader users may want to access this content). Or you would have to add separate pages for the content (but then search engines won’t relate this content to the image, i.e., you miss on ranking potential).
object
The object element can be used for any kind of media. Its content is the fallback content, which allows you to use markup for the alternative text.
<object data="appleeat.png" type="image/png">
<!-- the alternative content goes here -->
<p>A man bites into an apple. As it turns out, there's a worm in it!</p>
</object>
Here’s some discussion of alt text that might apply to your situation:
http://webaim.org/techniques/alttext/#context.
Although I agree with #Jukka that long alt text isn’t a problem in itself. It’s true that “alt text isn't for descriptions”, but only because alt text is for equivalent content. If the equivalent content to a particular image is a description of it, then that’s fine.
It’s just that for lots of images used on the web, that’s not true. For example, the best alt text for the Stack Overflow logo at the top of this page wouldn’t be
The Stack Overflow logo: an abstract in-tray overflowing with paper, followed by the word “stack”, and in bold, the word “overflow”
It would just be “Stack Overflow”, because that provides an equivalent experience for a partially-sighted person (i.e. it tells them which website they’re on).
But if your images are cartoons, I guess writing alt text for them is a bit like doing audio descriptions for movies. You need to be more descriptive if you want to provide an equivalent experience. It’s certainly a challenge, especially if you don’t have experience, or partially-sighted users to discuss it with.
Joe Clark, in his book “Building Accessible Websites”, discussed describing images:
http://joeclark.org/book/sashay/serialization/Chapter06.html#h2-2290
And even providing alt text for comic strips, although his example is for dialogue-heavy strips, and I’m not sure what sort of experience it provides in today’s screen readers:
http://joeclark.org/book/sashay/serialization/Chapter06.html#h2-4240
Most people now use a figcaption as a caption under an image in an article, or for a short image description, like so...
<figure aria-labelledby="myimage1" >
<img id="image1" src="myimage.jpg" width="100" height="100" alt="image:My Image" title="Image of Something Cool" />
<figcaption id="myimage1">This is My Image Caption!</cite></figcaption>
</figure>
However....since you are associating a larger description with your image, and it is not needing a caption, try this...
<div role="img" aria-labelledby="myimage2">
<img id="image2" src="myimage.jpg" width="100" height="100" alt="image:My Image" title="Image of Something Cool" />
<p id="myimage2">Larger description of my image...</p>
</div>
This is also compatible with WAI-ARIA accessibility standards, which will read and associate your container "div" and your "p" description with the image. Notice the new attribute, role=img. Since the div, unlike figure, is not normally associated with an image, this helps the screen reader identify the div container as part of the image.
ADDITIONAL
Note that the alt attribute should be a text replacement for an image if the image never appears, a user agent cannot read images, or the image is slow to download. I like to show this info in a grey background image box in case a image breaks and a user needs to know what is missing. Its designed to tell a user what the image represents in a simple, short text string.
The title attribute on images is an important rollover box that gives additional image information, image map feedback, or where it would link to when the image is a clickable hyperlink. Some designers frown on the title attribute but I use it all the time in a lot of my HTML to add rich info to all my interactive and visual elements.
I think adding in descriptive text in a <figcaption> is a good idea. There is of course the problem with browser support, this should be able to be addressed with CSS:
figcaption { display: block; }
You could then hide this text by default figcaption { display: none; } and include a link somewhere that will refresh the page with the captions displayed through an alternative style - figcaption { display: block; }
This option then eliminates the need for javascript solutions and only gives captions to those that specifically request them.
You could maybe set this up with a little bit of php:
<head>
<style type="text/css">
<?php if(isset($_GET['CaptionDisplay']))
{
echo 'figcaption { display: block; }';
}else{
echo 'figcaption { display: none; }';
}
?>
</style>
</head>
HTML Link - Show captions
This is completely off the top of my head :) Let me know if I can better explain anything.
I think "equivalent experience" is kind of subjective, and I can attest from experience that many accessibility guidelines, while well-intentioned, aren't correct. For a screen reader user, just seeing the Stack Overflow alt tag logo wouldn't provide an equivalent experience to a sighted user. You should always describe any alt tags properly. I don't think having a longer alt text is necessarily bad, but if it gets too unwieldy, you could build a separate section in plain text. Thank you for taking the time to make your site accessible. Screen reader users do appreciate inclusive design and the thought-out descriptions.
if I'm already having person name under/over image then should i use same name in ALT text?
alt text http://easycaptures.com/fs/uploaded/227/6990285751.jpg
<p><img width="125" height="157" alt="George Washington"
src="media/gw.jpg"><span>George Washington</span><p>
<p><span>George Washington</span>
<img width="125" height="157" alt="George Washington" src="media/gw.jpg"><p>
Should i repeat <span> in alt in both condition ? image has no link.
Yes.
ALT Text is important for screen readers and such. Text 'nearby' to an image doesn't have much meaning to these programs.
Some more information from W3C on the subject.
No ... and yes!
No, I my opinion you should not just repeat the text.
However, you should see the ALT attribute as an opportunity to provide a (short) description of the image, e.g. "Portrait of George Washington, oil on canvas, circa 1790".
It this case the image does not only serve as page formatting. Instead, it is an information-carrying element. Users who cannot see the information (e.g. screen readers) should at least have a chance to know what they're missing.
No. Duplicate content is unhelpful. If an image merely illustrates something which already exists in the normal text content, it should have a blank alt attribute
As a useful test, use the Lynx browser to look at the page. If it looks stupid, the alt text is wrong.
Here is how it renders if you duplicate the alt text (copy/pasted from your example):
George Washington George Washington
No. Alt Text is shown as an alternative for the image when it cannot be shown.
Here is an extract from the specification that is quite straight forward:
Do not specify irrelevant alternate text when including images intended
to format a page, for instance,
alt=”red ball” would be inappropriate
for an image that adds a red ball for
decorating a heading or paragraph. In
such cases, the alternate text should
be the empty string (”"). Authors are
in any case advised to avoid using
images to format pages; style sheets
should be used instead.
Do not specify meaningless alternate text (e.g., “dummy
text”). Not only will this
frustrate users, it will slow down
user agents that must convert text
to speech or braille output. play
terminals, users whose browsers
don’t support forms, visually
impaired users, those who use
speech synthesizers, those who have
configured their graphical user
agents not to display images, etc.
So it says pretty clear not to repeat. "Red Ball" in the first case can be replaced by "George Washington".
Here is a good article how to use the alt-attribute properly: Alt attributes
EDIT:
Ok i think i got misunderstood. I did not say that he mustn't use an alt-attribute here.
We are talkin about screen readers and accessibilty here, right? I agree the image is important to us. But is it to blind people? Or is it just decoration for the text?
Remember the question was wether to repeat the name in the alt attribute. And i say "No". When images are not shown, the alt-text is displayed. I'd propably do it this way:
<p><img src="george.jpg" alt="Image of " />George Washington</p>
The alt-Attribute is the alternative for when the image is not shown and not a description (we have description for this).
Wouldn't hurt -- otherwise the screenreader user might be left to wonder if the image is in fact that of the person whose name comes next.
This info pertains to Jaws for windows but probably applys to other screen readers as well. Always put information in an alt tag. How jaws recognizes graphics is fairly customizable, you can have only graphics with alt tags spoken, graphics recognized by mouse over, title attribute, etc. In general with the default configuration alt tags will be spoken and any other information will be ignored. If an alt tag isn't available then the screen reader will do it's best to read the graphic but this is problamatic.
I am going for alt="" here.
Please check this article that provide a very nice examples:
http://webaim.org/techniques/alttext/
Quoting from that article:
The alt attribute should typically:
Be accurate and equivalent in presenting the same content and function of the image.
Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
NOT be redundant or provide the same information as text within the context of the image.
NOT use the phrases "image of ..." or "graphic of ..." to describe the image. It usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.
To make my web site XHTML compliant, I have added a title attribute to all of my IMG tags.
However, when you mouseover an image, the text from my title attribute displays as a small popup. I don't want that text to be viewable.
Question: How do I prevent the browser from displaying the title attribute text as a popup while still keeping the title attribute present?
<img src="..." title="text that gets displayed as a popup but I don't want it to" />
You don't have to have a title to be compliant, you need an alt.
The behaviour you are seeing is the correct implementation by the UA of title so is hard/impossible to override.
This is browser specific. Some browsers choose to display the title attribute, some choose not to display anything, and some even choose to display the alt attribute instead. Though lately this has become more uniform across browsers, with most of them leaning to the title attribute..
Title is meant to be shown, if you want an image description that does not show except for screen readers, use the alt attribute which is only shown if the image cannot be displayed (=> Screen readers).
Use ALT and TITLE together. Put your nice, helpful text in the alt tag and then nothing in the title tag like so:
<img src="http://www.google.com/intl/en_ALL/images/logo.gif"o
alt="Goooooooogle!"
title="" />
If ALT is no longer "valid" (is it?!), I suggest that any solution around this slight validation annoyance will be far worse than ignoring it.
I don't think this is a great solution, living with the tooltip is better, but if you set an absolutely positioned div with a solid background set to very low opacity (1%) and a higher z-index then your image, you should not get a tooltip.
<img style="position:absolute;
top:0;left:0;width:200px;height:200px;"
src="yourImage.gif" alt="the text you don't want to show"
title="the text you don't want to show"/>
<div style="position:absolute;
top:0;left:0;height:200px;width:200px;
z-index:1000;filter:alpha(opacity=01);
-moz-opacity:0.01;background-color:gray;">
</div>
Again, I don't suggest this, but this is just to show that there is a way...
It has been a while since this post, but I figure for all those who wander here from Google, here's my 2 cents:
The alt tag is fully valid--required even. The last solution works in nearly every browser, and where it doesn't work, a tiny rectangular tooltip will be shown with no text. The title tag overrides the alt tag and forces a specific tooltip to be shown. I don't know why people voted this down, considering it's the best solution here.
For those of you who see this as a bad markup: for a general website, yes, this isn't good practice. This is a modern age of the web, however, and you have to also consider web applications and very obscure one-off situations where this might be the best possible solution given the markup options we have to work with. We all know web 2.0 is only MOSTLY there. ;)
PROPOSED ALTERNATIVE:
Personally, I would suggest creating a div the size of the image and setting its background-image to the src that you want to use. There is DEFINITELY no tooltip this way, regardless of browser, and it's 100% compliant with everything. This will not work if it's an inline image, but it's pretty rare to use an image inline with text and not want a tooltip (an icon beside links, for instance, a great tooltip might be "External Link", or for a mailto:, "Send an email to:", etc.)