Writing Effective ALT Text For Pictures

Any individual who knows anything about web accessibility knows that pictures need to have option, or ALT, text assigned to them. This is simply because screen readers cannot understand pictures, but rather read aloud the alternative text assigned to them. In Web Explorer we can see this ALT text, simply by mousing over the image and hunting at the yellow tooltip that appears. Other browsers (properly) do not do this. The HTML for inserting ALT text is:

But surely there can not be a racing steering wheel skill to writing ALT text for pictures? You just pop a description in there and you happen to be very good to go, appropriate? Well, kind of. Sure, it really is not rocket science, but there are a handful of guidelines you require to follow...

Spacer pictures and missing ALT text

Spacer pictures really should constantly be assigned null ALT text, or alt="" . This way most screen readers will entirely ignore the image and will not even announce its presence. Spacer pictures are invisible pictures that pretty most sites use. The goal of them is, as the name suggests, to develop space on the page. Occasionally it's not feasible to produce the visual display you need to have, so you can stick an image in (specifying its height and width) and voli, you have the additional space you need to have.

Not everybody makes use of this null ALT text for spacer pictures. Some sites stick in alt="spacer image". Imagine how annoying this can be for a screen reader user, specially when you have ten of them in a row. A screen reader would say, "Image, spacer image" ten instances in a row (screen readers generally say the word, "Image", prior to reading out its ALT text) - now that isn't helpful!

Other internet developers simply leave out the ALT attribute for spacer pictures (and maybe other pictures). In this situation, most screen readers will read out the filename, which could be newsite/images/onepixelspacer.gif'. A screen reader would announce this image as "Image, newsite slash images slash a single pixel spacer dot gif". Think about what this would sound like if there were ten of these in a row!

Bullets and icons

Bullets and icons should be treated in significantly the very same way as spacer images, so really should be assigned null alternative text, or alt="". Assume about a list of things with a fancy bullet proceeding every single item. If the ALT text, Bullet' is assigned to each image then, "Image, bullet" will be read aloud by screen readers prior to each list item, generating it take that bit longer to perform by means of the list.

Icons, usually utilised to complement links, ought to also be assigned alt="". Several web sites, which place the icon next to the link text, use the hyperlink text as the ALT text of the icon. Screen readers would first announce this ALT text, and then the hyperlink text, so would then say the hyperlink twice, which clearly is not required.

(Ideally, bullets and icons must be referred to as up as background images via the CSS document - this would take away them from the HTML document totally and consequently eliminate the want for any ALT description.)

Decorative pictures

Decorative pictures too really should be assigned null alternative text, or alt="". If an image is pure eye candy then there is no need to have for a screen reader user to even know it is there and getting informed of its presence simply adds to the noise pollution.

Conversely, you could argue that the images on your web site produce a brand identity and by hiding them from screen reader customers you're denying this group of users the exact same experience. Accessibility experts tend to favour the former argument, but there surely is a valid case for the latter too.

Navigation & text embedded inside pictures

Navigation menus that need fancy text have no selection but to embed the text within an image. In this predicament, the ALT text shouldn't be utilized to expand on e60 m5 the image. Beneath no circumstances must the ALT text say, Read all about our wonderful services, developed to support you in almost everything you do'. If the menu item says, Services' then the ALT text ought to also say Services'. ALT text should constantly describe the content material of the image and really should repeat the text word-for-word. If you want to expand on the navigation, such as in this instance, you can use the title attribute.

The same applies for any other text embedded within an image. The ALT text ought to just repeat, word-for-word, the text contained within that image.

(Unless the font being used is specifically unique it really is usually unnecessary to embed text inside pictures - advanced navigation and background effects can now be achieved with CSS.)

Company logo

Websites tend to vary in how they apply ALT text to logos. Some say, Organization name', other people Business name logo', and other describe the function of the image (typically a link back to the homepage), Back to home'. Keep in mind, ALT text should constantly describe the content material of the image so the initial example, alt="Business name", is probably the greatest. If the logo is a link back to the homepage then this can be efficiently communicated via the title tag.

Conclusion

Writing efficient ALT text isn't too challenging. If it really is a decorative image then null option text, or alt="" must generally be utilized - in no way, ever omit the ALT attribute. If the image includes text then passat body kit the ALT text must basically repeat this text, word-for-word. Keep in mind, ALT text ought to describe the content of the image and practically nothing more.

Do also be sure also to maintain ALT text as short and succinct as feasible. Listening to a web web page with a screen reader takes a lot longer than classic strategies, so don't make the surfing experience painful for screen reader users with bloated and unnecessary ALT text.