Anyone who is familiar with anything about web accessibility sees that images need alternative, or perhaps ALT, text assigned to them. The reason is , screen readers can’t understand images, but instead read aloud the alternative text message assigned to them. In Internet Explorer we can see this ALT text, by just mousing in the image and looking at the yellow hue tooltip that appears. Different browsers (correctly) don’t do that. The HTML for putting ALT text message is:

But surely there can not be a skill to writing ALT text just for images? You simply pop some in there and you’re all set, right? Well, kind of. Sure, it’s not really rocket research, but there are many guidelines you have to follow…

Spacer pictures and lacking ALT text message

Spacer images should always be assigned null ALT textual content, or alt=””. This way many screen visitors will entirely ignore the impression and will likely not even announce its occurrence. Spacer pictures are cannot be seen images that pretty most websites use. The purpose of all of them is, mainly because the name suggests, to develop space to the page. Sometimes it’s impossible to create the visual display you need, to help you stick an image in (specifying its elevation 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 stick in alt=”spacer image”. Imagine how annoying this can be for a display reader customer, especially when you may have ten of them in a row. A screen reader could say, “Image, spacer image” ten conditions in a row (screen visitors usually the word, “Image”, before reading out the ALT text) – given that isn’t beneficial!

Different web developers just leave out the ALT feature for spacer images (and perhaps various other images). In this case, most screen readers will read the actual filename, that could be ‘newsite/images/’. A display reader would definitely announce this image since “Image, media site slash images cut one -pixel spacer dot gif”. Consider what this might sound like if there were 15 of these within a row!

Bullets and icons

Bullets and icons must be treated in much the same way as spacer images, and so should be assigned null option text, or alt=””. Look at a list of items with a extravagant bullet going forward each item. If ALT text, ‘Bullet’ is designated to each image then, “Image, bullet” will probably be read out loud by display screen readers before each list item, making it take that bit longer to work through the list.

Symbols, usually used to complement links, should also be assigned alt=””. Many websites, which will place the icon next to the link text, use the website link text when the ALT text with the icon. Screen readers could first announce this ALT text, and then the link text, so will then say the link two times, which naturally isn’t required.

(Ideally, bullets and icons needs to be called as background images through the CSS document — this would remove them from the HTML document totally and therefore eliminate the need for any ALT explanation. )

Decorative pictures

Ornamental images too should be designated null different text, or perhaps alt=””. In the event that an image can be pure observation candy, therefore there’s no need for a display reader consumer to even know it could there and being up to date of their presence basically adds to the environmental noise.

On the other hand, you could believe the images on your site create a brand info and by covering them via screen visitor users you’re denying this group of users the same knowledge. Accessibility experts tend to favour the former controversy, but at this time there certainly is actually a valid case for the latter too.

Nav & textual content embedded inside images

Navigation possibilities that require elegant text have no choice but to embed the written text within an photograph. In this circumstance, the ALT text really should not be used to enlarge on the picture. Under no circumstances should the ALT textual content say, ‘Read all about the fantastic products, designed to assist you in everything you do’. If the menu item says, ‘Services’ then the ALT text should also declare ‘Services ALT text should always describe this content of the graphic and should repeat the text word-for-word. If you want to expand within the navigation, such as in this model, you can use it attribute.

The same applies for just about any other text message embedded within the image. The ALT text message should easily repeat, word-for-word, the text enclosed within that image.

(Unless the font getting used is especially different it’s often unnecessary to embed text inside images — advanced direction-finding and qualifications effects can be achieved with CSS. )


Websites tend to differ in the way they apply ALT text to logos. Several say, Company name, others Company name logo, and other describe the function of your image (usually a link back in the homepage),? Back to home’. Remember, ALT text must always describe this article of the image so the first example, alt=”Company name”, is just about the best. In case the logo is mostly a link back towards the homepage, afterward this can be effectively communicated through the title indicate.

Final result

Publishing effective ALT text actually too difficult. If it’s an enhancing image in that case null alternate text, or perhaps alt=”” will need to usually use – for no reason, ever omit the ALT attribute. In the event the image has text then your ALT textual content should merely repeat this textual content, word-for-word. Remember, ALT text should express the content from the image certainly nothing more.

Do end up being sure also to keep ALT text since short and succinct as it can be. Listening to an internet page with a screen target audience takes a lot longer than traditional methods, so tend make the surfing experience irritating to screen target audience users with bloated and unnecessary ALT text. Click here for more: