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 realizes anything about internet accessibility sees that images want alternative, or ALT, text assigned to them. The reason is screen readers 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 simply mousing over the image and searching at the green tooltip that appears. Different browsers (correctly) don’t do that. The HTML CODE for entering ALT text is:

But absolutely there can’t be a skill to writing ALT text intended for images? You just pop an outline in there and you’re ready to go, right? Well, kind of. Sure, it’s not really rocket scientific discipline, but there are several guidelines you have to follow…

Spacer images and absent ALT textual content

Spacer images should always be assigned null ALT text message, or alt=””. This way many screen readers will entirely ignore the photograph and planning to even mention its occurrence. Spacer images are hidden images that pretty most websites make use of. The purpose of all of them is, mainly because the identity suggests, to create space in the page. Sometimes it’s difficult to create the visual display you need, to help you stick an image in (specifying its level and width) and voli’, you have the excess space you need.

Not everyone uses this null ALT text message for spacer images. A lot of websites attach alt=”spacer image”. Imagine just how annoying this really is for a display screen reader consumer, especially when you have ten of them in a line. A display screen reader would say, “Image, spacer image” ten days in a line (screen viewers usually the word, “Image”, before examining out their ALT text) – now that isn’t beneficial!

Various other web developers basically leave out the ALT function for spacer images (and perhaps different images). In this case, most screen readers is going to read the actual filename, which may be ‘newsite/images/’. A display screen reader would announce this kind of image since “Image, media site reduce images cut one cote spacer appear in gif”. Imagine what this can sound like in cases where there were five of these within a row!

Bullets and icons

Bullets and icons need to be treated in much the same way as spacer images, therefore should be designated null option text, or perhaps alt=””. Look at a list of things with a elegant bullet carrying on each item. If ALT text, ‘Bullet’ is assigned to each photo then, “Image, bullet” will be read out loud by screen readers ahead of each list item, rendering it take that bit much longer to work through checklist.

Symbols, usually utilized to complement links, should also always be assigned alt=””. Many websites, which will place the icon next for the link text message, use the website link text mainly because the ALT text from the icon. Display screen readers may first declare this ALT text, and then the link text, so may then the link 2 times, which obviously isn’t necessary.

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

Decorative images

Decorative images as well should be designated null alternate text, or alt=””. In the event that an image is usually pure eyes candy, afterward there’s no requirement for a display reader user to also know they have there and being prepared of the presence easily adds to the noise pollution.

Alternatively, you could believe the images on your own site create a brand information and by hiding them coming from screen reader users you’re here denying this kind of group of users the same knowledge. Accessibility analysts tend to favour the former controversy, but presently there certainly is actually a valid case for the latter too.

Map-reading & text embedded within images

Navigation selections that require nice text have no choice but to embed the text within an picture. In this circumstance, the ALT text really should not be used to expand on the photo. Under no circumstances should the ALT textual content 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 claim ‘Services ALT text should always describe this content of the photo and should duplicate the text word-for-word. If you want to expand to the navigation, including in this case, you can use it attribute.

The same applies for any other text embedded inside an image. The ALT text should merely repeat, word-for-word, the text contained within that image.

(Unless the font being used is especially different it’s often unnecessary to introduce text within images — advanced sat nav and qualifications effects quickly achieved with CSS. )

Company logo

Websites tend to vary in the way they apply ALT text to logos. A lot of say, Business name, others Company name logo, and also other describe the function on the image (usually a link returning to the homepage),? Back to home’. Remember, ALT text should describe the content of the photograph so the initial example, alt=”Company name”, is just about the best. In the event the logo can be described as link back towards the homepage, in that case this can be efficiently communicated throughout the title marking.


Writing effective ALT text definitely too troublesome. If it’s an enhancing image afterward null solution text, or perhaps alt=”” should certainly usually use – do not, ever leave out the ALT attribute. In the event the image has text then the ALT textual content should merely repeat this text, word-for-word. Keep in mind, ALT text message should express the content within the image certainly nothing more.

Do become sure also to keep ALT text for the reason that short and succinct as is possible. Listening to a web page using a screen subscriber takes a lot longer than traditional strategies, so is not going to make the browsing experience painful for 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

About Dr. Wholesome

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.