Writing effective ALT text for images

Writing effective ALT text for images Who knows something about the accessibility of the Web knows that images need alteative, or ALT, text assigned to them. This is because screen readers can not understand images, but according to the alteative text assigned to them. In Inteet Explorer you can ALT text, simply mouse over the image and look at the yellow tooltip appears. Other browsers (correctly) do not. The HTML code for the ALT text is: But certainly can not be a possibility for writing ALT text for images? You just pop a description and you are good to go, right? Well, art is true, it is not rocket science, but there are some guidelines you should follow ... Spacer images and missing ALT text Spacer images should always be assigned null ALT text, or alt = "". This way most screen readers will ignore completely, and the picture is not yet aware of his presence. Spacer images are invisible images instead of using the most sites. The purpose of this is, as the name suggests, to make room on the page. Sometimes it is not possible, the visual presentation is needed, so you can stick an image (specifying its height and width) and volia, you have the space. Not everyone uses the ALT text for spacer images nothing. Some websites stick in alt = "spacer image". Imagine how annoying that can be used for a screen reader user, especially when 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 its ALT text) - now that does not help! Other web developers release the ALT attribute space for images (and perhaps other images). In this case, most screen readers to read the file that could be? News / images / onepixelspacer.gif ". A screen reader would announce this image as "image, images, news bar bar one pixel spacer dot gif". Imagine what it sounds like if ten of these in a row! Bullets and icons and symbols must be in the same way as spacer images, so should be no alteative text or alt = "". Think of a list of elements with a desire bullet procedures each position. If the ALT text? Bullet "for each image is then," Image Point 'is strong by screen readers before each list that takes more time to work through the list. Symbols, usually as a complement links, should also work with alt = "". Many sites, where the icon next to the link text, use the link text as the ALT text for the icon. Screen readers initially known this ALT text, and then the link text, so that then say the link twice, which obviously is not necessary. (Ideally, bullets and icons should be kept as background images through the CSS document - this would be the HTML document completely and therefore remove the need for any ALT description.) Pictures Donna Donna images too should be released, null alteative text or alt = "". If a purely Eye Candy and do not need a screen reader user to know that it is there and its presence simply adds to the noise. On the contrary, it could be argued that the images on your website and brand identity through the use of screen reader users you deny this group of users the same experience. Accessibility experts tend to the former argument, but it is certainly true of the second. Navigation and text embedded in images of the navigation menu, the desire to have no other choice but to embed the text within an image. In this situation, the alteative text should not be used to refer to the photo. In no case should the ALT text say? Lea more about our fantastic services to help in everything you do. "If the menu says? Services "and then the ALT text should also say? Services. ALT text should always describe the content of the image and repeat the text word by word. If you want to think about the navigation, as in this example, you can use the title attribute. The same goes for any other text embedded within an image. The ALT should simply repeat, word for word, the text in this picture. (Unless the font is used is unique, it is often necessary to insert the text into images - advanced navigation and background effects can be achieved with CSS.) Logos Websites are usually as text ALT logos. Some people say that? Company ", others? Company name logo ', and others describe the function of the image (usually a link to the page)? Back to Home. " Remember, ALT text should always describe the content of the images, so that the first example, alt = "Company", is probably the best. If the logo is a link to the page, this can be effectively covered by the title tag. Conclusion Writing effective ALT text is not too difficult. If it is a decorative image then null alteative text, or alt = "" should normally 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 be the content of the image and nothing more. Furthermore, to be sure ALT text short and concise as possible. Listening to a Web page with a screen reader takes a lot longer than the conventional methods, which is not the painful experience of navigation for users with screen reader bloated and unnecessary ALT text.