Anyone who is aware anything about web accessibility sees that images will need alternative, or ALT, text assigned to them. This is because screen readers can’t figure out images, but instead read out loud the alternative textual content assigned to them. In Internet Explorer we can see this ALT text, simply by mousing in the image and looking at the yellow tooltip that appears. Various other browsers (correctly) don’t accomplish this. The HTML CODE for inserting ALT text message is:

But surely there cannot be a skill to writing ALT text meant for images? You only pop a description in there and you’re good to go, right? Very well, kind of. Sure, it’s certainly not rocket scientific research, but there are many guidelines you have to follow…

Spacer images and absent ALT text message

Spacer images should be assigned null ALT text, or alt=””. This way many screen readers will totally ignore the impression and will not even declare its existence. Spacer pictures are unseen images that pretty many websites use. The purpose of all of them is, when the name suggests, to produce space on the page. At times it’s not possible to create the visual screen you need, to help you stick an image in (specifying its level and width) and voli’, you have the excess space you will need.

Certainly not everyone uses this null ALT textual content for spacer images. Some websites attach alt=”spacer image”. Imagine just how annoying this is often for a display reader user, especially when you may have ten of these in a line. A screen reader would definitely say, “Image, spacer image” ten days in a row (screen viewers usually the word, “Image”, before browsing out the ALT text) – now that isn’t helpful!

Different web developers simply leave out the ALT function for spacer images (and perhaps additional images). In this case, most screen readers is going to read your filename, that could be ‘newsite/images/’. A display screen reader would announce this kind of image when “Image, information site slash images cut one question spacer dot gif”. Visualize what this could sound like in the event that there were eight of these within a row!

Bullets and icons

Bullets and icons should be treated in much the same approach as spacer images, hence should be given null alternative text, or perhaps alt=””. Look at a list of things with a highly skilled bullet going forward each item. If ALT text, ‘Bullet’ is designated to each impression then, “Image, bullet” will probably be read out loud by screen readers ahead of each list item, turning it into take that bit longer to work through checklist.

Device, usually accustomed to complement links, should also be assigned alt=””. Many websites, which place the icon next to the link textual content, use the link text mainly because the ALT text of your icon. Screen readers might first announce this ALT text, and after that the link text message, so might then the link two times, which certainly isn’t important.

(Ideally, bullets and icons ought to be called as background images through the CSS document — this would take them off from the HTML document completely and therefore eliminate the need for virtually any ALT description. )

Decorative photos

Decorative images too should be given null different text, or alt=””. If an image can be pure eyesight candy, afterward there’s no dependence on a screen reader end user to possibly know it can there and being knowledgeable of the presence basically adds to the environmental noise.

However, you could believe the images with your site build a brand information and by concealing them from screen reader users you’re here denying this group of users the same knowledge. Accessibility gurus tend to favor the former controversy, but there certainly is actually a valid case for the latter too.

Map-reading & text message embedded within images

Navigation food selection that require highly skilled text be forced to embed the written text within an photo. In this condition, the ALT text shouldn’t be used to develop on the picture. Under no circumstances if the ALT text say, ‘Read all about the fantastic companies, designed to help you in everything you do’. If the menu item says, ‘Services’ then the ALT text message should also say ‘Services ALT text should always describe this of the photo and should do it again the text word-for-word. If you want to expand over the navigation, including in this case in point, you can use the title attribute.

The same applies for any other text embedded inside an image. The ALT textual content should easily repeat, word-for-word, the text included within that image.

(Unless the font getting used is especially different it’s often needless to embed text within just images — advanced routing and background effects quickly achieved with CSS. )


Websites tend to range in how they apply ALT text to logos. Some say, Company name, others Company name logo, and other describe the function of this image (usually a link back in the homepage),? Back to home’. Remember, ALT text should describe the information of the photograph so the primary example, alt=”Company name”, has become the best. In case the logo is mostly a link back for the homepage, consequently this can be efficiently communicated through the title label.


Authoring effective ALT text actually too tough. If it’s an attractive image in that case null choice text, or perhaps alt=”” will need to usually be used – never, ever leave out the ALT attribute. If the image contains text then the ALT text message should merely repeat this text, word-for-word. Bear in mind, ALT textual content should express the content for the image and nothing more.

Do become sure also to keep ALT text while short and succinct as is feasible. Listening to an online page using a screen visitor takes a lot longer than traditional strategies, so avoid make the searching experience irritating to screen visitor users with bloated and unnecessary ALT text. Click here for more: