Semantic markup often holds more value than meets the eye. When practicing semantics with your markup, a byproduct is increased accessibility, decent base search engine optimization, and a boost to usability. The use of images in development is sometimes a gray area for new developers. The beauty of CSS is the ability to separate content from design. This idea should be retained in the back of your mind as a developer at all times.
Overview
When it comes to images, the img tag should only be used when the associated image is contextual in nature. If the purpose of the image is to be an element of design, it should not be included as a part of the content using img. Instead, images with a design-oriented purpose should be included as a background-image.
The reasoning behind this is quite straightforward. Should a user be using a screen reader or text based browser such as Lynx, you do not want to bombard them with dozens of bloated content consisting of irrelevant image descriptions or other bloated data.
The alt Attribute
As we know, the alt attribute is for the img element. The purpose of the alt attribute is as follows:
“The alt attribute is defined in a set of tags (namely, img, area and optionally for input and applet) to allow you to provide a text equivalent for the object.” … “The generic rule for the content of the alt attribute is: use text that fulfills the same function as the image.”
From time to time, I have come across many sites using the alt attribute simply to enable the validation of their markup. This results in misuse of alt and in essence, defeats its purpose. Just remember: the alt attribute is meant to allow for a text equivalent for the object it is associated with. When a user is browsing with a text based browser or screen reader, the alt text is what is conveyed to them, so it should be as useful as possible. It should not redundantly state that the object is an image.
Images for Design
More often than not, an image you are including is intended to be a part of your design. These images should be included as a background image of the particular element you are designing. This usually comes off as self explanatory due to the fact that you are very limited as to controlling the behavior of an image using img. Using the background-image property in a stylesheet gives you much more flexibility such as positioning and repeating, which is often a desired effect when developing.
Specific Circumstances
From time to time during development I have observed a situation which takes some thought as to whether or not the image in question is part of the content or part of the design. For instance, I was speaking with a colleague the other day about whether or not an img should be used when representing a check mark in a table comparing features of a certain product. We sat back and thought about it and determined that if the image is representing a piece of tabular data, it should be considered contextual and therefore included as an img as opposed to a background-image. If an effective alt attribute is defined for this image, such as “Yes”, a user viewing the site using a screen reader or text-based browser would view a table comparing products and easily be able to determine which features were available on which product.
What do You Think?
Were we correct in determining the method in which to include the images in the previously mentioned example? Have you ever had a situation in which you really had to sit back and think about whether or not an image is contextual? It may not be a very common occurrence, but it is always important to keep in mind the correct use of img, alt, and background-image
Comments
On one of our websites, we have a table with checkmark images laid out in the exact same way. Our alt text on those images is indeed “yes.” Although I had never put much thought into it. It seemed like the most natural thing for me. Being that before we had checkmarks on that site, it was a text string of “yes.”
Thank you for spending the time and effort to write another wonderful article.
Pretty good reference for beginners in design. I guess you can’t teach the old dogs new tricks every week 😉
A solution to the checkmark could have the text ‘yes’ as astridas noted, and then use image-replacement to apply the image. My arguement about this is; the checkmark might be styled to fit in with your buttons, so therefore is style itself.
There is a lot of debate whether the logo/heading of your website should be an img or background-image. Personally I use background-image, as it prefer the text neatness when stylesheets are removed. Then again, the logo of a website is pretty important – important enough to be displayed when CSS is turned off… and how often, really, do you change your company logo/branding… I doubt it’s that often.
@astridas: Glad to see that others thought the same way we did when faced with this issue.
@Michael: Haha yeah, I’m going to try and cover all the bases with articles. Thanks for taking some time to read the article.
@trovster: You’ve brought up a very interesting point that was overlooked in the article. Even personally I find myself either including a company logo using an img tag, or styling it into the print stylesheet for the site. Although the logo facilitates the design I would also have to say that it also has contextual worth. Also, thanks for bringing up image-replacement, yet another way to work out this issue.
Thanks for taking the time to post, guys. As usual covering some things that had slipped my mind when writing. Hope to hear back from you.
Very good article. Accessibility, while being the primary reason for correct semantics, is only one of the reasons for following this methodology. A site that uses text correctly will have a significantly higher degree of SEO. In addition, a site crafted in this manner will be much more flexible for visual alterations.
@P.J.: Glad to see you’ve found your way back! Thanks for taking the time to comment again. And you’re right — using semantic markup will definately help with our SEO and flexibility.
I have recently started creating websites using HTML and I am going through a lot of text books for my classes. Something that you are wonderful with is covering that is not told in the text books. You give a wonderful real world insite and I want to thank you for it. The things you talk about help put me ahead of my peers. Thanks for your time and effort!
@Paul: It’s great to hear comments like that. I’m glad the articles are helping you out. I hope that future articles are just as helpful.
I’ve read this article and altough I agree that the correct way of using the images is how you mention it I disagree that this is an important issue. You are right, it does help text browsing a lot but websites are mostly created for the specific needs of clients and those needs don’t usually inmply having their website optimised for such browsing methods. From my point of view a web developer can pull any trick possible to get to the desired result, even if that doesn’t comply to some of the standards.
I guess the point I’m trying to make here is that if you are designing a website, first, you must make sure that the final product is what the client wants, then you must make sure your site can provide that result in the correct, functinal form to as many users from the target pool as possible but without overdoing it.
On top of this, there is no actual point in complying with all the standards if your website doesn’t work on all possible browsers. If you don’t take the time to make your website work in a browser that has a 5% market share then what point is there in having the site browsable in text mode… not much. And related to SEO, img alt is a good option if the images on your website have any relevance to the content of the website, but again, as with the majority of the websites most images are just design elements which will not actually help users get easyer acces to your websites, yes it may help them obtain the picture that they are looking for easier but it will not help your website in any way.
@Criss: I do think that it is an important issue because it continues the thought process of keeping content separate from presentation. This thinking can be carried over into the handling of images and I think it should be. If an image is a design element it should be contained as such in a stylesheet. However if an image is part of the content of the document, it should be included in that manner.
I don’t disagree in your statement regarding a developer having to meet the desires of the client, they are the ones signing the checks, afterall. However, I feel that it is a separate issue. What a client wants shouldn’t have much to do with how you include an image in your design.
I’m finding it difficult to follow what you’re saying in your last remarks. There is always a point to compliance with standards and it is the fault of the browser manufacturer to support them. Yes, as the developer it is your job to ensure the pleasurable viewing experience on all platforms because it is not the users fault for using an inferior product. There is always a point to having your site usable in a text based browser, and there always will be as long as people are using that method of browsing the Internet. ALT attributes should *always* be used with images not only for SEO purposes, but for accessibility — their primary purpose. They are to be used to provide alternate content for the image for those cases in which the user can not view the image as you intended.
With regards to replacement images for headings using css (and presumably text-indent -999 em or similar), there is a situation where the user may have images disabled, therefore leaving nothing on screen to be displayed. At least if the image is contextual the alt text should be visible if images are disabled.
That’s a really interesting point, Darren. What would you use as a solution for that problem?
[…] creating a theming structure, it’s important to keep in mind semantic image use. While images directly related to the site design should be included with the template, images that […]
[…] encounter. How should these images be included? In my opinion, this is one of the times where semantic image use should be looked into. Taking a step back and thinking about it, these images are unique in that […]
[…] Semantic Image Use When it comes to images, the img tag should only be used when the associated image is contextual in nature. Images with a design-oriented purpose should be included as a background-image. (tags: Images) […]
[…] they be represented in the markup as an inline image. When images are included in the markup, they should have informational value. Images with the sole purpose of adding to the design can be better included via your style sheet […]
[…] discussion amongst many people in both Web design and development. A good way to check up on the way you’re using images is to see what a design looks like without images. From time to time, viewing your markup and style […]