Writing Successful ALT Text For Images

Anybody who knows anything about net accessibility knows that images want option, or ALT, text assigned to them. This is since screen readers cannot understand images, but rather read aloud the alternative text assigned to them. In Internet Explorer we can see this ALT text, merely by mousing more than the image and hunting at the yellow tooltip that seems. Other browsers (appropriately) do not do this. The HTML for inserting ALT text is:

But certainly there can't be a ability to writing ALT text for images? You just pop a description in there and you happen to be excellent to go, right? Effectively, type of. Confident, it is not rocket science, but there are a handful of guidelines you need to adhere to...

Spacer pictures and missing ALT text

Spacer pictures must usually be assigned null ALT text, or alt="" . This way most screen readers will fully ignore the image and will not even announce its presence. Spacer pictures are invisible pictures that pretty most internet sites use. The purpose of them is, as the name suggests, to develop space on the web page. Often it's not possible to develop the visual display you want, so you can stick an image in (specifying its height and width) and voli, you have the additional space you need to have.

Not every person uses this null ALT text for spacer images. Some web sites stick in alt="spacer image". Picture how annoying this can be for a screen reader user, mercedes auto parts especially when you have ten of them in a row. A screen reader would say, "Image, spacer image" ten instances in a row (screen readers typically say the word, "Image", ahead of reading out its ALT text) - now that is not helpful!

Other net developers merely leave out the ALT attribute for spacer images (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 pictures slash 1 pixel spacer dot gif". Picture what this would sound like if there had been ten of these in a row!

Bullets and icons

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

Icons, typically used to complement links, should also be assigned alt="". Several sites, which location the icon next to the link text, use the link 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 naturally is not essential.

(Ideally, bullets and icons ought to be known as up as background images by means of the CSS document - this would take away them from the HTML document entirely and therefore take away the need for any ALT description.)

Decorative images

Decorative images as well should be assigned null option text, or alt="". If an image is pure eye candy then there is no want for a screen reader user to even know it's there and getting informed of its presence basically adds to the noise pollution.

Conversely, you could argue that the images on your web site generate a brand identity and by hiding them from screen reader users you happen to be denying this group of customers the same knowledge. Accessibility specialists tend to favour the former argument, but there undoubtedly is a valid case for the latter as well.

Navigation & text embedded inside pictures

Navigation menus that require fancy text have no choice but to embed the text inside an image. In this circumstance, the ALT text shouldn't be employed to expand on the image. Beneath no circumstances really should the ALT text say, Read all about our wonderful services, created to assist you in every little thing you do'. If the menu item says, Services' then the ALT text should also say Services'. ALT text must usually 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 example, you can use the title attribute.

The exact same applies for any other text embedded inside an image. The ALT text ought to basically a guide to cavalier body kit repeat, word-for-word, the text contained inside that image.

(Unless the font becoming utilized is especially distinctive it really is often unnecessary to embed text within pictures - advanced navigation and background effects can now be accomplished with CSS.)

Company logo

Sites tend to differ in how they apply ALT text to logos. Some say, Business name', others Company name logo', and other describe the function of the image (generally a hyperlink back to the homepage), Back to home'. Remember, ALT text ought to often describe the content of the image so the first instance, alt="Firm name", is probably the very best. If the logo is a hyperlink back to the homepage then this can be successfully communicated by way of the title tag.

Conclusion

Writing helpful ALT text isn't too difficult. If it's a decorative image then null alternative text, or alt="" really should generally be employed - by no means, ever omit the ALT attribute. If the image includes text then the ALT text must just repeat this text, word-for-word. Don't forget, ALT text should describe the content material of the image and read mustang body kits practically nothing far more.

Do also be positive also to keep ALT text as short and succinct as attainable. Listening to a internet web page with a screen reader takes a lot longer than traditional techniques, so do not make the surfing encounter painful for screen reader customers with bloated and unnecessary ALT text.