At the moment I have on my website some images which are defined in the CSS file as a background image.
The code looks like this.
The HTML:
The CSS:
.image {
background: url("../img/deelnemende-organisaties/arcadis.png") no-repeat;
}
Due to some other CSS3 effects with this background it isn't possible to change the background to a normal <img> tag.
Now I was wondering what is the best way to use background images and keeping the SEO ranking as high as possible.
I saw some solutions as:
Putting text into the <a> tag and then hiding it with CSS with text-indent: -9999em
Only put a title attribute on the tag with the text in it
Placing a transparent in the tag with the same title as your tag
Leave it as I have in my example and building up a so called Image Sitemap in a XML file
Now I'm not sure what is the best solution and I don't wanna screw my SEO ranking by doing something what they call illegal.
I saw some solutions as: - Putting text into the tag and then hiding it with CSS with text-indent: -9999em - Only put a title attribute on the tag with the text in it. - Placing a transparent in the tag with the same title as your tag - Leave it as I have in my example and building up a so called " Image Sitemap " in a XML file.
Speaking as someone with two years' experience both as a copywriter and an SEO lead, two of those techniques are going to get you punished and it's hard to recover from, it's definitely considered Black Hat. As far as images are concerned, the only thing you can do is write good alt image tags that concisely and accurately describe the image for image searches like Google's. Use an alt tag like:
<img src="myimage.png" alt="Dog running in front of Redwood Trees"></img>
This is two years old, pretty old for SEO, but most of the basics are still true and SEOMoz is a place you can generally trust the information.
http://www.seomoz.org/blog/image-seo-basics-whiteboard-friday
Now, there is a 'best practice' when it comes to images. Images can't do much for SEO, but they can really help people stay on your site if they're pretty and interesting. It helps if you put your nice images on sites like Facebook and Pintrest which also drive traffic to your site and help you get found. While these are SMO (Social Media Optimization) instead of SEO, it's still part of good web design that will give you more traffic and eventually increase your PageRank. Never do anything Black Hat. Hope that helps!
Image replacement via text indent is a common pattern that if Google were to be penalizing that technique, that would be common knowledge. If your goal is to maximize the SEO surface or at least be on par with the standard img with alt, then of your options the text indent adds the text content you would have added if it had been an img and is not currently frowned on by Google's indexing algo. Using a transparent image with alt text on it might be identical SEO exposure but it is possible that Google may factor in a tiny sub KB spacer-like image and that could have an indexing effect however that is speculation.
The OP specifically states that he has to use a background image in this spot. There is no alt attribute for a background, so Copenhaver doesn't provide an answer.
Related
For a webpage with multiple images of a single product, such as with different angles. Is there a requirement for alt tags for each image?
Viewing examples on Amazon it seems they only have an alt tag on the first product image, but after which there is no alt tag or aria related tags.
The first example here says that the stars have empty alt tags.
To follow proper standards, is it required to have an empty alt tag after the first image? To completely hide the extra non-helpful(same thing different angle) images using aria-hidden or to just do what Amazon did and only put an alt tag on the first image.
Also, are product images themselves even relevant content? If the product title is already there, wouldn't it be easier to just hide the images completely for screen-readers.
According to the W3, "If multiple images convey a single piece of information, the text alternative for one image should convey the information for the entire group." See https://www.w3.org/WAI/tutorials/images/groups/
First don't use Amazon for examples of how to do accessibility - their site is not a good example (they try, but they have years of bad practices that are hard for them to work around).
The answer to this depends on the product being sold.
For example if it is a mug with a picture of a dog and a cat cuddling then a single image alt tag would probably be the right option and hide the rest of the images from the screen reader.
However if it was a complex product with different images showing dimensions, specs, features etc. then multiple alt tags may be appropriate.
The question to ask is 'does this image portray any new information that would influence a decision to buy'.
If the answer is yes, add an alt tag, if the answer is no, hide it from a screen reader.
EDIT - To Address the Edit Made To The Question
From the perspective of pure accessibility and 'rules' - no, Alt descriptions are not needed for images if every single aspect of the image is described elsewhere.
However, in practice, there should always be at least one Alt tag with a useful description of the product.
The idea of alt tags is to provide blind users with as much information and as similar an experience as possible as sighted users (I am aware not only blind users use screen readers but for simplicity of explanation bear with me).
At the same time however, a blind user will also thank you for providing them with the least amount of information possible to give them the same experience as a sighted user.
A sighted user would see an image first and so should a blind person as it will make sense in the document flow, but adjust your alt description to provide information that is missing from the main description so as to avoid too much duplication of information for screen reader users.
Also (wandering away from accessibility a bit but still relevant as to why to always have at least one alt tag) don't forget SEO - you want that product image to show up in image search if at all possible, especially in a commercial setting, alt tags still help search engines categorise images.
The final argument for whether you should have at least one alt tag is what happens for people who disable images to save on bandwidth - you should still have at least one alt tag to describe what the image(s) should be about. (a different type of 'accessibility' but still relevant).
tl;dr -> yes have at least one alt tag still.
EDIT: One more question, are product images themselves even relevant content? If the product title is already there, wouldn't it be easier to just hide the images completely for screen-readers.
That's the main concern here.
Can we consider images in a commercial website as purely decorative? I don't think so.
Screenreaders can be used by people who are not totally blind, or for blind people to share information with fully sighted people : "look honey, do those colors will match ?"
For instance, people with LHON can still have peripheral vision, and may use a screenreader to facilitate their search.
The more important thing is to have a simple and comprehensive text alternative for the image.
If you only repeat the product name in the image, then having a blank alt might be better. But still, we can imagine someone blind wanting to share the image to get feedback comments.
I've noticed a lot of articles popping up lately regarding accessibility and SEO best practices questioning the usage of the old CSS text-indent: -9999px trick, and I'm curious as to what is the best practice here.
An employee from Google says it's not great and alt tags on images are supposedly just fine for screen readers. Is there any real truth behind this, and should I be changing up the way I'm handling some images on my sites?
Image with an alt attribute.
The text-indent trick is all very well for screen reader users, but falls over for people who just have images turned off (or when images fail to load due to a network error (trying to use 3G on a moving train is such fun)).
I'd say the alt attribute is more accessible, unless the element whose text is indented is an header element (H1, H2, etc...) with a logo as its background.
In this case, I think that document structure is paramount, and it's important to use proper header text. This way, document structure is kept even when viewing the page with mosaic 1.0 :-)
I was thinking to replace user text like :), :P in comments with smilies (emoticons). Using regex. Do you think it's a good idea for the replacement to be a span element with a class? Then I apply the smiley image to that class?
Or should I just replace that text with <img> tags?
CSS is usually seen as not part of the content, but these image smileys are...
(if you disable the css, the text could change its meaning because emoticons are missing)
An emoticon is visual information presented using characters, so if you replace, say, “:-)” by something, the natural candidates are special characters such as “☺” (U+263A WHITE SMILING FACE) and an img tag like <img alt=":-)" src="smiley.png">.
Using an element with a background image has several drawbacks, including lack of any counterpart to the alt attribute and the common browser behavior of suppressing background images on printing.
It is somewhat risky to programmatically change anything emoticon-looking to e.g. an image. You cannot be sure that every “:-)” is an emoticon. All kinds of odd character combinations may arise in special fields. Besides, if the user was writing e.g. about emoticons, part of the content might get lost or distorted in the replacement.
if you have a lot of smileys you are better of using the css sprite trick because it means the browser only has to download one image file instead of downloading a dozen smaller ones
this will result in less overhead and better caching
Use CSS to display the pictures. The best practice is to strip unwanted characters, invisible characters and HTML tags from user input, to avoid HTML code injection and cross-site scripting.
Have the smileys in plain-text, and display a picture instead with CSS.
You can achieve that by using a <span> or another element.
For instance, :) should be <span class="normalsmiley">:)</span> in the code.
Then the text will make sense for people not seeing images or with CSS disabled (they will see a text smiley).
For a WCAG 2.0 compliant website need to have alt tags for the images.
When it comes to something like a company logo. Should the alt tag just be the name of the company, or the name of the company followed by "Logo" I think the former makes more sense but if there is a definitive best practice I would like to know!
Exciting question eh?
The best guideline is, if the image wasn't available - what would you want to see instead?
The alt text shouldn't be a description of the image, it's a textual alternative to the image.
Is the logo of value to users of screen-readers? If not--then consider displaying the image via CSS rather than an <img> tag--CSS (presentational) images do not need to have alt tags (they actually can't have them), they are understood to be a visual-portion of the page rather than the actual content of the page.
implies that the image is valuable content related to the page--so if the logo is essentially eye-candy, of presentational value only, then it may not belong in HTML at all.
Just remember: screen-readers allow users to access the content. HTML is for content, CSS for presentation--if your HTML is muddied with non-content then providing a good, accessible, experience becomes much more difficult.
I think it's up to your personal preference. You want to convey the meaning of the image, not exactly what it is. for example, i would use alt text like 'next page' instead of 'right arrow'. So I would go with the company title, as that's the point of the logo.
I would go for "Logo of (Companyname)" because the ALT text serves as a description of the image that gets served if the user can't see it (e.g. for screen readers).
I think the WCAG 2.0 guidelines are supporting this:
When an image contains words that are important to understanding the content, the alt text should include those words. This will allow the alt text to play the same function on the page as the image. Note that it does not necessarily describe the visual characteristics of the image itself but must convey the same meaning as the image.
Well, whatever makes the flow of the text of the page most understandably. IF the logo is right next to the company name as text, then neither "Big Company Big Company" nor "Big Company Logo Big Company" is really best when spoken by a screen reader.
The requirement for alt tags is mostly for images as buttons:
<img src="next.png" alt="next page" />
or other places where the image conveys real information, like graphs and charts.
Places where the image is merely decorative, a blank alt tag might be best.
Imaging an "About the company" web page, with all images with alt tags, being read aloud by a screen read. (Actaul text from exxonmobil.com: "About us- two workers on the Kizomba platform in Angola - We are the world's largest publicly traded international oil and gas company") Dragging the irrelevant detail from the image here lowers readability instead of raising it.
I wish I could point to an authoritative source, but having dealt with accessibility in a former life, I believe "logo" is preferred as it more accurately denotes the entity. For example alt="Photograph of Mount Hood" is quite different than alt="Mount Hood" and the former is much preferred.
While I do very much like #Gareth's answer, there is another thing to consider:
What is the parent element of the logo? If it is marked up like so: <img src="/company-logo.png" alt="" />, then the best alt would actually be along the lines of "[Company] Home Page" or "Go to [Company] home page". A disabled user with a screenreader would then hear "[Company] Home Page, link", or possibly, "[Company] Home Page, visited link".
Any time you are using an image as the link content, then the alt should tell the user where they go when that link is clicked. Same with buttons. If you use an image as button content, then the alt should tell the user what happens when the button is clicked.
Just as an aside: if clicking takes the user to another page or another part of the page, but requires no further interaction, the clicked element is almost always semantically a link. If clicking performs an action apart from navigation, shows additional options or content, or requires further interaction from the user after clicking (opens a dialog that must then be closed), then the clicked element is almost always semantically a button. Whenever possible, use the proper semantic element and style it with CSS. This will make your content accessible to the broadest range of assistive technologies.
I've been learning (X)HTML & CSS recently, and one of the main principles is that HTML is for structure and CSS for presentation.
With that in mind, it seems to me that a fair number of images on most sites are just for presentation and as such should be in the CSS (with a div or span to hold them in the HTML) - for example logos, header images, backgrounds.
However, while the examples in my book put some images in CSS, they are still often in the HTML. (I'm just talking about 'presentational' images, not 'structural' ones which are a key part of the content, for example photos in a photo site).
Should all such images be in CSS? Or are there technical or logical reasons to keep them in the HTML?
Thanks,
Grant
If an image is "content" say in a newspaper article, the editorial image, then use img tag. If it is part of your UI, theme or skin or whatever the name is, then yes put it CSS.
Suggested readings
Designing with Web Standards (Zeldman)
Bullet Proof Web Design (Dan Cederholm)
CSS Mastery (Andy Clark, Andy Budd, Cameron Moll)
One reason to put those images in CSS might be to serve different browsers from the same web site, just by changing the CSS: for example, if you detect a mobile/embedded/pocket browser you could give them the same HTML but with a CSS that doesn't include images.
I put them to CSS if possible. One reason is that I think they belong there like you mentioned and the other one is the possibility to use sprites. This can reduce the loading time of your page significantly.
The src property of an img tag is required according to HTML 4.01/XHTML 1.0 DTD. That is why it should always be included in the HTML.
You can specify it in the CSS for skining purposes, but most images in most cases are static and non changing so putting it in CSS is an unecessary step.
Well, it depends. For example, if you want to do some effects when the mouse is over an image, it must be in the HTML. When you put the image in the HTML you can positionate it more freely than in CSS. Also, as far as I know, CSS included images are not crawled (You can have interest in have your company's logo crawled by searchers).
If you think about accesibility, the HTML embedded images can have an alt and title information. So, for example, when you put the mouse over the logo of your company, the browser could show the motto of your company if you embed it with title="motto" attribute in the img tag. You can't do that with CSS.
Also people are used to put images in the HTML not the CSS and behaviours are a hard thing to change.
In conclussion, depending of your needs, CSS isn't flexible enough to fit your needs and you should put the images in the HTML. But if CSS fits your needs for UI images, then CSS is better idea.
Sometimes, loading UI images using CSS, also prevents the users from downloading your UI images to their drives, while saving a page.
But of course there are other ways to save them, but just a point to add.
And browsers tend to prioritize CSS more than HTML, so loading images through CSS might be a little faster compared to HTML.