Anyone who is familiar with anything about internet accessibility knows that images require alternative, or ALT, text message assigned to them. The reason is screen viewers can’t understand images, but rather read aloud the alternative textual content assigned to them. In Internet Explorer we can see this ALT text, by just mousing above the image and looking at the orange tooltip that appears. Additional browsers (correctly) don’t do this. The HTML CODE for putting ALT text is:

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

Spacer photos and missing ALT text

Spacer images should be assigned null ALT textual content, or alt=””. This way the majority of screen viewers will completely ignore the graphic and do not ever even announce its existence. Spacer pictures are invisible images that pretty many websites work with. The purpose of these people is, mainly because the name suggests, to develop space to the page. At times it’s not possible to create the visual display you need, so that you can stick an image in (specifying its elevation and width) and voli’, you have the excess space you need.

Certainly not everyone uses this null ALT text for spacer images. Several websites attach alt=”spacer image”. Imagine how annoying this really is for a display screen reader user, especially when you have ten of them in a line. A display screen reader might say, “Image, spacer image” ten times in a row (screen viewers usually the word, “Image”, before reading out it is ALT text) – given that isn’t beneficial!

Various other web developers easily leave out the ALT function for spacer images (and perhaps various other images). In this instance, most display screen readers should read the actual filename, which may be ‘newsite/images/’. A display reader might announce this image since “Image, reports site slash images slash one pixel spacer department of transportation gif”. Imagine what this might sound like in the event there were 15 of these in a row!

Bullets and icons

Bullets and icons ought to be treated in much the same way as spacer images, consequently should be designated null choice text, or alt=””. Look at a list of products with a highly skilled bullet carrying on each item. If ALT text, ‘Bullet’ is assigned to each picture then, “Image, bullet” will probably be read aloud by screen readers before each list item, which makes it take that bit for a longer time to work through the list.

Device, usually accustomed to complement backlinks, should also always be assigned alt=””. Many websites, which place the icon next for the link textual content, use the link text while the ALT text from the icon. Display screen readers could first mention this ALT text, and after that the link textual content, so would definitely then say the link twice, which naturally isn’t important.

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

Decorative images

Attractive images as well should be assigned null solution text, or perhaps alt=””. If an image is pure eyeball candy, afterward there’s no requirement for a screen reader user to also know it has the there and being enlightened of the presence just adds to the environmental noise.

On the other hand, you could argue that the images in your site build a brand personality and by hiding them out of screen reader users if you’re denying this kind of group of users the same experience. Accessibility pros tend to favor the former argument, but now there certainly can be described as valid case for the latter too.

Nav & text embedded within just images

Navigation food selection that require elegant text have no choice but to embed the text within an graphic. In this scenario, the ALT text really should not be used to expand on the picture. Under no circumstances should the ALT textual content 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 should also claim ‘Services ALT text should always describe the information of the photo and should reiterate the text word-for-word. If you want to expand in the navigation, such as in this model, you can use the title attribute.

The same applies for your other textual content embedded inside an image. The ALT textual content should just repeat, word-for-word, the text covered within that image.

(Unless the font being utilized is especially completely unique it’s often pointless to embed text within just images — advanced routing and history effects can now be achieved with CSS. )


Websites tend to differ in how they apply ALT text to logos. Some say, Company name, others Business name logo, and also other describe the function of your image (usually a link back to the homepage),? Back to home’. Remember, ALT text must always describe a few possibilities of the photo so the first example, alt=”Company name”, has become the best. If the logo is known as a link back for the homepage, in that case this can be effectively communicated throughout the title tag.


Authoring effective ALT text genuinely too problematic. If it’s a decorative image therefore null different text, or alt=”” will need to usually use – do not, ever leave out the ALT attribute. In case the image consists of text then a ALT textual content should simply repeat this textual content, word-for-word. Keep in mind, ALT text should identify the content with the image and nothing more.

Do become sure as well to keep ALT text seeing that short and succinct as is feasible. Listening to an online page which has a screen subscriber takes a whole lot longer than traditional strategies, so don’t make the browsing experience painful for screen audience users with bloated and unnecessary ALT text. Click here for more: