| |
| |
|
Web Development Information |
|
|
|
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.
MORE RESOURCES:
Google News |
|
|
|
RELATED ARTICLES
Let Your Customers Redesign Your Website! When you purchase a new item from a Yahoo! Store, you are asked if you'd like to provide feedback on the transaction. About two weeks after the initial purchase, an email from Yahoo! Stores shows up, asking you to provide feedback for the vendor. Are You Losing Sales Because of These 4 Simple Website Mistakes? Losing website sales and traffic is sometimes simply a case of web usablity - your website just isn't clear to your visitors. By fixing these simple mistakes, you'll easily increase your conversion rate and make more online sales. Making Your Website Shine! Attract and Keep Visitors at Your Site! When you consider the billions of individuals and companies on the net who are attempting to influence visitors with their wares, it is vitally important that your site offers something out of the ordinary. An important fact to remember is that what the site says is far more important than how it looks. You Dont Know Which One I still remember it very clear .. The Evolution Of Search There have been many significant changes to the face of search over the last several years with engines becoming more intelligent than ever before. Today's users expect mainly fast, easy, relevant and satisfactory search results. Tips for Building a Great Business Website A website is lifeline of internet home business. In order to succeed you must have a website that that meets the general criteria of accepted standards. Do You Need a Web Database? Does My Web Site Require A Web Database?If your web site require constant updates and feeding of information, a web database is the solution. In short, this applies to web sites that handle online products, news feed, members- based subscription and other functions as well. Websites: You Get What You Pay For! So you finally decided to invest in a web presence or upgrade your current site? There are many available choices in "web designers" to choose from. This decision is an important one! You may have a relative or friend of a friend who will do your web site at a very low cost from the comfort of their house. KISS Your Website! Many web developers today are starting to KISS their website, and it shows!No, I don't mean they get hot and heavy with the monitor, I mean they apply the basic values of Keep It Simple Stupd! (KISS)Many sites today are focusing on high end graphics, advanced java scripts, catchy logos, and other trivial factors. What they don't realize is that it's a win win game if you keep it simple. But My Business Doesnt Need A Website! Revenues are often lost because many business owners don't see the value in having a website. They claim their products can't be sold online and technology is overwhelming. Is Your Website Innovative? Increase Your Business Over Night! While studying online for IT investment opportunities, I found that one main factor was constant. All of the biggest money makers have eye-catching, simple, innovative, and the cleanest websites online!Having a corporate style website may greatly increase your business!Looking professional online is extremely important, especially if you want to attract big money to your door. For Newer Sites, Web Marketing Depends On Titles & Links! We all start out the same. Some have budgets, some don't. 4 Rock Solid Reasons For Building Your Own Website What is the point of having a website, you may ask, when the affiliate programme you have joined has provided you with your own web page to promote? This is a fair question. The answer has to be that with your own site - and of course your own domain name - you will have a lot more control over your business. 7 Ways to Gain a Professional Online Reputation A professional online reputation is essential to the flourishing of any business big or small. Many business owners spend countless hours on the core operations of their business forgetting the importance their website has. 50 Ways To Use Your Website A website is the most versatile and cost-effective marketing tool on the market. It is also an investment. Non-Profits: Successful Online Strategies More and more non-profit organizations are developing websites to help share information about their mission and programs. This involves strategic planning about the best way to present your image and message online. Instant Relevant Web Site Content - No Its Not a Bot In about the Time it takes to Watch a Reality TV Show (About 1 Hour) I added 10 Pages of Relevant Content to my Web Page without a Bot.Adding content to your Page Fast is Easy with the Use of Free Articles you Can Reprint. PIM Team Case Study: Creating Text Effects With PHP and GD See how you can create graphic effects on text with PHP and GD - drop shadows, arcs, fonts and colors.ProblemA-tec Signs and Sraphics Inc. How One Word Or Even One Letter Can Boost Conversion Rates By Over 400%! Recently I was reviewing the keyword specific conversion rate data of a consulting client of mine. I have been working with this client for a few months now, helping her improve the sales conversion rate of her website and we have had very good results, taking average conversion rates at her site from below 1% to just over 4. Five Reasons You Have to Stop Your Web Site That's right. Your method, behavior and strategy you are now using to manage your website may be justifiable reasons to stop it as soon as possible.
|
| home | site map |
| © 2006 |
