Writing Successful ALT Text For Images

出典: くみこみックス

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

But certainly there can't be a skill to writing ALT text for pictures? You just pop a description in there and you happen to be great to go, appropriate? Nicely, kind of. Confident, it really is not rocket science, but there are a few guidelines you need to have to follow...

Spacer pictures and missing ALT text

Spacer images must often be assigned null ALT text, or alt="" . This way most screen readers will completely ignore the image and won't even announce its presence. Spacer images are invisible pictures that pretty most web sites use. The goal of them is, as the name suggests, to create space on the web page. Occasionally it is not achievable to produce the visual display you want, so you can stick an image in (specifying its height and width) and voli, you have the added space you want.

Not every person utilizes this null ALT text for spacer pictures. Some websites stick in alt="spacer image". Picture 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 usually say the word, "Image", ahead of reading out its ALT text) - now that isn't beneficial!

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

Bullets and icons

Bullets and icons ought to be treated in much the same way as spacer images, so ought to be assigned null option text, or alt="". Believe about a list of things 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 each and every list item, generating it take that bit longer to work through the list.

Icons, usually utilized to complement links, must also be assigned alt="". Several web sites, which place the icon subsequent to the link text, use the hyperlink 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 ought to be referred to as up as background images via the CSS document - this would remove them from the HTML document completely and for that reason remove the want for any ALT description.)

Decorative images

Decorative images also ought to be assigned null option 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 becoming informed of its presence basically adds to the noise pollution.

Conversely, you could argue that the images on your site develop a brand identity and by hiding them from screen reader users you happen to be denying this group of customers the very same expertise. Accessibility professionals tend to favour the former argument, but there certainly is a valid case for the latter also.

Navigation & text embedded within pictures

Navigation menus that require fancy text have no decision but to embed the text inside an image. In this circumstance, the ALT text should not be employed to expand on the image. Below no circumstances must the ALT text say, Read all about our amazing services, created camaro wide body kit to assist you in every little thing you do'. If the menu item says, Services' then the ALT text camaro wide body kit ought to also say Services'. ALT text must often 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 very same applies for any other text embedded within an image. The ALT text should basically repeat, word-for-word, the text contained inside that image.

(Unless the font being employed is specifically distinctive it's typically unnecessary to embed text within images - advanced navigation and background effects can now be achieved with CSS.)

Company logo

Internet sites tend to vary in how they apply ALT text to logos. Some say, Company name', others Business name logo', and other describe the function of the image (typically a hyperlink back to the homepage), Back to home'. Bear in mind, ALT text must usually describe the content of the image so the 1st example, alt="Organization name", is most likely the best. If the logo is a hyperlink back to the homepage then this can be properly communicated by means of the title tag.

Conclusion

Writing successful ALT text is not also difficult. If it's a decorative image then null alternative text, or alt="" really should normally be utilized - by no means, ever omit the ALT attribute. If the image contains text then the ALT text should merely repeat this text, word-for-word. Don't forget, ALT text ought to describe the content of the image and practically nothing a lot more.

Do also be certain also to maintain ALT text as short and succinct as feasible. Listening to a web page with a screen reader requires a lot longer than traditional approaches, so do not make the surfing experience painful for screen reader users read this with bloated and unnecessary ALT text.