Anyone who has learned anything about internet accessibility knows that images need alternative, or ALT, text assigned to them. This is due to screen viewers can’t figure out images, but rather read out loud the alternative text assigned to them. In Internet Explorer we can see this ALT text, simply by mousing within the image and looking at the red tooltip that appears. Various other browsers (correctly) don’t do this. The HTML for inserting ALT text message is:

But certainly there can’t be a skill to writing ALT text intended for images? You merely pop a description in there and you’re good to go, right? Well, kind of. Sure, it’s not really rocket scientific disciplines, but there are several guidelines you need to follow…

Spacer pictures and lacking ALT text message

Spacer images should be assigned null ALT text, or alt=””. This way many screen readers will entirely ignore the image and would not even publicize its occurrence. Spacer pictures are hidden images that pretty most websites work with. The purpose of them is, mainly because the term suggests, to develop space within the page. Sometimes it’s not possible to create the visual display you need, so you can stick a picture in (specifying its height and width) and voli’, you have the extra space you require.

Not really everyone uses this null ALT textual content for spacer images. A lot of websites attach alt=”spacer image”. Imagine how annoying this is often for a display reader individual, especially when you have ten of these in a row. A screen reader might say, “Image, spacer image” ten days in a line (screen viewers usually the word, “Image”, before reading out the ALT text) – given that isn’t helpful!

Other web developers just leave out the ALT attribute for spacer images (and perhaps additional images). In cases like this, most display screen readers can read out your filename, which could be ‘newsite/images/’. A display reader may announce this image because “Image, information site slash images reduce one point spacer us dot gif”. Contemplate what this will sound like any time there were 15 of these in a row!

Bullets and icons

Bullets and icons needs to be treated in much the same way as spacer images, consequently should be given null choice text, or perhaps alt=””. Think about a list of things with a nice bullet proceeding each item. If ALT text, ‘Bullet’ is assigned to each graphic then, “Image, bullet” will be read aloud by screen readers before each list item, turning it into take that bit for a longer time to work through checklist.

Device, usually accustomed to complement links, should also end up being assigned alt=””. Many websites, which will place the icon next towards the link text message, use the hyperlink text while the ALT text of your icon. Display screen readers may first mention this ALT text, and next the link textual content, so may then say the link 2 times, which clearly isn’t necessary.

(Ideally, bullets and icons need to be called up as background images through the CSS document — this would take them off from the CODE document entirely and therefore remove the need for any ALT description. )

Decorative images

Ornamental images too should be designated null choice text, or alt=””. In the event that an image is pure eye ball candy, consequently there’s no need for a screen reader individual to possibly know they have there and being knowledgeable of the presence merely adds to the environmental noise.

More over, you could believe the images with your site produce a brand identification and by hiding them right from screen subscriber users you’re here denying this group of users the same knowledge. Accessibility industry experts tend to favor the former case, but now there certainly is a valid case for the latter as well.

Course-plotting & textual content embedded inside images

Navigation food selection that require complicated text be forced to embed the written text within an image. In this condition, the ALT text shouldn’t be used to expand on the impression. Under no circumstances if the ALT text say, ‘Read all about each of our fantastic expertise, designed to assist you in everything you do’. If the menu item says, ‘Services’ the ALT text message should also declare ‘Services ALT text should describe a few possibilities of the impression and should try the text word-for-word. If you want to expand over the navigation, such as in this case in point, you can use the title attribute.

The same applies for almost any other text embedded during an image. The ALT text should easily repeat, word-for-word, the text contained within that image.

(Unless the font being utilized is especially exclusive it’s often unnecessary to embed text within images — advanced course-plotting and qualifications effects can now be achieved with CSS. )


Websites tend to vary in the way they apply ALT text to logos. Some say, Business name, others Company name logo, and other describe the function of your image (usually a link returning to the homepage),? Back to home’. Remember, ALT text should describe the information of the image so the earliest example, alt=”Company name”, is just about the best. In case the logo is mostly a link back towards the homepage, in that case this can be effectively communicated throughout the title marking.

Bottom line

Composing effective ALT text merely too tricky. If it’s a decorative image then null alternate text, or perhaps alt=”” should certainly usually be taken – for no reason, ever omit the ALT attribute. In case the image has text then this ALT text should merely repeat this text message, word-for-word. Remember, ALT text should describe the content from the image certainly nothing more.

Do also be sure as well to keep ALT text simply because short and succinct as possible. Listening to an online page having a screen reader takes a whole lot longer than traditional methods, so may make the browsing experience irritating to screen reader users with bloated and unnecessary ALT text. Click here for more: