For example:
<img alt="Facebook logo" src="http://facebook.com/images/facebook-logo.gif" title="Link to home page"/>
Which has more importance for Search engine, Alt text or image file name or title or all?
In general, the three most important things for image SEO are:
Image filename. Make it descriptive, i.e. "TabbyCat.jpg" or "tabby-cat.jpg" rather than "DSC0001.jpg".
Alt text. This should generally describe the image in a short phrase or sentence, e.g. "a picture of my cat, Tabby." Think of it like you were telling someone who can't see the image.
Text surrounding the image. This seems to be pretty important. The text that's close to the image would generally reference it in some way (e.g. in the same paragraph, or a caption under the image).
The title text is generally only important for links - it shows a tooltip to users when they hover the mouse over it. For images, you would rarely need that since it's either obvious what the image is or the text around it describes it fine. However sometimes you may want a little more info for users that attempt to look for it (various web comics put a little joke or addendum in the title text).
Finally, remember this: do what's best for users, not search engines.
Might be of interests: http://www.seroundtable.com/archives/007366.html.
Also there are tons of google results relevant.
In my experience, I would say both are important, and I tend to use CamelCase to name images.
Related
I have a site with a number of written documents that are rendered as images. If I wanted to make them accessible to visually impaired people, it would seem that I would need to add the text somewhere.
Each document is rendered as a series of images, one for each page (see this, for example). Would I want to each page's text into its corresponding image's alt attribute, or is there a better way to do it? And, if the alt attribute is the way to go, can I put the entire document in the image for the first page, or is it best to have the text in each attribute correspond exactly to the image it's in?
I would not use the alt attribute as it is used for short descriptions only.
Making all this text accessible would mean rendering it in HTML. In your document, there are lists, there are tables, there are definition lists ; all this needs to be semantically described via HTML so that it is accessible. You would not be able to do this via the alt attribute.
I think of multiple ways you could make this accessible:
have empty alt on all img and render all the text in HTML below the last image. The text can be visible to all, or only to those with screen readers as you wish (via the use of specific CSS, see the "sr-only" class of Bootstrap for example). If you want the text to be visible to all without taking too much visual space, you could hide it behind a toggle button (with the aria-controls and aria-expanded attributes).
on each img, have a short alt attribute and a longdesc attribute. The alt is the title of current page, like "Table of Contents". The longdesc is a link to an HTML page having all the text on the image.
after each img, have some HTML with the text of the image. This description can be visible to screen readers users only. Link each description via the aria-describedby attribute on the image.
I'd go with the first solution, because it's generally the simplest to deal with, and it benefits all users.
Most screenreader software won’t announce an entire page’s worth of content from an alt attribute, let alone a whole document. They have different cutoff points, but alts are intended to give short (a sentence or two) descriptions of pictures rather than large quantities of paragraphs, headings, tables, etc. You can test with a free screenreader (VoiceOver for Apple devices, or NVDA for Windows) to confirm this for yourself.
A better option would be to extract the text using OCR and put it into HTML or a Word doc that uses templated styles. That way people who can’t see the text can still have it read out plus they’ll be able to use all the usual navigation shortcuts like tables of contents and headings. You can still put any charts or graphs in as images with alts, and the amount of text you’d need to describe those would be much shorter and easier to write.
Which would be good write ALT text for a photo of kid which is smiling and sitting in garden?
This
alt="Photo of smiling kid sitting in the garden"
or this
alt="Photo of smiling kid"
or this
alt="Smiling kid sitting in the garden"
or this
alt="Smiling kid"
my purpose is to ask this question, I want to know should we include "Photo of..." in every alt text and And how much we should describe the photo in alt text.
It depends on the context but make it as short as possible without leaving out important information. As a screen reader user I like short alt text that gets to the point so I don't have to listen to lots of pointless descriptions. alt="Photo of smiling kid” is too long. Jaws announces the fact that it’s reading a graphic so alt=”smiling kid” would be better since it saves two words I don’t have to listen to. Only put information that is important in the alt tag. For example if the fact that the kid is in a garden isn’t important don’t put it in the alt tag. If the fact that the kid is in a garden is critical information that the reader must know then put it in the alt tag.
As a rule of thumb, the alt text should be what you would say if you were reading the page out to somebody over the 'phone.
A picture is worth one thousand words, but only some of those words are important in context. The same image will have different alternative content depending on the context it is used in. For example, on a photo gallery site, the image is the primary content, and a description of the image would be appropriate. The same image used to create a mood on an article, doesn't contribute any actual content so alt="" would be better.
Test your webpages using Lynx, it is a very good way to seeing if you need to change alt text because it isn't conveying everything you need to convey or doesn't make sense in context.
The late, great Alan Flavell wrote an excellent article on the subject which I consider essential reading.
Why not follow the standards? WCAG 2.0 guideline "1.1.1 Non-text Content" says that for content (e.g. images) that are used for decorative or formatting purposes then they should be implemented in a way that assistive technology (e.g. screen readers) can ignore it. If the "smiling kid" is decorative, then use an empty alt="" attribute.
http://www.w3.org/WAI/WCAG20/quickref/#text-equiv-all
It's really here nor there. The alt text should describe what the image shows, and will likely be supported by text on the page, but what level of detail you go to is down to you to decide.
What is the benefit to add null alt=""? is it only to pass validation or it has more reason
and how it should be write?
like this, no space
alt=""
or this with one blank space
alt=" "
To get your XHTML validated. The alt is a required attribute on images.
Adding it empty is however a sign of laziness from programmers (although I admit I also do it for images that are not key to site navigation like little decorative elements and so on).
P.S. If you have decorative elements like shadow components, certain ornaments you can add them not with images but as a CSS background, thus avoiding the need to write an alternative text and keeping your markup clean of non-content stuff.
Other answers have pointed out the requirements in the standard. Here is a practical example:
Given blank alt text, lynx will render:
Given a missing alt attribute, lynx will render:
filename.jpg
You don't want your content to have irrelevant filenames scattered throughout.
For images that have no suitable alternate text (i. e. pictures that don't carry any semantics, such as decorative elements), the alt attribute should be empty. Empty meaning empty, not a single space (which is a convention and recommendation but a good one).
The alt attribute must be specified for the IMG and AREA elements. It is optional for the INPUT and APPLET elements.
While alternate text may be very helpful, it must be handled with care. Authors should observe the following guidelines:
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.
Implementors should consult the section on accessibility for information about how to handle cases of omitted alternate text.
—HTML 4 specification. Section 13.8 How to specify alternate text
I'll add this as an answer as well (originally a comment on another answer), since it kind of makes sense to do so.
Images used for styling the page (and therefore has no real "alt" usage) should be inserted through CSS and background-image and its relatives, not through markup. That way you do two good things at once. You keep your design in your stylesheets, and you keep unsemantic code out of your page.
Although I do think the "semantics is god"-movement has failed to see the fail that is div and span, and the inherent ambiguity they produce, I still think a div with background-image is better than an img tag for styling.
<img src="young-girl-in-red-gown.jpg"
alt="young girl in red gown"
title="Young girl in red gown"/>
Is my above example a good example? Should it be always like this?
In above example I used a file name, alt text and title text that are almost the same.
Is it ok to use same text for alt and title even if it's not a link, or can this repetition can create problems for screen reader? (I'm repeating the text because FireFox doesn't show alt as a tooltip, and the client wants a tooltip.)
Should we use title with image if the image is not in a link?
Should alt and title be different always?
Do screen readers speak all these attributes for images?
Image file name
alt text
title text
Should I always use a descriptive image file name?
I use the Jaws screen reader and having both alt and title set isn't an issue. Jaws reads the alt tag by default if present and ignores the title unless specifically told to read it. I can't say what other screen readers do though.
No idea about screen reader users, but it bugs the heck out of me.
I doubt search engines care.
See:
The Importance of Images On Your Site
ALT vs. TITLE
The alt and title attribute are there for different things, they are not the same, they won't irritate anything, they are made to make things much more clear to both humans as well as search engines.
Using alt tag is good for standard-compliant, validated html and it is also equally respected by search engines.
I dont think that this should cause a problem unless you are stuffing keywords into that to increase keyword density on the pages. otherwise it is alright to have it the way your client wants.
It used to be that alt was how you created mouseover tooltips over images. Luckily, with the advent of title, this is not really needed.
If you wish to provide such a tooltip today, over either a text link or an image, title is the thing to use.
alt is what you use to make your images "visible" as text to browser technology that doesn't actually support images (such as screen readers, or text-based browsers). Thus, it doesn't have any meaning in the context of text links - since text in those is already, well, text.
Search engines' algorithms are a bit of mystery. If I had to guess, I would say that for web searches, there is so much signals available through text links, that there is no need to rely on titles and alts. Image search may be a different story. It's much harder to get information about what's contained in a picture and correlate it to textual keywords. Therefore, these attributes may be given more weight in that context.
I am in need of an icon for representing an elevation display, i.e. I have a label containing an elevation in metres, and I need a small (22x22 pixel) icon next to it to indicate thats what it is.
I have tried some things, like a vertical arrow, but none quite look right.
Anyone got any ideas?
I know this isn't strictly a programming question, but it is about a user interface, and therefore software related (i think).
Cheers
Edit:
In the end I went for this icon:
It represents it pretty well.
Something like this : (http://www.waymarking.com/images/cat_icons/elevationSigns.gif)
actually 24x24
look at this
alt text http://www.vectorportal.com/symbols/img/opengutter.gif
alt text http://t1.gstatic.com/images?q=tbn:7DqRw9FL5c9IfM%3Ahttp://media.peeron.com/ldraw/images/19/3044b.png
alt text http://t3.gstatic.com/images?q=tbn:jfs_Abjx3BnXEM:http://media.peeron.com/ldraw/images/272/50746.pngalt text http://t3.gstatic.com/images?q=tbn:L8injTgVVHLlIM%3Ahttp://media.peeron.com/ldraw/images/27/61409.png
alt text http://t1.gstatic.com/images?q=tbn:WXHlgHgon09alM:http://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Japanese_Road_sign_(Descent).svg/470px-Japanese_Road_sign_(Descent).svg.png
See also http://mutcd.fhwa.dot.gov/services/publications/fhwaop02084/index.htm
Don't forget about copyrighted © images
Create an icon form templates using axialis icon workshop. It is really convenient to use. As I remember there was a template. If no you can ealily import a image and edit or draw a one.
I don't think that's a sensible use of an icon; they're OK as visual cues to find something quickly once you've learned to recognize one, but as you have noticed, they suck at conveying actual information. Abbreviated text ("El.") would be more useful if you really lack the space for a full-length text label.
If it's for a plane:
alt text http://www.pekkagaiser.de/stuff/Plane.gif
Would need some re-working to look good on 22x22, though.
Plane stolen from here.
bullet_arrow_top from here any good:
http://www.famfamfam.com/lab/icons/silk/previews/index_abc.png
Download the set here:
http://www.famfamfam.com/lab/icons/silk/