Anyone who is aware of anything about net accessibility knows that images need alternative, or ALT, textual content assigned to them. This is due to screen viewers can’t understand images, but rather read aloud the alternative text assigned to them. In Internet Explorer we can see this ALT text, by just mousing above the image and looking at the red tooltip that appears. Various other browsers (correctly) don’t accomplish this. The HTML for entering ALT text is:

But certainly there can’t be a skill to writing ALT text just for images? You only 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 must follow…

Spacer pictures and missing ALT text

Spacer images should always be assigned null ALT text, or alt=””. This way most screen readers will totally ignore the photo and will not likely even mention its occurrence. Spacer pictures are unseen images that pretty most websites use. The purpose of them is, seeing that the brand suggests, to produce space relating to the page. Sometimes it’s impossible to create the visual display you need, so that you can stick a picture in (specifying its height and width) and voli’, you have the excess space you require.

Not everyone uses this null ALT textual content for spacer images. Some websites attach alt=”spacer image”. Imagine just how annoying this is certainly for a display screen reader end user, especially when you may have ten of those in a line. A display screen reader would say, “Image, spacer image” ten moments in a line (screen viewers usually say the word, “Image”, before reading out it is ALT text) – now that isn’t useful!

Additional web developers just leave out the ALT aspect for spacer images (and perhaps different images). In this instance, most display screen readers might read out the filename, which could be ‘newsite/images/’. A display reader might announce this image simply because “Image, information site reduce images slash one point spacer us dot gif”. Consider what this can sound like if perhaps there were twelve of these within a row!

Bullets and icons

Bullets and icons must be treated in much the same way as spacer images, so should be given null alternate text, or perhaps alt=””. Look at a list of items with a complicated bullet going forward each item. If ALT text, ‘Bullet’ is assigned to each photo then, “Image, bullet” will be read aloud by display screen readers ahead of each list item, making it take that bit for a longer time to work through the list.

Icons, usually used to complement links, should also be assigned alt=””. Many websites, which will place the icon next to the link text message, use the link text because the ALT text of your icon. Display readers would definitely first publicize this ALT text, after which the link textual content, so may then say the link two times, which naturally isn’t necessary.

(Ideally, bullets and icons needs to be called up as background pictures through the CSS document — this would remove them from the CODE document completely and therefore eliminate the need for any kind of ALT explanation. )

Decorative photos

Attractive images too should be given null substitute text, or perhaps alt=””. In the event that an image is normally pure eyesight candy, afterward there’s no desire for a display screen reader individual to actually know they have there and being up to date of their presence basically adds to the environmental noise.

However, you could argue that the images on your site produce a brand id and by hiding them from screen visitor users if you’re denying this group of users the same encounter. Accessibility pros tend to favour the former argument, but presently there certainly is actually a valid advantages of the latter too.

Selection & text embedded within just images

Navigation food selection that require expensive text be forced to embed the written text within an graphic. In this situation, the ALT text really should not be used to improve on the image. Under no circumstances should the ALT textual content say, ‘Read all about each of our fantastic expertise, designed to help you in everything you do’. If the menu item says, ‘Services’ then ALT textual content should also say ‘Services ALT text should describe this content of the image and should do it again the text word-for-word. If you want to expand for the navigation, such as in this model, you can use it attribute.

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

(Unless the font getting used is especially exclusive it’s often unnecessary to embed text within just images — advanced map-reading and track record effects quickly achieved with CSS. )


Websites tend to vary in how they apply ALT text to logos. A few say, Business name, others Business name logo, and also other describe the function belonging to the image (usually a link returning to the homepage),? Back to home’. Remember, ALT text must always describe this content of the picture so the 1st example, alt=”Company name”, is just about the best. In the event the logo is a link back towards the homepage, therefore this can be properly communicated throughout the title draw.


Authoring effective ALT text actually too challenging. If it’s a decorative image then simply null substitute text, or alt=”” ought to usually use – do not, ever omit the ALT attribute. If the image contains text the ALT text message should easily repeat this textual content, word-for-word. Bear in mind, ALT text should illustrate the content of your image certainly nothing more.

Do also be sure as well to keep ALT text mainly because short and succinct as is feasible. Listening to an internet page with a screen target audience takes a whole lot longer than traditional methods, so don’t make the surfing experience painful for screen reader users with bloated and unnecessary ALT text. Click here for more: