Writing Effective ALT Text For Images on your Website | Richard Takemura

Writing Effective ALT Text For Images on your Website

Anyone who knows anything about web accessibility knows that images need alternative, or ALT, text assigned to them. This is because screen readers can not understand images, but rather read aloud the alternative text assigned to them. In Internet Explorer you can see this ALT text, simply by mousing over the image and looking at the description that appears yellow. Other browsers (correctly) do not. HTML code to insert ALT text is:

But surely it can not be a skill to writing ALT text for images? You just pop a description of there and you’re good to go, right? Well, a little. Sure, it’s not rocket science, but there are some guidelines you should follow …

Image spacers and missing ALT text

Spacer images should always be assigned null alternative text, or alt = “”. In this way most screen readers completely ignore the image and not even announce their presence. Spacer images are invisible images that pretty much most websites use. Their purpose is, as its name suggests, to create a space on the page. Sometimes it is not possible to create visual representation you need, so you can stick an image in (specify height and width), you have the space you need.

Not everyone uses this null ALT text for spacer images. Some websites stick alt = “spacer image” on. Imagine how annoying it can be for a screen reader user, especially when you have ten of them in a row. A screen reader will say “, Image, spacer image” ten times in a row (screen readers usually say the word “image” before reading your text ALT) – Now that is not useful!

Other web developers simply leave out the ALT attribute for spacer images (and maybe other images). In this case, most screen readers read the file name, which could be “newsite / images / onepixelspacer.gif. A screen reader would announce this image as” Image, newsite images Slash Slash one pixel spacer dot gif . “Imagine what it would sound like if ten of them in a row!

Bullets and icons

Bullets and icons should be treated the same way as spacer images, so should be assigned null alternative text, or alt = “”. Think of a list of items with a fancy bullet proceeding each item. If the ALT text, ‘Bullet’ is assigned to each image then “image, a black point” will be read aloud by screen readers before each list item, so it is to have that little extra time to work through the list.

Icons, usually used to complement links, should also be assigned alt = “”. Many websites, which place the icon next to the text of the link, use the link text as the ALT text of the icon. Screen readers will announce this ALT text first and then the link text, so you say the link twice, which obviously is not necessary.

(Ideally, bullets and icons should be called as background images through CSS document – this would eliminate the entire HTML document and thus eliminate the need for any ALT description.)

Decorative images

Well Decorative images should be assigned null alternative text, or alt = “”. If an image is pure eye candy then there is no need for a screen reader user to even know it’s there and be informed of their presence only adds to noise pollution.

On the contrary, one could argue that the images on your site create a brand identity and hiding them from users of screen readers who are denying this group of users the same experience. Accessibility experts tend to favor the former argument, but it certainly is a valid case for the second well.

Navigation and Text embedded in images

Navigation menus that require fancy text have no choice but to integrate the text within an image. In this situation, the ALT text should not be used to enlarge the image. Under no circumstances should the alt text say: “Read all about our fantastic services, designed to help you in everything you do.” If the menu item says, “Services”, then the alternative text should also say ‘Services’. Alternative text should always describe the content of the image and repeat the text word for word. To expand the navigation, as in this example, you can use the title attribute.

The same applies to any other text embedded within an image. The ALT text is repeated, word for word, the text in that image.

(Unless the font used is especially unique is often necessary to insert the text within images – advanced navigation and background effects can now be achieved with CSS.)

Company Logo

Websites tend to vary in the way they apply ALT text to logos. Some say, “Company Name”, others “Company name logo ‘and others describe the function of the image (usually a link to the home page),’ Coming Home ‘. Remember, ALT text should always describe the content of the image to the first example, alt = “Company Name”, is probably the best. If the logo is a link to the home page, then this can be effectively communicated through the title tag.

Conclusion

Writing effective ALT text is not too difficult. If this is a decorative image then null alternative text, or alt = “” generally be used – never, never omit the ALT attribute. If the image contains text, then the alternative text should simply repeat this text, word for word. Remember, ALT text should describe the content of the image and nothing else.

Also not sure also to keep ALT text as short and concise as possible. Listen to a web page with a screen reader takes much longer than traditional methods, so you do not make the surfing experience painful for screen reader users with bloated and unnecessary ALT text.

Read more Website Design Tips

Print On Demand Banner