| |
| |
|
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:
Web-Development - Google News |
|
|
|
RELATED ARTICLES
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. Ten Ways NOT to Set Up a Website-based Service Business 1. As the first step, "Hire a web designer. How To Write More Powerful Online Text Although there are significant differences among the various types of online communication, there all have one critical thing in common - they're read off a screen. There are substantial benefits, too, in that while your message is on someone's screen usually it has their undivided attention. Setting Up Your First Website Q. Hey, Cathy: I'm just setting up a website. HTML Editors 101 - Smaller Is Better SiteSpinnerSiteSpinner is a user-friendly web site development tool that includes many advanced features such as drag-and-drop positioning, built in FTP to publish directly to your web site, an image editor and graphics creation all in one. With SiteSpinner, objects can be placed wherever you want them with your mouse. For Newer Sites, Web Marketing Depends On Titles & Links! We all start out the same. Some have budgets, some don't. Top 7 Reasons Why Your Business Needs a Website A website provides invaluable advantages for businesses who have one.7 reasons why your business needs a website are:1. Warning: The Truth About Having a Web Site! If you don't have a web site yet, are thinking of slapping one up or have one that simply isn't producing, this Warning is for you!All too often folks contact me about getting a Web Site when they really have not done their due diligence in determining even if their "idea" is one worth investing in. And although they hate spam and don't believe most of it, they do tend to fall into believing much of the fast, easy and cheap noise online in existence only to line the pockets of shysters and unscrupulous developers. High Quality Website at Low Cost Although designing a great web site is an important part of developing a successful online business, it is often becomes a problem for newcomers to the internet business.The vulgar problem is the lack of money. What Your Customers Say About YOUR Site! Part 1 The following is a list of patterns that many visitors follow, and you can use these suggestions to better your site.1. The Cost Of A Web Site Just starting out, you can start with a simple informational site, which is all most need initially, and build up to a fuller site (e-commerce and/or interactive) when you can afford it.Your goal should be to get an online presence. Linking Out is Good Many websites I come across don't have a single link to another website. Ask the webmaster why not, and the answer you get is simple enough: "If I link to other websites people might leave my site. 4 Marketing Tips for Resourceful Webmasters! The internet is a sea of knowledge. Getting your information to 'float' by the right audience can be like finding that one special grain of sand on the seashore. 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. Learn What 98% of Targeted Visitors Do On Your Website Getting a Targeted Visitor to a website is a waste of time and money if you've got no idea what 98% of them do when they get there.I'm assuming that if you have a website selling products that your conversion rate is at least 2%. Let Marketing Manage Your Website Content The definition of the phrase "Content Management" depends on what the organization may need or a vendor may offer. There is no general purpose or standard content management system that can satisfy today's diverse business needs across the board. Using Mini Websites - Powerful Way to Direct Marketing Mini Websites are the most powerful and cost effective solution to promote and market your brand. Normally people go for a large site which have 100's of pages of selling nos. Benefits Of An Accessible Website: Part 1 - Increase In Reach The DDA (Disability Discrimination Act) states that service providers must not discriminate against disabled people. A website is regarded as a service and therefore falls under this law, and as such must be made accessible to everyone. Earning From Your Website Before you start building your site, ask yourself "WHY?". Why did you decide to build your own web site. Why do I Need a Website? Cost Effective Advertising.Online selling.
|
| home | site map |
| © 2006 Webhosting-Service.com - All Rights reserved. - GetWeb Media Webdesign Muenchen |
