Contact Us Today: (646) 820-9797

Receive My Best Weekly Health Tips, Recipes, and More!
Every week I send my subscribers a newsletter where I share one tried and tested Health Tip that you can use immediately to improve your health. Click "Subscribe!" to Join Now!

Writing Effective Alt Text For Pictures

Anyone who knows anything about world wide web accessibility knows that images require alternative, or perhaps ALT, textual content assigned to them. The reason is screen viewers can’t understand images, but rather read aloud the alternative textual content assigned to them. Online Explorer we can see this ALT text, by just mousing above the image and looking at the yellowish tooltip that appears. Additional browsers (correctly) don’t do this. The HTML for entering ALT textual content is:

But certainly there can’t be a skill to writing ALT text with regards to images? You simply pop a description in there and you’re all set, right? Very well, kind of. Sure, it’s not really rocket technology, but there are many guidelines you should follow…

Spacer images and missing ALT text

Spacer images should always be assigned null ALT textual content, or alt=””. This way most screen viewers will totally ignore the picture and just isn’t going to even announce its occurrence. Spacer pictures are hidden images that pretty many websites employ. The purpose of these people is, mainly because the identity suggests, to develop space for the page. Occasionally it’s not possible to create the visual display you need, so that you can stick a picture in (specifying its level and width) and voli’, you have the extra space you will need.

Not everyone uses this null ALT text message for spacer images. A lot of websites stick in alt=”spacer image”. Imagine how annoying this could be for a display reader end user, especially when you may have ten of which in a line. A display reader may say, “Image, spacer image” ten days in a line (screen visitors usually say the word, “Image”, before studying out the ALT text) – given that isn’t helpful!

Different web developers easily leave out the ALT aspect for spacer images (and perhaps additional images). In cases like this, most screen readers will read out the filename, that could be ‘newsite/images/’. A display screen reader would definitely announce this image since “Image, reports site reduce images slash one question spacer dot gif”. Contemplate what this could sound like in cases where there were some of these within a row!

Bullets and icons

Bullets and icons ought to be treated in much the same method as spacer images, thus should be assigned null alternate text, or perhaps alt=””. Look at a list of things with a the latest bullet proceeding each item. If ALT text, ‘Bullet’ is designated to each image then, “Image, bullet” will probably be read aloud by display screen readers prior to each list item, turning it into take that bit much longer to work through the list.

Icons, usually utilized to complement links, should also end up being assigned alt=””. Many websites, which in turn place the icon next to the link text message, use the hyperlink text since the ALT text from the icon. Display readers would probably first mention this ALT text, and next the link textual content, so may then say the link two times, which obviously isn’t necessary.

(Ideally, bullets and icons need to be called up as background pictures through the CSS document – this would take them off from the HTML CODE document totally and therefore remove the need for any ALT information. )

Decorative photos

Decorative images too should be assigned null option text, or alt=””. If an image is pure attention candy, afterward there’s no desire for a display screen reader user to even know it could there and being abreast of its presence basically adds to the environmental noise.

On the other hand, you could believe the images in your site make a brand name and by covering them right from screen reader users occur to be denying this kind of group of users the same experience. Accessibility industry professionals tend to favour the former disagreement, but there certainly is actually a valid case for the latter as well.

Course-plotting & text embedded within just images

Navigation possibilities that require nice text have no choice but to embed the written text within an image. In this problem, the ALT text really should not used to increase on the photograph. Under no circumstances should the ALT text message say, ‘Read all about the fantastic companies, designed to assist you in everything you do’. If the menu item says, ‘Services’ the ALT text message should also say ‘Services ALT text should always describe a few possibilities of the photo and should repeat the text word-for-word. If you want to expand around the navigation, such as in this case in point, you can use the title attribute.

The same applies for the other text message embedded within an image. The ALT textual content should easily repeat, word-for-word, the text secured within that image.

(Unless the font getting used is especially specific it’s often pointless to embed text within images – advanced nav and backdrop effects can be achieved with CSS. )


Websites tend to vary in that they apply ALT text to logos. Some say, Business name, others Business name logo, and also other describe the function from the image (usually a link returning to the homepage),? Back to home’. Remember, ALT text should describe a few possibilities of the photo so the initially example, alt=”Company name”, is just about the best. In case the logo is actually a link back to the homepage, then simply this can be properly communicated throughout the title point.


Publishing effective ALT text isn’t very too troublesome. If it’s an attractive image afterward null alternate text, or alt=”” should usually use – do not, ever omit the ALT attribute. If the image consists of text then the ALT textual content should easily repeat this text, word-for-word. Remember, ALT text should describe the content of this image certainly nothing more.

Do become sure likewise to keep ALT text as short and succinct as is possible. Listening to an online page having a screen target audience takes a whole lot longer than traditional strategies, so may make the browsing experience irritating to screen audience users with bloated and unnecessary ALT text. Click here for more:

Receive My Best Weekly Health Tips, Recipes, and More!
Every week I send my subscribers a newsletter where I share one tried and tested Health Tip that you can use immediately to improve your health. Click "Subscribe!" to Join Now!

Leave a Comment