Writing Effective Alt Text For Pictures

June 9, 2018

Anyone who appreciates anything about world wide web accessibility sees that images need alternative, or perhaps ALT, text assigned to them. This is due to screen readers can’t appreciate images, but rather read out loud the alternative text assigned to them. In Internet Explorer we can see this ALT text, just by mousing in the image and looking at the red tooltip that appears. Different browsers (correctly) don’t do this. The HTML for inserting ALT textual content is:

But absolutely there cannot be a skill to writing ALT text meant for images? You simply pop a description in there and you’re ready to go, right? Well, kind of. Sure, it’s certainly not rocket technology, but there are several guidelines you should follow…

Spacer images and absent ALT textual content

Spacer images should be assigned null ALT textual content, or alt=””. This way most screen readers will completely ignore the image and will likely not even publicize its occurrence. Spacer photos are disguised . images that pretty most websites work with. The purpose of them is, as the identity suggests, to produce space over the page. At times it’s difficult to create the visual screen you need, to help you stick an image in (specifying www.plycollection.com its elevation and width) and voli’, you have the extra space you need.

Not everyone uses this null ALT text message for spacer images. A few websites attach alt=”spacer image”. Imagine how annoying this is often for a display screen reader consumer, especially when you have ten of those in a row. A screen reader would definitely say, “Image, spacer image” ten moments in a line (screen visitors usually say the word, “Image”, before browsing out it is ALT text) – now that isn’t beneficial!

Other web developers easily leave out the ALT characteristic for spacer images (and perhaps various other images). In this case, most display screen readers might read out your filename, which may be ‘newsite/images/’. A screen reader would definitely announce this kind of image simply because “Image, media site cut images cut one pixel spacer department of transportation gif”. Contemplate what this could sound like in the event there were eight of these within a row!

Bullets and icons

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

Symbols, usually used to complement links, should also always be assigned alt=””. Many websites, which will place the icon next towards the link text, use the website link text when the ALT text with the icon. Display screen readers might first declare this ALT text, then the link text, so may then the link two times, which naturally isn’t important.

(Ideally, bullets and icons ought to be called up as background pictures through the CSS document — this would take them off from the CODE document totally and therefore take away the need for virtually any ALT explanation. )

Decorative images

Ornamental images also should be given null solution text, or alt=””. If an image is usually pure perspective candy, in that case there’s no desire for a display reader user to also know they have there and being informed of the presence merely adds to the noise pollution.

More over, you could believe the images with your site build a brand info and by hiding them by screen target audience users most likely denying this kind of group of users the same experience. Accessibility specialists tend to favour the former question, but generally there certainly is actually a valid case for the latter as well.

Sat nav & text message embedded inside images

Navigation food selection that require pretty text be forced to embed the written text within an photograph. In this situation, the ALT text really should not used to improve on the photograph. Under no circumstances should the ALT text say, ‘Read all about our fantastic solutions, designed to assist you in everything you do’. If the menu item says, ‘Services’ the ALT textual content should also claim ‘Services ALT text should always describe this content of the photo and should do the text word-for-word. If you want to expand in the navigation, including in this example, you can use the title attribute.

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

(Unless the font being used is especially exceptional it’s often unneeded to add text within images — advanced map-reading and record effects can now be achieved with CSS. )


Websites tend to differ in how they apply ALT text to logos. Several say, Company name, others Business name logo, and also other describe the function with the image (usually a link to the homepage),? Back to home’. Remember, ALT text should describe the content of the impression so the primary example, alt=”Company name”, is probably the best. If the logo is known as a link back towards the homepage, afterward this can be successfully communicated throughout the title label.

Final result

Writing effective ALT text actually too problematic. If it’s a decorative image in that case null option text, or perhaps alt=”” should usually use – under no circumstances, ever leave out the ALT attribute. If the image has text then a ALT textual content should merely repeat this text, word-for-word. Remember, ALT textual content should identify the content in the image certainly nothing more.

Do also be sure also to keep ALT text seeing that short and succinct as it can be. Listening to an internet page with a screen audience takes a great deal longer than traditional strategies, so can not make the searching experience painful for screen visitor users with bloated and unnecessary ALT text. Click here for more:

Contact Us: info@somakat.com • 801-358-1959