Writing Effective Alt Text For Images
|
|
Anyone who knows anything about web accessibility knows that images need alternative, or ALT, text assigned to them. This is because screen readers can't understand images, but rather read aloud the alternative text assigned to them. In Internet Explorer we can see this ALT text, simply by mousing over the image and looking at the yellow tooltip that appears. Other browsers (correctly) don't do this. The HTML for inserting ALT text is:
img src="filename.gif" alt="Alternative description goes here"
But surely there can't be a skill to writing ALT text for images? You just pop a description in there and you're good to go, right? Well, kind of. Sure, it's not rocket science, but there are a few guidelines you need to follow...
Spacer images and missing ALT text
Spacer images should always be assigned null ALT text, or alt="" . This way most screen readers will completely ignore the image and won't even announce its presence. Spacer images are invisible images that pretty most websites use. The purpose of them is, as the name suggests, to create space on the page. Sometimes it's not possible to create the visual display you need, so you can stick an image in (specifying its height and width) and volià, you have the extra space you need.
Not everyone uses this null ALT text for spacer images. Some websites stick in alt="spacer image". Imagine how annoying this can be for a screen reader user, especially when you have ten of them in a row. A screen reader would say, "Image, spacer image" ten times in a row (screen readers usually say the word, "Image", before reading out its ALT text) - now that isn't helpful!
Other web developers simply leave out the ALT attribute for spacer images (and perhaps other images). In this case, most screen readers will read out the filename, which could be 'newsite/images/onepixelspacer.gif'. A screen reader would announce this image as "Image, newsite slash images slash one pixel spacer dot gif". Imagine what this would sound like if there were ten of these in a row!
Bullets and icons
Bullets and icons should be treated in much the same way as spacer images, so should be assigned null alternative text, or alt="". Think about a list of items with a fancy bullet proceeding each item. If the ALT text, 'Bullet' is assigned to each image then, "Image, bullet" will be read aloud by screen readers before each list item, making it take that bit longer to work through the list.
Icons, usually used to complement links, should also be assigned alt="". Many websites, which place the icon next to the link text, use the link text as the ALT text of the icon. Screen readers would first announce this ALT text, and then the link text, so would then say the link twice, which obviously isn't necessary.
(Ideally, bullets and icons should be called up as background images through the CSS document - this would remove them from the HTML document completely and therefore remove the need for any ALT description.)
Decorative images
Decorative images too should be assigned null alternative text, or alt="". If an image is pure eye candy then there's no need for a screen reader user to even know it's there and being informed of its presence simply adds to the noise pollution.
Conversely, you could argue that the images on your site create a brand identity and by hiding them from screen reader users you're denying this group of users the same experience. Accessibility experts tend to favour the former argument, but there certainly is a valid case for the latter too.
Navigation & text embedded within images
Navigation menus that require fancy text have no choice but to embed the text within an image. In this situation, the ALT text shouldn't be used to expand on the image. Under no circumstances should the ALT text say, 'Read all about our fantastic services, designed to help you in everything you do'. If the menu item says, 'Services' then the ALT text should also say 'Services'. ALT text should always describe the content of the image and should repeat the text word-for-word. If you want to expand on the navigation, such as in this example, you can use the title attribute.
The same applies for any other text embedded within an image. The ALT text should simply repeat, word-for-word, the text contained within that image.
(Unless the font being used is especially unique it's often unnecessary to embed text within images - advanced navigation and background effects can now be achieved with CSS.)
Company logo
Websites tend to vary in how they apply ALT text to logos. Some say, 'Company name', others 'Company name logo', and other describe the function of the image (usually a link back to the homepage), 'Back to home'. Remember, ALT text should always describe the content of the image so the first example, alt="Company name", is probably the best. If the logo is a link back to the homepage then this can be effectively communicated through the title tag.
Conclusion
Writing effective ALT text isn't too difficult. If it's a decorative image then null alternative text, or alt="" should usually be used - never, ever omit the ALT attribute. If the image contains text then the ALT text should simply repeat this text, word-for-word. Remember, ALT text should describe the content of the image and nothing more.
Do also be sure also to keep ALT text as short and succinct as possible. Listening to a web page with a screen reader takes a lot longer than traditional methods, so don't make the surfing experience painful for screen reader users with bloated and unnecessary ALT text.
This article was written by Trenton Moss. He's crazy about web usability and accessibility - so crazy that he went and started his own web usability and accessibility consultancy ( Webcredible - http://www.webcredible.co.uk ) to help make the Internet a better place for everyone.
|
|
|
Created & Maintained by Empower! CMS Web Sites
Host2Sell Web Hosting | Emarketing Workshops | Site SEO Review | FREE NewsletterThree Things Every Website Should Do
When I started my company in 2002, I knew I needed to have a website. Why? To provide credibility! How can a company be "real" in this day and age if it doesn't have a website? So, like many companies, I published an informational website that explained "here's who we are, and here's what we do".I didn't spend a lot of time worrying about my website. I certainly didn't think of it as a strategic weapon in my company's marketing arsenal. That started to change in the spring of 2004 when a newsletter was forwarded to me by a ...(related: Web Development)
Why A Css Website Layout Will Make You Money
Although CSS layouts have been around for years, they haven't become so commonplace until recently. This was basically due to limited browser support (especially from Netscape 4) - nowadays though, CSS 2.0 (which introduced positioning) is compatible with over 99% of browsers out there (check out the browser stats over at http://www.thecounter.com/stat...(related: Web Development)
Web Sites ? Should I Learn Or Not?
A common dilemma most small and medium businesses face when coming to their web site is if they should take the time to learn how to build a web site or not? Here's my honest thoughts on this topic.If you read my previous article you would know that a web page is fundamentally written in HTML (let's leave the dynamic stuff out for now). So, if you've got to create a web page you need to learn at the very least, HTML.Is HTML difficult? Not really. But ask yourself:What do I need my web site for?What do I expect to do with my web site?How much time do...(related: Web Development)
Why To Have A Website For Your Company
After having decided to start a business, the next thing that arrives in your mind is How to market the Product/Service? How to create a brand? How to recruit people? How & where to advertise? etc? Nex...(related: Web Development)
Improve Web Sales Figures Forever And Ever Amen!
"How do I improve web site sales figures?" The CEO roared at the web developer. The web developer looked at his boss a little confused and mumbled something about it not being his core competence with him being a programmer and all. So next the CEO went to his marketing department and bellowed "How do I improve our web site sales conversion rates?" A few mouths opened as if to speak but nothing came out until finally exasperated the CEO tearing at his hair i...(related: Web Development)
7 Killer Ways To Increase Your Online Sales
Every online entrepreneur I talk to is asking the same question, "How do I increase my online sales, NOW?"Online selling is essentially a numbers game. The more visitors to a site, the more sales that site will make. The number of sales ...(related: Web Development)
Tell Me What Your Website Does!
You know exactly what your organisation does and what your website offers its users. This information has probably become second nature to you, but first-time visitors to your site won't know this. As such, make sure you don't forget to tell them what you do.As soon as new site visitors arrive at y...(related: Web Development)
Why Your Business Needs A Website
Even with the steady growth of the World Wide Web, many businesses do not have an online presence and some think that they do not need to have a presence at all."My business is doing fine as it is." That's great! But, it's almost impossible to answer 'no' to the question, "Can my business be doing even better?" One of the easiest ways to help your business gain more exposure and potential customers is to have a profess...(related: Web Development)
Creating Websites That Cater To Exam Preparations
One of the things that Internet excels is disseminating information and knowledge across many brains and continents. In this global economy the aspirations of the younger generation is not bounded by countries or continents. They aspire to join the best universities or train to be part of great glob...(related: Web Development)
Frequent Business Question: How Do You Start A Web Business?
Today it seems everyone is jumping on the entrepreneurbandwagon, and who could blame them? Setting your ownschedule, working from the comfort of your own home, andnever having to deal with a horrible commute or officepolitics again, this option is quite popular among all ages.With the advent of the technology age, it seems moreindividuals are looking to the internet to...(related: Web Development)
Building A Great Intranet Taxonomy
While it may seem like a "quick and easy" task, defining the navigation structure and organization of your intranet site will be one of the most challenging tasks you will face in the course of your project. It is also one of the most critical success factors. The site structure, also referred to as the information architecture or taxonomy, is the foundation of your intranet. Creating an effective taxonomy is as much an art as it is a science. Use the wrong terms and your users won't be able ...(related: Web Development)
Do You Really Need A Website To Succeed
Rosalind wants to share her inspirational poetry with a wider community. Alas, poor Rosalind lives in a remote town.Jonathan is a graphics artist who settled in a mountain resort community after he left college. He would like to start a graphics...(related: Web Development)
site-map - Copyright © 2006 Empower! Web Design | All Rights Reserved. | Web Development