Anyone who knows anything about web accessibility knows that images want alternative, or perhaps ALT, text assigned to them. This is because screen visitors can’t understand images, but instead read aloud the alternative text message assigned to them. In Internet Explorer we can see this ALT text, merely by mousing within the image and looking at the green tooltip that appears. Other browsers (correctly) don’t make this happen. The HTML for placing ALT text message is:

But certainly there can not be a skill to writing ALT text with regards to images? You merely pop some in there and you’re ready to go, right? Well, kind of. Sure, it’s not rocket scientific discipline, but there are many guidelines you should follow…

Spacer images and missing ALT textual content

Spacer images should be assigned null ALT textual content, or alt=””. This way the majority of screen readers will entirely ignore the photo and will not likely even publicize its occurrence. Spacer images are unseen images that pretty many websites employ. The purpose of these people is, while the name suggests, to develop space at the page. At times it’s not possible to create the visual display you need, so you can stick a picture in (specifying its level and width) and voli’, you have the excess space you need.

Certainly not everyone uses this null ALT text for spacer images. Some websites stick in alt=”spacer image”. Imagine just how annoying this could be for a screen reader user, especially when you may have ten of those in a row. A screen reader would say, “Image, spacer image” ten moments in a line (screen viewers usually the word, “Image”, before reading out it is ALT text) – given that isn’t helpful!

Various other web developers merely leave out the ALT credit for spacer images (and perhaps different images). In cases like this, most display readers can read the actual filename, that could be ‘newsite/images/’. A display reader would announce this image since “Image, information site slash images slash one pixel spacer appear in gif”. Picture what this will sound like if there were eight of these in a row!

Bullets and icons

Bullets and icons need to be treated in much the same approach as spacer images, therefore should be designated null solution text, or perhaps alt=””. Look at a list of things with a expensive bullet continuing each item. If ALT text, ‘Bullet’ is designated to each photo then, “Image, bullet” will be read aloud by display screen readers just before each list item, making it take that bit for a longer time to work through checklist.

Symbols, usually utilized to complement links, should also end up being assigned alt=””. Many websites, which place the icon next towards the link text message, use the link text as the ALT text from the icon. Screen readers will first publicize this ALT text, and the link text, so might then say the link two times, which definitely isn’t important.

(Ideally, bullets and icons should be called up as background images through the CSS document – this would remove them from the HTML CODE document totally and therefore eliminate the need for virtually any ALT explanation. )

Decorative pictures

Attractive images too should be given null different text, or perhaps alt=””. If an image is definitely pure eyeball candy, then there’s no requirement of a display screen reader end user to even know it has the there and being prepared of it is presence just adds to the environmental noise.

Conversely, you could believe the images in your site build a brand information and by hiding them from screen target audience users you’re denying this kind of group of users the same encounter. Accessibility gurus tend to favour the former point, but generally there certainly is a valid case for the latter too.

Nav & text embedded within just images

Navigation possibilities that require fancy text have no choice but to embed the text within an picture. In this circumstance, the ALT text shouldn’t be used to expand on the photo. Under no circumstances if the ALT textual content say, ‘Read all about our fantastic services, designed to assist you in everything you do’. If the menu item says, ‘Services’ the ALT text message should also declare ‘Services ALT text must always describe this article of the photo and should repeat the text word-for-word. If you want to expand over the navigation, just like in this example, you can use the title attribute.

The same applies for almost any other text embedded during an image. The ALT textual content should just repeat, word-for-word, the text comprised within that image.

(Unless the font being utilized is especially different it’s often unnecessary to introduce text within images – advanced selection and history effects can be achieved with CSS. )


Websites tend to change in that they apply ALT text to logos. Several say, Company name, others Business name logo, and also other describe the function of your image (usually a link back in the homepage),? Back to home’. Remember, ALT text should describe a few possibilities of the photo so the initially example, alt=”Company name”, has become the best. In case the logo is actually a link back for the homepage, therefore this can be effectively communicated throughout the title draw.


Composing effective ALT text just isn’t too tricky. If it’s an enhancing image then null substitute text, or alt=”” should certainly usually be used – never, ever omit the ALT attribute. In case the image includes text then your ALT text message should merely repeat this text, word-for-word. Remember, ALT textual content should explain the content of this image certainly nothing more.

Do also be sure as well to keep ALT text simply because short and succinct as is possible. Listening to an online page with a screen visitor takes a great deal longer than traditional strategies, so no longer make the searching experience irritating to screen reader users with bloated and unnecessary ALT text. Click here for more: