Writing Helpful ALT Text For Pictures

Anybody who knows anything about internet accessibility knows that pictures require option, or ALT, text assigned to them. This is due to the fact screen readers can not comprehend images, but rather read aloud the alternative text assigned to them. In Internet Explorer we can see this ALT text, simply by mousing over the image and hunting at the yellow tooltip that appears. Other browsers (properly) don't do this. The HTML for inserting ALT text is:

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

Spacer pictures and missing ALT text

Spacer pictures ought to constantly 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 fairly most websites use. The purpose of them is, as the name suggests, to generate space on the page. Sometimes it really is 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 added space you need to have.

Not every person utilizes this null ALT text for spacer images. Some sites stick in alt="spacer image". Picture how annoying this can be for a screen reader user, especially when you have ten of them in a row. A screen reader would say, "Image, spacer image" ten times in a row (screen readers normally 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 probably other images). 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 1 pixel spacer dot gif". Imagine what this would sound like if there had been ten of these in a row!

Bullets and icons

Bullets and icons ought to be treated in a lot the same way as spacer pictures, so really should be assigned null option text, or alt="". Think about a list of items with a fancy bullet proceeding each and every item. If the ALT text, Bullet' is assigned to every single image then, "Image, bullet" will be read aloud by screen readers just before every list item, generating it take that bit longer to function by way of the list.

Icons, normally used to complement links, really should also be assigned alt="". Several websites, which location the icon subsequent to the link text, use the link text as the ALT text of the icon. Screen readers would 1st announce this ALT text, and then the hyperlink text, so would then say the link twice, which naturally is not required.

(Ideally, bullets and icons should be called up as background pictures by means of the CSS document - this would eliminate them from the HTML document completely and for that reason eliminate the need for any ALT description.)

Decorative images

Decorative images as well ought to be assigned ford ranger body kits null alternative text, or alt="". If an image is pure wheel spacers eye candy then there's no want for a screen reader user to even know it really is there and becoming informed of its presence merely adds to the noise pollution.

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

Navigation & text embedded within pictures

Navigation menus that need fancy text have no decision but to embed the text within an image. In this predicament, the ALT text should not be employed to expand on the image. Beneath no circumstances really should the ALT text say, Read all about our amazing services, created to help you in almost everything you do'. If the menu item says, integra body kits Services' then the ALT text really should also say Services'. ALT text should always describe the content of the image and 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 inside an image. The ALT text should merely repeat, word-for-word, the text contained inside that image.

(Unless the font getting employed is specially unique it is usually unnecessary to embed text within pictures - advanced navigation and background effects can now be accomplished with CSS.)

Organization logo

Internet sites tend to vary in how they apply ALT text to logos. Some say, Business name', others Business name logo', and other describe the function of the image (generally a link back to the homepage), Back to home'. Keep in mind, ALT text must constantly describe the content material of the image so the 1st instance, alt="Firm name", is probably the best. If the logo is a hyperlink back to the homepage then this can be effectively communicated through the title tag.

Conclusion

Writing helpful ALT text is not as well tough. If it's a decorative image then null alternative text, or alt="" ought to normally be utilized - never ever, ever omit the ALT attribute. If the image consists of text then the ALT text must basically repeat this text, word-for-word. Bear in mind, ALT text should describe the content material of the image and nothing more.

Do also be certain also to preserve ALT text as short and succinct as feasible. Listening to a internet page with a screen reader takes a lot longer than traditional techniques, so do not make the surfing expertise painful for screen reader users with bloated and unnecessary ALT text.